如何实现HTML5页面中多音频的自动续播及单播控制？

嘿，这个需求用JavaScript就能完美实现，我把两个逻辑拆解开，再给你整合好完整的代码，一看就懂：

咱们先给每个<audio>元素加上唯一的id，这样JS能精准定位到它们。然后给第一个音频绑定ended事件——这个事件会在音频播放结束时触发，触发后直接调用第二个音频的play()方法就行。

这个逻辑也简单：先获取页面上所有的<audio>元素，然后给每个音频绑定play事件。当某个音频开始播放时，遍历所有其他音频，把正在播放的给暂停掉。

下面是把两个逻辑结合起来的完整代码，直接替换你原来的表格内容就行：

<table>
  <tr>
    <td>
      <audio id="audio1" controls>
        <source src="file1.flac" type="audio/flac">
      </audio>
    </td>
  </tr>
  <tr>
    <td>
      <audio id="audio2" controls>
        <source src="file2.flac" type="audio/flac">
      </audio>
    </td>
  </tr>
</table>

<script>
// 获取所有音频元素
const allAudios = document.querySelectorAll('audio');
// 获取两个单独的音频元素
const audio1 = document.getElementById('audio1');
const audio2 = document.getElementById('audio2');

// 逻辑1：audio1播放完自动播放audio2
audio1.addEventListener('ended', () => {
  audio2.play().catch(err => {
    console.log('自动播放失败：', err);
    // 这里可以加个页面提示，比如"请手动点击播放"，因为浏览器可能限制无交互的自动播放
  });
});

// 逻辑2：同一时间仅播放一个音频
allAudios.forEach(audio => {
  audio.addEventListener('play', () => {
    allAudios.forEach(otherAudio => {
      if (otherAudio !== audio && !otherAudio.paused) {
        otherAudio.pause();
      }
    });
  });
});
</script>

• 注意浏览器的自动播放策略：现在大部分浏览器会禁止无用户交互的自动播放，所以如果audio1是用户手动播放的，播完后自动播audio2一般没问题；但如果想页面加载就自动播，大概率会失败，这时候可以在catch里加个提示让用户手动触发。
• 如果后续要加更多音频，只需要给新的audio加id，然后在自动续播的逻辑里链式绑定就行（比如audio2的ended事件触发audio3.play()），而单音频逻辑不需要修改，因为querySelectorAll会自动获取所有audio元素。

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