javascript - 使用 Jquery 播放音频

Question

我有一个小的 jQuery 函数，可以在用户单击链接时播放音频。我不需要任何控件，它们是短样本。我只想在用户点击时播放。这是应该播放的部分的 html；

    </div class="classicalRecordings">
      <a href="#" class="play" data-audio-src="music/classical/open.mp3">Open song</a>
    </div>

然后这是播放声音的jQuery；

        function playMusic(){
          var audioElement = document.createElement('audio');
          var audioElementSrc = $(this).attr('data-audio-src');
          audioElement.setAttribute('src', audioElementSrc);
          $.get();
          audioElement.addEventListener("load", function(){
              audioElement.play();
          }, true);
      } 
      $(function(){
          $('.play').click(playMusic);
      });

好像不行。我认为它与 src 变量有关，我不确定我是否正确地将它传递给了 audioElement。我已经使用警报进行了测试，以确保我正确地获取了 data-audio-src。感谢您的帮助。

Answer 1

我认为您正在寻找的事件是 loadeddata 事件。

    function playMusic(){
      var audioElement = document.createElement('audio');
      var audioElementSrc = $(this).attr('data-audio-src');
      audioElement.setAttribute('src', audioElementSrc);
      $.get();
      // changed "load" t0 "loadeddata"
      audioElement.addEventListener("loadeddata", function(){
          audioElement.play();
      }, true);
  } 
  $(function(){
      $('.play').click(playMusic);
  });

尽管拥有静态音频元素并在用户点击时更改 src 属性可能比创建新的音频元素更好。

// example  
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function() {
     this.play();
}, true);
function playMusic() {
    var audioElementSrc = $(this).attr('data-audio-src');
    audio.setAttribute('src', audioElementSrc);
};
$('.play').click(playMusic);

有一个框架值得一试。 ListenJS .我写的:)