如何控制HTML5 Audio播放？基于翻页书onpageshow/onpagehide事件

当然可以！onpageshow和onpagehide正是处理这种页面切换场景的理想事件，完全能实现你要的“显示页面时播放音频，离开时停止”的效果。下面是具体的实现方案：

核心思路 #

给每个翻页容器绑定onpageshow和onpagehide事件，在事件触发时分别控制当前页面内的音频播放/停止。同时要注意处理现代浏览器的自动播放限制，避免播放失败。

具体代码实现 #

首先修改你的页面结构，给每个翻页容器添加事件属性，并给内部音频统一类名方便查找：

<!-- 示例：第一页 -->
<div class="flip-book-page" onpageshow="playPageAudio(this)" onpagehide="stopPageAudio(this)">
  <!-- 页面内容 -->
  <audio class="page-audio" src="page1-sound.mp3" preload="auto"></audio>
</div>

<!-- 示例：第二页 -->
<div class="flip-book-page" onpageshow="playPageAudio(this)" onpagehide="stopPageAudio(this)">
  <!-- 页面内容 -->
  <audio class="page-audio" src="page2-sound.mp3" preload="auto"></audio>
</div>

然后添加对应的JavaScript处理函数：

function playPageAudio(pageElement) {
  // 获取当前页面内的音频元素
  const currentAudio = pageElement.querySelector('.page-audio');
  if (!currentAudio) return;

  // 先停止其他所有页面的音频（防止切换时多个音频同时播放）
  document.querySelectorAll('.page-audio').forEach(audio => {
    if (audio !== currentAudio) {
      audio.pause();
      audio.currentTime = 0; // 重置播放位置
    }
  });

  // 播放当前页面音频，处理可能的自动播放限制
  currentAudio.play().catch(error => {
    console.warn('音频自动播放失败（浏览器限制）:', error);
    // 可选：提示用户点击页面后再操作，比如添加一个提示元素
    // alert('请先点击页面任意位置，再进行翻页操作');
  });
}

function stopPageAudio(pageElement) {
  const audio = pageElement.querySelector('.page-audio');
  if (audio) {
    audio.pause();
    audio.currentTime = 0; // 重置到开头，下次播放更自然
  }
}

关键注意事项 #

• 自动播放限制：现代浏览器要求音频播放必须由用户交互触发（比如点击、触摸）。如果你的翻页书加载后直接触发onpageshow，可能会播放失败。解决办法是让用户先点击页面任意位置，或者在翻页按钮的点击事件中先触发一次用户交互标记。
• 事件兼容性：如果你的翻页书是自定义的JS组件，需要确保组件会正确触发onpageshow和onpagehide事件。如果组件本身没有实现这两个事件，你可以在翻页的回调函数中手动调用playPageAudio和stopPageAudio函数。
• 音频预加载：给音频设置preload="auto"可以让浏览器提前加载音频资源，切换页面时播放更流畅。

这样修改后，用户切换到某一页时，该页的音频会自动播放（满足浏览器交互要求的情况下），离开页面时音频会立即停止并重置，不会出现所有音频同时播放的问题了。

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