时间戳

首页 > 解决方案 > 自动播放下一个 html5

javascript - 自动播放下一个 html5

问题描述

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

我设法让页面中的第二个元素在 Firefox 中播放任何随机元素后自动播放，但就我所知。

我想拥有：

  1. 当前音频元素+1 播放（而不是总是第二个元素）；
  2. 然后播放每个后续元素，直到播放列表的其余部分（在当前元素之后）。

我目前的代码是：

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

标签： javascripthtml5-audio

解决方案

你可以这样做：

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

}

推荐阅读