循环播放音频文件列表 onclcik

Question

我有一个简单的代码，通过单击每个按钮播放音频文件列表。 这很好用，但是每次按下按钮时我都需要一个在列表中循环的按钮。

即单击按钮 = 播放声音 1 - 再次单击播放声音 2 - 再次单击播放声音 3 等。

有人可以就此提出建议吗？

谢谢，

sounds.forEach(sound => {
    const btn = document.createElement('button');
    btn.classList.add('btn');
    btn.innerText = sound;

    btn.addEventListener('click', () => {
        stopPlaying();
        document.getElementById(sound).play();
    })

    document.getElementById('buttons').append(btn);
})


function stopPlaying() {
    sounds.forEach(sound => {
        const audio = document.getElementById(sound);
        audio.pause();
        audio.currentTime = 0;
    })
}```

Answer 1

使用数组。

 var audios = document.querySelectorAll("audio"); var pointer = 0; const btn = document.createElement('button'); btn.classList.add('btn'); btn.innerText = "play next"; btn.addEventListener('click', () => { // stopPlaying(); audios[pointer].play(); pointer += 1; if (pointer >= audios.length) { pointer = 0 } }) document.body.append(btn)

 <audio></audio> <audio></audio>