按顺序播放多个音频文件（Javascript）

Question

有人可以解释这种行为吗？我有一个按钮，当它被点击时，我需要依次播放 6 个 mp3 文件。我正在使用 onended 事件处理程序：

var index;
playButton.onclick=function(){
  index = 0;
  conj[0].play();
  conj[index].onended = function() {
    if(index < conj.length){
      index++;
      conj[index].play();
    }
  };
}

使用代码中的 index++ 行，我试图增加 index 以便它在当前音频文件完成播放后播放数组 conj 中的下一个音频文件，等等，直到它播放第 6 个也是最后一个音频文件数组。但是 onended 只触发一次。换句话说， conj[0] 播放，然后 onended 被解雇，然后 conj[1] 播放，就是这样。 onended 不会再次触发。 现在当我注释掉“index++;”行，第一个 mp3 conj[0] 被播放，并且 onended 不断触发，所以 conj][0] 只是循环播放。 换句话说，只有在我不更改索引值的情况下，onended 才会继续触发。我知道这很愚蠢，但我花了太多时间试图弄清楚。

Answer 1

您只处理了第一个音频的“onended”事件。 当这条线被调用时。 conj[index].onended = function() 指数为 0。 你需要做的是有一个循环来做这样的事情

for (var idx = 0; idx < conj.length - 1 ; idx++) {
conj[idx].onended = function() {
      conj[idx+1].play();
  };
}

每个音频（除了最后一个）的供应和处理程序“一旦我完成播放就会触发下一个要播放的音频”。

完整示例

var index;
playButton.onclick=function(){
  // sets up each audio file's onended event to play the next audio file
  for (var idx = 0; idx < conj.length - 1 ; idx++) {
    conj[idx].onended = function() {
      conj[idx+1].play();
    };
  }
  // start playing the first audio.
  conj[0].play();
}