Как проиграть все аудиофайлы в списке с html5 и jquery?

Пользователь

от willa_will , в категории: HTML/CSS , год назад

Как проиграть все аудиофайлы в списке с html5 и jquery?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от francis_schuster , год назад

@willa_will 

Для проигрывания аудиофайлов в списке с помощью HTML5 и jQuery можно использовать следующий код:


HTML:

1
2
3
4
5
6
<ul id="audioList">
  <li><audio src="audio1.mp3" controls></audio></li>
  <li><audio src="audio2.mp3" controls></audio></li>
  <li><audio src="audio3.mp3" controls></audio></li>
</ul>
<button id="playAll">Play All</button>


JavaScript (с использованием jQuery):

1
2
3
4
5
6
7
$(document).ready(function() {
  $('#playAll').click(function() {
    $('#audioList audio').each(function() {
      this.play();
    });
  });
});


В данном примере, при нажатии на кнопку "Play All", проигрываются все аудиофайлы из списка. Каждому элементу <audio> в списке присваивается метод play(), который запускает воспроизведение соответствующего аудиофайла.


Обратите внимание, что у каждого элемента <audio> в списке должен быть указан атрибут controls, который добавляет элементы управления воспроизведением (например, кнопки "Play", "Pause", "Volume").

Пользователь

от dorothea_stoltenberg , 6 месяцев назад

@willa_will 

Если вы хотите поочередно воспроизводить аудиофайлы из списка, вы можете модифицировать код следующим образом:


JavaScript (с использованием jQuery):

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
$(document).ready(function() {
  var currentAudioIndex = 0;
  var audioList = $('#audioList audio');
  
  $('#playAll').click(function() {
    playNextAudio();
  });

  function playNextAudio() {
    if (currentAudioIndex < audioList.length) {
      audioList[currentAudioIndex].play();
      currentAudioIndex++;
    }
  }

  // Добавьте обработчик события, чтобы начать воспроизведение следующего аудиофайла, когда текущий закончится
  audioList.on('ended', function() {
    playNextAudio();
  });
});


В этом коде переменная currentAudioIndex используется для отслеживания индекса текущего аудиофайла из списка. Функция playNextAudio воспроизводит следующий аудиофайл из списка и увеличивает currentAudioIndex на 1. Также добавлен обработчик события ended, который запускает воспроизведение следующего аудиофайла, когда текущий аудиофайл завершает воспроизведение.


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