音頻文件的順序播放使用.addEventListener結束

Question

以下代碼旨在播放序列中的一系列短音頻文件，保存在名爲audio_sequence的javascript數組中。

和.addEventListener('ended',function())用於觸發序列中每個音頻剪輯的回放。

這對數組中的前5個項目按預期工作，依次播放，但隨後音頻元素開始同時播放，並且序列變得混亂。

我嘗試了幾種不同的方法都產生類似的結果。 非常感謝任何見解。

和示例代碼運行的可以在這裏找到： Play Sequence

這裏的JavaScript：

<script type="text/javascript"> 

var game_sounds = ["rooms", "bars", "food", "inveraray", "arse"]; 
var game_sequence = [0,1,2,3,4,0,1,2,3,4,0,1,2,3,4];  
var sequence_position = 0; 

function play_next(){ 
    if (sequence_position < game_sequence.length){ 
     var audioElement = document.getElementById(game_sounds[game_sequence[sequence_position]]);              
     audioElement.addEventListener('ended', function(){ 
      sequence_position++; 
      play_next(); 
     }, true); 
     audioElement.play(); 
    } 
} 

function playSequence(){ 
    sequence_position = 0; 
    var audioElement = document.getElementById(game_sounds[game_sequence[sequence_position]]); 
// alert(game_sounds[game_sequence[sequence_position]]); 
    audioElement.addEventListener('ended', function(){ 
     sequence_position++; 
     play_next(); 
    },true); 
    audioElement.play(); 
} 

</script> 

&的HTML如下：

<a onClick="javascript:playSequence();" href="#"><h2>Play Sequence</h2></a> 

<audio hidden id="rooms" preload="auto"> 
    <source src="/audio/rooms.mp3"> 
</audio> 
<audio hidden id="food" preload="auto"> 
    <source src="/audio/food.mp3" > 
</audio> 
<audio hidden id="bars" preload="auto"> 
    <source src="/audio/bars.mp3"> 
</audio> 
<audio hidden id="inveraray" preload="auto"> 
    <source src="/audio/inveraray.mp3"> 
</audio> 
<audio hidden id="arse" preload="auto"> 
    <source src="/audio/arse.mp3"> 
</audio> 

Answer 1

是什麼原因造成的問題在於您將多個相同的事件偵聽器連接到每個元素，因爲它們在循環中。在非特別優雅，但有效的解決方法，你可以再次安裝前刪除監聽器：

var game_sounds = ["rooms", "bars", "food", "inveraray", "arse"]; 
var game_sequence = [0,1,2,3,4,0,1,2,3,4,0,1,2,3,4];  
var sequence_position = 0; 

function play_next(){ 
    if (sequence_position < game_sequence.length){ 
     playSequence(); 
    } 
} 

function playSequence(){ 
    var audioElement = document.getElementById(game_sounds[game_sequence[sequence_position]]); 
// alert(game_sounds[game_sequence[sequence_position]]); 
    audioElement.removeEventListener('ended', prepareNextAudio); 
    audioElement.addEventListener('ended', prepareNextAudio, true); 
    audioElement.play(); 
} 

function prepareNextAudio() { 
    sequence_position++; 
    play_next(); 
} 

此代碼的工作和停止時，每個音頻已打了三次，我猜播放列表，你需要什麼。