Safari for Mac桌面版:HTML 5音频"已结束"事件不会引发问题

Question

我只想使用HTML5音频功能顺序播放几个音频文件.在每次播放结束时,"结束"事件将触发加载下一个音频.但是在Safari 5.1 for desktop(在Mac上),我发现"结束"事件只在第一次播放结束时才开始.加载并播放第二个音频后,即使音频播放完成(我通过"timeupdate"事件跟踪),"已结束"事件也不会再次触发.即使我手动播放任何其他音频文件,"已结束"事件也不会再次触发.但在Chrome和移动游戏中,这个问题似乎不存在,音频播放器可以连续播放从第一个音频到最后一个音频.这是适用于Mac OS X的Safari 5.1的错误吗？(我没有在Windows中测试它)

目前,我只能使用"timeupdate"事件来检查游戏是否结束.

Answer 1

是的，这是一个烦人的错误。您可以通过更改每个文件的音频元素的 id 来解决此问题。下面是一些示例代码，您可以了解一下：

<div id="audioDiv">
 <audio id="audio0" src="">
  <h1>Your browser does not support the audio tag.</h1>
 </audio>
</div>

<script>
var audioCounter = 0;

function next() {
 audioCounter++;
 document.getElementById('audioDiv').innerHTML = '<audio id="audio' + audioCounter + '" src="file.mp3"></audio>';
 document.getElementById('audio' + audioCounter).addEventListener('ended', next, false);
 document.getElementById('audio' + audioCounter).play();
 }

</script>