Safari for Macデスクトップバージョン：HTML5オーディオの「終了」イベントで問題が発生しない

Question

HTML5オーディオ機能を使用して複数のオーディオファイルを順番に再生したいだけです。各演奏が終了すると、「終了」イベントが発生して次のオーディオをロードします。しかし、デスクトップ版Safari 5.1（Mac版）では、「終了」イベントは最初のプレイの終了時にのみ発生することがわかりました。 2番目のオーディオをロードして再生した後、オーディオ再生が終了しても「終了」イベントが再開されませんでした（「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>