HTML5 crossbrowser播放列表

Question

在這個問題的幫助下Use of reference to calling object (this) using HTML5 audio and jQuery 編輯它我得到了我想要的播放列表，它在Crome和Safari上完美運行，但在其他瀏覽器中根本無法播放，因爲並非所有瀏覽器都支持mp3文件。 （經過測試的IE和FireFox;音頻沒有播放，用我的iPod測試過Safari並沒有問題）但是奇怪的是，IE在支持mp3時不會播放音頻。

jsFiddle

這是我想出了上面的編輯鏈接的問題。我整合了jQuery爲按鈕提供了不同的風格，使得它看起來更像Youtube Play/Pause按鈕。這裏 更好的例子：Playlist

我試圖用jQuery來改變這樣的

this.next = function(){ 
    count++; 
     if(count == 2){count = 0;} 
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3'); 
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg'); 
}; 

在音頻中的src鏈接改變<audio>標記成這樣：

<audio id="aud" autoplay autobuffer> 
    <source id="uhh2" src="http://daokun.webs.com/play0.ogg" type="audio/ogg" /> 
    <source id="uhh" src="http://daokun.webs.com/play0.mp3" type="audio/mpeg" /> 
</audio> 

要使它crossbrowser，但歌曲改變後，它不會更改<source>標籤的src。

我也試圖編輯這樣的一個功能：

this.next = function(){ 
count++; 
    if(count == 2){count = 0;} 
    uhh = 'http://daokun.webs.com/play'+count+'.mp3'; 
    uhh2 = 'http://daokun.webs.com/play'+count+'.ogg'; 
}; 

並添加variabels：

var uhh = $('#uhh').attr('src'), 
    uhh2 = $('#uhh2').attr('src'); 

試過這種藏漢，仍然一無所獲。

var uhh = document.getElementById('aud').firstChild, 
    uhh2 = document.getElementById('aud').lastChild; 

沒有工作，所以我剪輯成這樣：

var uhh = document.getElementById('uhh'), 
    uhh2 = document.getElementById('uhh2'); 

下一個函數爲：

this.next = function(){ 
    count++; 
     if(count == 2){count = 0;} 
    uhh.src = 'http://daokun.webs.com/play'+count+'.mp3'; 
    uhh2.src = 'http://daokun.webs.com/play'+count+'.mp3'; 
}; 

分配的ID給兩個<source> S（侏儒和uhh2），但沒有。

我注意到通過檢查Chrome的源代碼，兩個<source>上的src鏈接改變了，但問題是mp3文件沒有通過檢查資源標籤「加載」到頁面中。在使用<audio>標籤時，只有新的mp3文件被「加載」到頁面中並播放。

那麼我做錯了什麼？或者發生了什麼，它不起作用？

Answer 1

看起來你在這裏做的很多，我喜歡你付出的努力。在我看來，你唯一不會做的就是「捕捉事件」。

$("#aud").addEventListener('ended', function(){ 
    this.currentTime=0; 
    this.next = function(){ 
    count++; 
    if(count == 2){count = 0;} 
    $('#uhh').attr('src', 'http://daokun.webs.com/play'+count+'.mp3'); 
    $('#uhh2').attr('src', 'http://daokun.webs.com/play'+count+'.ogg'); 
    }; 
}, false); 

然後加入「控制預加載」到音頻標籤

<audio id="aud" autoplay autobuffer controls preload"> 

你應該能夠捕捉到與該事件的「結束」。我不是最精明的HTML5專家，現在只是在討論一下。

無論如何，類似上面的例子會讓你得到你想要的東西，現在你可以捕捉到歌曲的「結尾」;

HTML 5 Audio Loops