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