Javascript，在循环中播放声音

Question

我需要按顺序播放一系列声音。在我目前的代码中，声音几乎是一次播放，而不是按顺序播放。我已经尝试了各种setTimeout()， setInterval()组合，但由于声音是不同的长度，我还没有能够使这个工作。我是否可以设置一个条件标记来确保声音不重叠?sleep()函数是唯一的答案吗?

function playAll()
{
for (i = 0; i < 10; i++) {
playSound(sound[i]);
// if sound is finished, continue loop
// need some type of flag?

}
}

Answer 1

HTMLAudioElements在元素停止播放时触发一个ended事件。如果您承诺playSound，以便在元素上的下一个stop事件触发时返回Promise，您可以在循环内await调用:

const playSound = soundElement => {
soundElement.play();
return new Promise((resolve) => {
soundElement.addEventListener('ended', resolve)
})
}
function playAll() {
for (let i = 0; i < 10; i++) { // don't forget to declare the variable with `let`
await playSound(sound[i]);
}
}