適用於Mac桌面版的Safari：HTML 5音頻「結束」事件不會觸發問題

Question

我只是想使用HTML5音頻功能順序播放多個音頻文件。每次播放結束時，「結束」事件觸發以加載下一個音頻。但在Safari 5.1桌面版（Mac版）中，我發現「結束」事件僅在第一次播放結束時被解僱。加載並播放第二個音頻後，即使音頻播放完成（我通過「timeupdate」事件跟蹤了此事件），「結束」事件也不會再次觸發。即使我手動播放任何其他音頻文件，「結束」事件也不會再次觸發。但在Chrome和移動Safari中，這個問題似乎並不存在，音頻播放器可以連續播放第一個音頻到最後一個音頻。這是Mac OS X的Safari 5.1的bug嗎？ （我沒有在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>