Question

在此问题Use of reference to calling object (this) using HTML5 audio and jQuery的帮助下。

编辑它我得到了我想要的播放列表，它在Crome和Safari上完美运行但在其他浏览器中根本不能播放，因为并非所有浏览器都支持MP3文件。（测试IE和Firefox;音频没有播放，用我的iPod测试Safari没有问题）但是，当它支持MP3时，IE不会播放音频，这很奇怪。

jsFiddle

这就是我编辑上面链接的问题。我整合了jQuery，为按钮提供了不同的风格，使其看起来更像是YouTube播放/暂停按钮。

更好的例子：Playlist

我尝试使用jQuery来改变音频中的src链接，就像这样

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');
};

将<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，但在歌曲更改后，它不会更改src代码的<source>。

我还尝试编辑下一个函数：

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';
};

并添加变量：

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';
 };

为两个<source> s（uhh和uhh2）分配ID，但没有。

我注意到通过Chrome检查源代码，两个<source> DOES上的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);

然后将'controls preload'添加到音频标签

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

你应该能够用它捕捉事件的“结束”。我还不是最精明的HTML5专家，现在才开始涉足。

无论如何，类似上面的例子会让你得到你想要的东西，你可以捕捉到歌曲的“结束”;我从这个例子中得到了这个例子：

HTML 5 Audio Loops

HTML5 crossbrowser播放列表

1 个答案: