如何实现第一段音频播放完成后自动触发第二段音频播放？

我来帮你搞定这个需求！要让那段“嗖”的音效等背景音频播放完成后再播放，核心就是利用音频元素的ended事件来触发后续操作，下面是完整的实现代码和详细说明：

完整代码实现 #

<!-- 背景音频：移除autoplay，由JS控制播放时机 -->
<audio id="background_audio">
  <source src="https://sporedev.ro/pleiade/hol.mp3" type="audio/mpeg">
</audio>

<!-- 进入音效音频：添加id方便JS控制，同样移除autoplay -->
<audio id="enter_sound">
  <source src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg">
</audio>

<script>
// 获取两个音频元素的DOM节点
const backgroundAudio = document.getElementById('background_audio');
const enterSound = document.getElementById('enter_sound');

// 启动背景音频播放
backgroundAudio.play();

// 监听背景音频的播放结束事件
backgroundAudio.addEventListener('ended', () => {
  // 背景音播放完毕后，触发进入音效的播放
  enterSound.play();
});

// 可选：处理浏览器自动播放限制（很多浏览器禁止无交互自动播放）
document.addEventListener('click', () => {
  // 如果背景音还没播放，就启动它
  if (backgroundAudio.paused) {
    backgroundAudio.play();
  }
});
</script>

关键步骤说明 #

• 给音频元素加标识：我给第二段音效音频添加了id="enter_sound"，这样JS能精准定位到它；同时移除了两个音频的autoplay属性，避免页面加载时就自动播放音效，把控制权交给JS。
• 监听播放结束事件：核心逻辑是给背景音频绑定ended事件监听器——这个事件会在音频完全播放完毕时自动触发，一旦触发就调用enterSound.play()来播放那段“嗖”的音效。
• 处理浏览器限制：现在大部分浏览器都有自动播放限制（要求用户有页面交互后才能播放音频），所以加了一个页面点击事件的监听，用户点击页面后才会启动背景音，避免被浏览器拦截。

额外提示 #

如果你的背景音频是循环播放的（比如设置了loop属性），那ended事件永远不会触发，这时候你需要调整逻辑——比如只在第一次播放结束后触发音效，或者根据你的需求修改触发条件。

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