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

Posted 2023-02-25

【中文标题】按顺序播放多个音频文件（Javascript）

【英文标题】：Play multiple audio files in sequence (Javascript)

【发布时间】：2019-09-24 16:49:02

【问题描述】：

有人可以解释这种行为吗？我有一个按钮，当它被点击时，我需要依次播放 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 才会继续触发。我知道这很愚蠢，但我花了太多时间试图弄清楚。

【参考方案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();

【讨论】：

那行不通。我认为是因为 onended 是异步执行的。我不认为 for 循环是个好主意。

但是你让我更好地理解了 onended 的工作原理......这个工作原理： conj[0].play(); conj[0].onended = function() conj[1].play();; conj[1].onended = function() conj[2].play();; conj[2].onended = function() conj[3].play();; conj[3].onended = function() conj[4].play();; conj[4].onended = function() conj[5].play();;我只需要找到一种使用更少代码的方法

对不起，我不够清楚。上面的循环只是为 onended 设置事件处理程序。我将进行编辑以显示完整代码的样子。