音频文件的顺序播放使用.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(); 
} 

此代码的工作和停止时，每个音频已打了三次，我猜播放列表，你需要什么。