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

嘿，我来帮你搞定这个音频自动衔接播放的需求！要实现第一个音频播放完成后自动触发第二个，我们可以利用HTML5 Audio API的原生事件来实现，同时还要考虑浏览器的自动播放限制问题，下面是具体的解决方案：

第一步：优化HTML结构 #

首先给第二个音频添加一个ID，方便我们在JavaScript中精准获取它；另外考虑到现代浏览器的自动播放政策限制，先暂时移除autoplay属性（后面会通过用户交互来触发初始播放）：

<!-- 后台背景音乐，保留原ID用于监听播放状态 -->
<audio id="background_audio" src="https://sporedev.ro/pleiade/hol.mp3" type="audio/mpeg"></audio>

<!-- 进入音效，新增ID方便JS调用 -->
<audio id="enter_sound" src="https://sporedev.ro/pleiade/sounds/swoosh-enter.mp3" type="audio/mpeg"></audio>

第二步：编写JavaScript逻辑 #

通过监听第一个音频的ended事件（音频播放完成时触发），来触发第二个音频的播放；同时处理浏览器的自动播放限制，通过用户首次交互启动初始音频：

document.addEventListener('DOMContentLoaded', function() {
  // 获取两个音频元素
  const backgroundAudio = document.getElementById('background_audio');
  const enterSound = document.getElementById('enter_sound');

  // 监听背景音乐播放结束事件，触发音效播放
  backgroundAudio.addEventListener('ended', function() {
    enterSound.play().catch(error => {
      console.error('音效播放失败:', error);
      // 播放失败时给用户提示
      alert('请点击页面以允许音频播放');
    });
  });

  // 处理浏览器自动播放限制：用户首次点击页面时启动背景音乐
  document.body.addEventListener('click', function initAudio() {
    backgroundAudio.play().catch(error => {
      console.error('背景音乐播放失败:', error);
    });
    // 只需要触发一次，所以移除这个点击事件
    document.body.removeEventListener('click', initAudio);
  });
});

关键细节说明 #

• ended事件：这是HTML5 Audio元素的原生事件，当音频播放到末尾时会自动触发，完美适配我们的“播放完成后触发下一个”需求。
• 自动播放限制处理：现代浏览器要求音频/视频播放必须由用户主动交互（点击、触摸等）触发，所以我们添加了页面点击事件来初始化背景音乐，避免直接使用autoplay失效的问题。
• 错误捕获：调用play()方法时添加catch，可以捕获播放失败的情况，给用户友好的提示。

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