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();
  });

使用Jquery播放音频

2 个答案: