使用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。我已经使用警报进行了测试，以确保我正确地抓取了数据音频-rcrc。任何帮助表示赞赏。

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