如何为数组中的每个元素播放声音？

Question

这是我目前所拥有的。它创建一个 1-4 之间的随机数数组。但不是按顺序播放音频。它会立即播放所有 4 种声音。如果我将 audio 变量更改为在每次运行 for 循环时播放一个声音，它只会播放一次声音。

如何为数组中的每个项目播放声音？或者你能告诉我我做错了什么吗？

var level = 5
var myArray = [];

    for (var i = 1; i < level; i++) {
        myArray.push(getRandomInt(1,4));
    }


for (var i = 0; i < myArray.length; i++) {

    var audio = new Audio( 'sounds/' + myArray[i] + '.wav');
    audio.play();
}

**更新**

所以我想出了如何依次播放它们。但我不知道如何根据数组中的数字播放声音。

var level = 5
var myArray = [];

    for (var i = 1; i < level; i++) {
        myArray.push(getRandomInt(1,4));
    }

var audio0 = new Audio( 'sounds/blank.wav');
var audio1 = new Audio( 'sounds/1.wav');
var audio2 = new Audio( 'sounds/2.wav');
var audio3 = new Audio( 'sounds/3.wav');
var audio4 = new Audio( 'sounds/4.wav');

audio0.play();
audio0.addEventListener('ended', function(){ audio1.play();} )
audio1.addEventListener('ended', function(){ audio2.play();} )
audio2.addEventListener('ended', function(){ audio3.play();} )
audio3.addEventListener('ended', function(){ audio4.play();} )

Answer 1

尝试使用 setTimeout 代替 for 循环：

var i     = 0;
var audio = new Audio( 'sounds/' + myArray[i] + '.wav');
var timeout = setTimeout(function() {

    audio.play();
    if( ++i < myArray.length ) {
        // after playing, reset audio and immediately return
        // to prevent the timeout from clearing.
        audio = new Audio( 'sounds/' + myArray[i] + '.wav');        
        return;
    } 

    // clear the timeout when you run out of clips to play.
    clearTimeout(timeout);

   // audio.duration is in seconds, so multiply by 1000 to get the
   // duration in milliseconds
}, audio.duration * 1000);