在 javascript 中实现音频循环答案

【问题标题】：Implement an audio loop in javascript在 javascript 中实现音频循环
【发布时间】：2020-12-29 10:41:41
【问题描述】：

我有一个音频文件的节点列表，我想在按下播放按钮后启动音频循环。除非手动中断，否则音频文件应该一个接一个地播放。这些是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 的第一个子元素开始单独播放每个文件。

【问题讨论】：

audioElement.loop = true; 开启...audioElement.loop = false; 关闭，如果要动态设置，否则使用<audio loop='true' />。

标签： javascript audio

【解决方案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);

【讨论】：