遍历 HTML5 音频文件

Question

我的目标是遍历一个数组，取数组每个元素的值作为key 并播放与该值关联的声音剪辑。期望的最终结果是依次 按照数组中键的顺序播放声音片段。

这是我迄今为止尝试过的：

//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

我的理解是音频文件相互干扰并产生 错误，但另外在通过允许的序列的迭代中没有延迟 每个文件完成。我看了these examples 推迟媒体执行的其他努力 但致电$sound.ended 或$sound.onended 都无法阻止 在音频文件完成之前迭代。该项目将增加数组的长度和顺序，所以我需要 某种方式来控制数组中每个成员的执行。

任何人都可以提供任何建议吗？谢谢你。

Answer 1

setTimeout 不会延迟循环。该循环使每个音频文件仅延迟一秒钟。解决方案是将循环放入一个函数中，如下所示：

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