使用jquery播放音頻

我有一個小的jQuery函數來在用戶點擊鏈接時播放音頻。我不需要任何控制，他們是短小的樣本。我只想隨時玩用戶點擊。這是應該播放的部分的html;使用jquery播放音頻

</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。任何幫助表示讚賞。

來源

2014-10-07 dimmlight

我認爲你正在尋找的事件是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。我寫的:)

來源

2014-10-07 19:41:42 Nindaff

這個工作完美。然後我添加了$（'。pause'）。click（function（）{audioElement.pause（）; }）; 給playMusic函數創建一種方法來停止正在播放的內容。這對於需要玩樣品的簡單列表很有用 – dimmlight 2014-10-07 19:57:06

好極了！很高興幫助！ – Nindaff 2014-10-07 20:01:42

嘗試這樣：

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

而且從代碼：

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

來源

2014-10-07 19:57:51 kane

使用jquery播放音頻

回答

相關問題