Последовательное непрерывное воспроизведение аудио на странице с несколькими плеерами

#javascript #html5 #web_audio

Есть страница, на ней плееры (Flash) из сервиса Uppod, но не во всех браузерах они
проявляются, а главное их не видно в мобильных устройствах.
Решил заменить их на HTML5 audio, но не могу найти решение непрерывного, последовательного
воспроизведения, когда после завершения проигрывания одного плеера начинает звучать
следующий, к примеру, или тут.
Есть варианты плееров с плейлистами, но мне хотелось бы несколько плееров на странице,
между которыми будет текст. 



var audio = document.getElementsByTagName("audio");
for (let i = 0; i < audio.length; i++) {
  audio[i].addEventListener('ended', function() {
    if (audio[i].duration === audio[i].currentTime) {
      audio[i + 1].play();
    }
  });
}
 
 


 
 




    

Ответы

Ответ 1

Чтобы проигрывались несколько плееров подряд, за это отвечает событие ended.
Надо его отследить и все. Мне кажется данная конструкция на столько проста, что и
пояснять тут нечего



var audio = document.getElementsByTagName("audio");
for (let i = 0; i < audio.length; i++) {
  audio[i].addEventListener('ended', function() {
    if (audio[i].duration === audio[i].currentTime) {
      audio[i + 1].play();
    }
  });
}





Ответ 2

Думаю нужно поработать с events. То есть запустить проигрывание на первом плеере,
затем когда произойдет событие  'ended' запускай второй плеер , и так далее. Например:



document.addEventListener("DOMContentLoaded", () => {
  let allAudio = Array.from(document.getElementsByTagName('audio'));
  allAudio[0].play();
  allAudio.forEach((item, index) => {
    item.addEventListener('ended', (ev) => {
      if (index === allAudio.length - 1) {
        index = 0
      } else {
        index++;
      }
      allAudio[index].play();
    })
  });
});







Пускай не самый лучший код, но думаю концепция понятна.
Для первоначального запуска первого плеера можно использовать уже, что душе угодно.
Ниже ссылка на видео , аудио события:

https://developer.mozilla.org/ru/docs/Web/Guide/Events/Media_events