javascript - 使用 .addEventListener 结束音频文件的顺序播放重叠

Question

以下代码旨在按顺序播放一系列短音频文件，这些文件保存在名为 audio_sequence 的 JavaScript 数组中。

.addEventListener('ending',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();
}

此代码可以工作，并在每个音频播放三次时停止播放列表，我猜这就是您所需要的。