如何实现两个audio标签的顺序播放？支持静音等待播放

你之前用两个带autoplay属性的<audio>标签会导致音频同时播放，下面提供两种可行的解决方案：

方案一：利用播放结束事件实现队列播放 #

这种方式通过监听第一个音频的ended事件，在它播放完成后再触发第二个音频的播放，是最直观的队列控制方式：

<audio id="audio1" src="sound_1.mp3"></audio>
<audio id="audio2" src="sound_2.mp3"></audio>

<script>
const audio1 = document.getElementById('audio1');
const audio2 = document.getElementById('audio2');

// 启动第一个音频播放
audio1.play();

// 监听第一个音频播放结束事件，触发第二个音频播放
audio1.addEventListener('ended', () => {
  audio2.play();
});
</script>

方案二：先静音第二个音频，播放完成后解除静音 #

如果希望第二个音频提前加载以减少衔接延迟，可以让它先静音播放，等第一个音频结束后再取消静音：

<audio id="audio1" src="sound_1.mp3"></audio>
<audio id="audio2" src="sound_2.mp3" muted></audio>

<script>
const audio1 = document.getElementById('audio1');
const audio2 = document.getElementById('audio2');

// 同时启动两个音频，但第二个保持静音状态
audio1.play();
audio2.play();

// 第一个音频播放结束后，解除第二个的静音
audio1.addEventListener('ended', () => {
  audio2.muted = false;
});
</script>

注意：浏览器对自动播放有严格限制，这些代码需要在用户交互（比如点击按钮）触发的回调中执行，否则可能被浏览器阻止播放。

内容的提问来源于stack exchange，提问作者adam_Barfi