如何為數組中的每個元素播放聲音？

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);