单击时循环播放音频文件列表

Question

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

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

const sounds = ['sound1', 'sound2', 'sound3', 'sound4', 'sound5', 'sound6'];
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();
console.log("playing " + audios[pointer].getAttribute("src"))

pointer += 1;
if (pointer >= audios.length) {
pointer = 0
}
})
document.body.append(btn)

<audio src="song1.mp3"></audio>
<audio src="song2.mp3"></audio>