Блог

Главная - Вопросы по программированию - Реализовать звуковой цикл в javascript

Реализовать звуковой цикл в javascript

#javascript #audio

#javascript #Аудио

Вопрос:

У меня есть список узлов аудиофайлов, и я хотел бы инициировать звуковой цикл после нажатия кнопки воспроизведения. Аудиофайлы должны воспроизводиться один за другим, если их не прерывать вручную. Это аудиофайл в html

 <div class="audio-tracks">
    <audio data-key="65" src="My_Tracks/Beat for Greg.mp3"></audio>
    <audio id="Beat For Greg" class="tracks" src="My_Tracks/Beat for Greg.mp3"></audio>

    <audio data-key="83" src="My_Tracks/The Sound Of Africa.mp3"></audio>
    <audio id="The Sound Of Africa" class="tracks" src="My_Tracks/The Sound Of Africa.mp3"></audio>

    <audio data-key="68" src="My_Tracks/Hip hop reagea.mp3"></audio>
    <audio id="Hip Hop Regea" class="tracks" src="My_Tracks/Hip hop reagea.mp3"></audio>

    <audio data-key="70" src="My_Tracks/dancehall 2.mp3"></audio>
    <audio id="Dancehall Track" class="tracks" src="My_Tracks/dancehall 2.mp3"></audio>

    <audio data-key="71" src="My_Tracks/dancehall5.mp3"></audio>
    <audio id="Another Dancehall Track" class="tracks" src="My_Tracks/dancehall5.mp3"></audio>

    <audio data-key="72" src="My_Tracks/Angels sing.wav"></audio>
    <audio id="Angels sing" class="tracks" src="My_Tracks/Angels sing.wav"></audio>

    <audio data-key="74" src="My_Tracks/Dreams of peace 2.wav"></audio>
    <audio id="Dreams Of Peace" class="tracks" src="My_Tracks/Dreams of peace 2.wav"></audio>

    <audio data-key="75" src="My_Tracks/Yours faithfully.wav"></audio>
    <audio id="Yours Faithfully" class="tracks" src="My_Tracks/Yours faithfully.wav"></audio>

    <audio data-key="76" src="My_Tracks/Hard.mp3"></audio>
    <audio id="Hard" class="tracks" src="My_Tracks/Hard.mp3"></audio>

    <audio data-key="90" src="My_Tracks/Gotta be good.mp3"></audio>
    <audio id="Gotta Be Good" class="tracks" src="My_Tracks/Gotta be good.mp3"></audio>

    <audio data-key="76" src="My_Tracks/In my dreams.mp3"></audio>
    <audio id="In My Dreams" class="tracks" src="My_Tracks/In my dreams.mp3"></audio>

    <audio data-key="90" src="My_Tracks/A Bigger Crowd.wav"></audio>
    <audio id="A Bigger Crowd" class="tracks" src="My_Tracks/A Bigger Crowd.wav"></audio>
  </div>

Это js-файл, который я написал, чтобы попытаться реализовать это

 function globalPlaySound (){
    const audio = document.querySelectorAll('.tracks');
    for (let i = 0; i < audio.length; i  ) {
        audio[i].play();
    }
}

Когда я запускаю этот код, он воспроизводит ВСЕ аудиофайлы одновременно. Я хочу, чтобы каждый файл воспроизводился индивидуально, начиная с первого дочернего элемента div аудиодорожек.

Комментарии:

1. audioElement.loop = true; включено… audioElement.loop = false; отключено, если вы хотите установить динамически, в противном случае просто используйте <audio loop='true' /> .

Ответ №1:

Вы можете попробовать получить информацию об аудиофайле и получить его продолжительность, затем между циклами вы можете добавить задержку на основе длительности звука. Вы можете проверить, как получить длительность звука, используя HTML File API. https://lostechies.com/derickbailey/2013/09/23/getting-audio-file-information-with-htmls-file-api-and-audio-element/

Ответ №2:

Вот фрагмент кода, который я нашел в Интернете и который работает для меня.

 const playList = document.querySelectorAll('.tracks');

    let playlist = Array.from(playList);
    
    function playNextSounds (playlist){
        if(playlist.length > 0){
            const audio = new Audio();
            audio.src = playlist[0].src;
            audio.currentTime = 0;
            audio.play();
            playlist.shift();
            audio.addEventListener('ended', function(){
            playNextSounds(playlist);
            })
        }
    }

    playNextSounds(playlist);