Управление воспроизведением id тега HTML5 <audio>

147

17 мая 2019, 13:00

Есть список формируемых элементов audio с уникальным id:

<audio class="song" preload="auto" id="id-92" controls="controls">
     <source src="../uploads/f2e49d34edc7fd037d2930f8d86552d5.mp3">
</audio>
<audio class="song" preload="auto" id="id-93" controls="controls">
     <source src="../uploads/f2e49d34edc7fd037d2930f8d86552d5.mp3">
</audio>

Я нашел следующий код на stackoverflow.com javascript:

$(function(){
$('audio').on('play', function() {
    $('audio').not(this).each(function(index, audio) {
        audio.pause();
    });
});

Он позволяет останавливать текущий воспроизведенный элемент audio, если начинается воспроизведение другого элемента audio. Пожскажите как его можно улучшить, что бы по окончанию воспроизведения одного, воспроизводился следующий?

Answer 1

let songs=[]; 
document.querySelectorAll('audio').forEach(audio =>{ 
  songs.push(audio.id); 
  audio.addEventListener('play', function(e){ 
  document.querySelectorAll('audio').forEach(elem =>{ 
    if (elem.id != e.target.id){ 
      elem.pause(); 
    } 
  }) 
  }) 
audio.addEventListener('ended', function(e){ 
  let next = songs.indexOf(e.target.id) + 1; 
  songs[next] === undefined ? next = 0 : songs[next] 
  let nextSongs = document.getElementById(songs[next]); 
  nextSongs.play(); 
}) 
})

<audio class="song" preload="auto" id="id-92" controls="controls"> 
     <source src="https://html5book.ru/examples/media/track.mp3"> 
</audio> 
<audio class="song active" preload="auto" id="id-93" controls="controls"> 
     <source src="https://html5book.ru/examples/media/track.mp3"> 
</audio> 
<audio class="song" preload="auto" id="id-94" controls="controls"> 
     <source src="https://html5book.ru/examples/media/track.mp3"> 
</audio>