Javascript 自动播放下一个html5<；音频>；上一个元素结束时

我是一个javascript新手，已经生成了一页音频元素，并希望它们按顺序自动播放——即在前一个音频元素结束时，让音频元素自动开始播放

在Firefox中播放任意元素后，我设法让页面中的第二个元素自动播放，但我只能做到这一点

我希望：

当前音频元素+1次播放（而不是总是第二个元素）

然后播放每个后续元素，直到播放完列表的其余部分（当前元素之后）

我目前的代码是：

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
          if(audios[i] != e.target){
              audios[i].pause();
          } else { 
            audios[i].addEventListener('ended', function(e){
                audios[(i+1)%len].play();
            })
          };

     }
}, true);

document.addEventListener（'play'，函数（e）{
var audios=document.getElementsByTagName（'audio'）；
对于（var i=0，len=audios.length；i

我尝试将一些代码放入一个可以递归调用的函数中（不幸的是，我删除了代码，因为我卡住了），但基本思想是这样的：

// function playNextAudioElementAndAddEndedListener(audios[n]) {
//    audios[n].play()
//    audios[n].addEventListener('ended', function(e){
//       var n = n+1
//       playNextAudioAndAddEndedListener(audioElement[n])
//    })
//   }


document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
          if(audios[i] != e.target){
              audios[i].pause();
          } else { 
            audios[i].addEventListener('ended', function(e){
                // playNextAudioElementAndAddEndedListener(audios[(i+1)%len])
                })
            })
          };
      }
    }, true);

document.addEventListener('play', function(e){
      var audios = document.getElementsByTagName('audio');
      for(var i = 0, len = audios.length; i < len;i++){
            if(audios[i] != e.target){
                audios[i].pause();
            }
      };
      setup();
    }, true);

    function setup() {
      const audios = document.getElementsByTagName('audio');

      for (let i = 0; i < audios.length; i++) {
          audios[i].addEventListener('ended', () => {
              audios[(i + 1) % audios.length].play();
          });
      }
    }

//函数PlayNextAudioElement和AddEndedListener（音频[n]）{
//音频[n].播放
//音频[n]。addEventListener（'ended'，函数（e）{
//变量n=n+1
//PlayNextAudio和AddEndedListener（音频元素[n]）
//    })
//   }
文档.添加的事件列表器（'play'，函数（e）{
var audios=document.getElementsByTagName（'audio'）；
对于（var i=0，len=audios.length；i

多亏了加布里埃尔·马丁。我已经这样实现了它：

// function playNextAudioElementAndAddEndedListener(audios[n]) {
//    audios[n].play()
//    audios[n].addEventListener('ended', function(e){
//       var n = n+1
//       playNextAudioAndAddEndedListener(audioElement[n])
//    })
//   }


document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
          if(audios[i] != e.target){
              audios[i].pause();
          } else { 
            audios[i].addEventListener('ended', function(e){
                // playNextAudioElementAndAddEndedListener(audios[(i+1)%len])
                })
            })
          };
      }
    }, true);

document.addEventListener('play', function(e){
      var audios = document.getElementsByTagName('audio');
      for(var i = 0, len = audios.length; i < len;i++){
            if(audios[i] != e.target){
                audios[i].pause();
            }
      };
      setup();
    }, true);

    function setup() {
      const audios = document.getElementsByTagName('audio');

      for (let i = 0; i < audios.length; i++) {
          audios[i].addEventListener('ended', () => {
              audios[(i + 1) % audios.length].play();
          });
      }
    }

document.addEventListener（'play'，函数（e）{
var audios=document.getElementsByTagName（'audio'）；
对于（var i=0，len=audios.length；i{
音频[（i+1）%audios.length].play（）；
});
}
}

您可以执行以下操作：

function setup() {
    const audios = document.getElementsByTagName('audio');

    for (let i = 0; i < audios.length; i++) {
        audios[i].addEventListener('ended', () => {
            audios[(i + 1) % audios.length].play();
        });
    }

}

函数设置（）{
const audios=document.getElementsByTagName（'audio'）；
for（设i=0；i{
音频[（i+1）%audios.length].play（）；
});
}
}

您可以执行以下操作：

function setup() {
    const audios = document.getElementsByTagName('audio');

    for (let i = 0; i < audios.length; i++) {
        audios[i].addEventListener('ended', () => {
            audios[(i + 1) % audios.length].play();
        });
    }

}

函数设置（）{
const audios=document.getElementsByTagName（'audio'）；
for（设i=0；i{
音频[（i+1）%audios.length].play（）；
});
}
}

这段代码似乎在事件侦听器中运行。你能提供更多的背景吗？此外，请尝试并更加小心代码缩进，它使阅读和维护变得更加容易。此外，大多数浏览器不允许播放音频，除非是由于用户启动的事件（点击、单击等）。

end

事件不是用户发起的，因此可以解释您的行为。感谢您的回复，我无意中漏掉了第一行和最后一行。我已经修改了。第一个音频播放是用户发起的，我已经设法让它在播放第一个单击的元素时播放第二个（绝对）元素。调用设置函数的更好地方可能是DOM就绪时，因为按照当前方式，每次“播放”时，代码都会向“结束”事件添加新的EventListener事件被触发。这段代码似乎在事件侦听器中运行。你能提供更多的背景吗？此外，请尝试并更加小心代码缩进，它使阅读和维护变得更加容易。此外，大多数浏览器不允许播放音频，除非是由于用户启动的事件（点击、单击等）。

end

事件不是用户发起的，因此可以解释您的行为。感谢您的回复，我无意中漏掉了第一行和最后一行。我已经修改了。第一个音频播放是用户发起的，我已经设法让它在播放第一个单击的元素时播放第二个（绝对）元素。调用设置函数的更好地方可能是DOM就绪时，因为按照当前方式，每次“播放”时，代码都会向“结束”事件添加新的EventListener事件。当所有元素就绪时，只需调用“setup（）；”。当所有元素就绪时，只需调用“setup（）；”。