使用 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。我写的:)

Answer 2

试试这样的：

<audio id="sound">
  <source src="music/classical/open.mp3" type="audio/mpeg">
</audio>

从代码中：

  $(function(){
      $('#sound').get(0).play();
  });