HTML5オーディオファイルを反復する

Question

私の目標は、配列を反復処理し、配列の各要素の値をキー として取得し、その値に関連付けられたサウンドクリップを再生することです。最終的な結果は、配列内のキーの順番でサウンドクリップを連続して再生することです。このコードが反復シーケンスを

//there are addresses associated with the color sound values 

function playSound(soundValue){ 
    $sound.src = soundValue; 
    $sound.load(); 
    $sound.play(); 
} 

function playGame(){ 
    simonSays = [0,1,2,3]; 

    var soundOptions = { 
    0: yellowSound, 
    1: redSound, 
    2: blueSound, 
    3: greenSound 
    }; 

    for (var i = 0; i < simonSays.length; i++){ 
    var callSound = soundOptions[simonSays[i]]; 
    setTimeout(playSound(callSound),1000); 
    } 
}; 

と フィニッシュへsetTimeout期間を待たない：ここで

は、私がこれまで試してみましたものです。私は、このエラーが表示されます。

Uncaught (in promise) DOMException: The play() request was interrupted by a new load request. 
    playSound @ logic.js:72 
    playGame @ logic.js:120 
    onclick @ index.html:37 

私の理解では、オーディオファイルが互いにinterferringと エラーを生成していることであるが、さらに 各ファイルが完了することができますシーケンスによる反復における遅延はありません。私は$sound.endedまたは$sound.onendedへのメディアの実行 どちらもコールを遅延させるための他の努力の が先にオーディオファイル完了の 繰り返しを防ぐことができましたthese examplesを見ました。このプロジェクトは配列の長さと順序を増やすので、配列の各メンバーの実行を制御するための方法が 必要です。

誰でもアドバイスをいただけますか？ありがとうございました。

Answer 1

setTimeoutはループを遅延させません。このループにより、すべてのオーディオファイルが1秒間だけ遅延します。その解決方法は次のような関数にループを入れることです：

simonSays = [0,1,2,3]; 

var soundOptions = { 
    0: yellowSound, 
    1: redSound, 
    2: blueSound, 
    3: greenSound 
}; 

function playGame(){ 
    startPlaying(0,simonSays.length); 
}; 

function startPlaying(i,l) { 
    if (i==l) return; 
    var callSound = soundOptions[simonSays[i]]; 
    playSound(callSound); 
    setTimeout("startPlaying("+(i+1)+","+l+")",1000);  
}