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