2013-10-05 253 views
0

開始做一些研究,爲網站創建一個相當簡單的媒體部分,我似乎遇到了一些問題。我會盡我所能解釋。HTML5音頻/ jQuery

我有一個'播放列表',它包含'links' - li元素atm - 利用Ajax/PHP將數據和負載拉入音頻元素。我可以把數據拉好,沒有問題。

但是我的問題出現在用戶選擇「軌道」時。

預期歌曲播放沒有問題,但是如果用戶選擇同一首歌曲或不同的歌曲,則第一個「曲目」繼續播放,而「新選定的」曲目開始播放。我基本上可以同時演奏10首曲目 - 相當煩人。

我試圖阻止的第一首歌 - 無論是我破壞了音頻標籤或任何其它方法 - ,並播放新選擇的歌曲當用戶選擇一個不同的「軌道」

我想我可以理解問題,我不斷創建音頻元素的新實例,而不會破壞初始實例。因此,想知道尋找任何以前發生的音頻並在檢測到這個事件並創建一個新音頻時的最好方法。

下面是我測試的一些代碼,目前這個腳本運行一次aJax回調=成功。

--COMMENTS 下面的代碼是在jQuery的 音頻= HTML5音頻的情況下 arydata =包含從PHP腳本 --COMMENTS

我想到的是數據的數組,我需要增加下面的代碼之前的一些代碼運行以驗證是否存在任何現有的音頻元素,但我不知道這是否是最好的方法。

var audio = new Audio(); 
audio.src = arydata[1] + ".mp3"; 
audio.load(); 
audio.play(); 

讓我知道,如果需要別的。

回答

0

找到了解決辦法。

我錯誤地創建一個新的音頻實例,每次用戶選擇一個軌道。

因此,要解決此問題,我在腳本加載時創建了音頻實例。然後,一旦用戶選擇了一條音軌,我就可以找到Audio實例並將數據加載到它。

以下是代碼。

var audio = new Audio(); 

$("#media_player_playlist_wrapper li").click(function(){ 
    var player = $(audio).get(0); 
    player.src = filepath; 
    player.load(); 
    player.play(); 
});