1

Есть список формируемых элементов 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. Пожскажите как его можно улучшить, что бы по окончанию воспроизведения одного, воспроизводился следующий?

2
  • Уже столько раз освещался такой вопрос, (не только на этом сайте) но что мешает использовать на странице только один элемент аудио, а для перехода на другой трек только менять его src? При одном элементе накладка просто невозможна.
    – Опан
    29 ноя 2018 в 13:27
  • @Олег, опыт, все дело в нем. даже иногда нужен опыт что бы найти нужную информацию. 3 дек 2018 в 9:27

1 ответ 1

2

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.