上一个元素结束时自动播放下一个 html5 <audio>

Question

我是 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);

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

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

多亏了 Gabriel Martin，它才能正常工作。我是这样实现的：

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

Answer 1

你可以这样做：

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

}

上一个元素结束时自动播放下一个 html5 <audio>

Autoplaying next html5 <audio> when previous element ends

javascript

html5-audio