关键是要将音频置于翻页容器外部并统一管理：删除各页面内独立audio标签，仅在顶层容器（如body或.wrap）中保留唯一实例，通过JS绑定用户交互触发play()并捕获Promise错误，确保currentTime持续跟踪且不受DOM切换影响。
手机端上滑翻页时插入音频，关键不是“加个 <audio></audio> 标签就完事”，而是要解决三个实际问题：音频不能随页面跳转中断、不能因浏览器策略静音或拒绝播放、不能在滑动过程中卡顿或错位触发。直接在每个翻页 <div class="page"> 里放独立 <code><audio></audio>，翻到第二页音乐就重播——这不是插入，是干扰。
为什么翻页时音频会中断或重播
每次 DOM 切换（比如用 transform: translateY() 或 scroll-snap 实现的翻页）本身不重置音频；但如果你把 <audio></audio> 写在每个 .page 内部，滑到新页时旧页可能被 display: none、visibility: hidden 或直接从 DOM 移除，导致其 audio 元素被销毁或暂停。更常见的是：用 JS 控制翻页时，手动调用了 audio.pause() 却没在下一页恢复 currentTime 和播放状态。
- 检查是否每个
.page都嵌了一个独立<audio src="bgm.mp3"></audio>——这是最典型的“伪插入”，实际是多个实例互相打架 - 确认翻页逻辑有没有监听
scroll或touchend后主动调用audio.pause()，却漏掉audio.currentTime = ...恢复 - 用 Chrome DevTools 的 Elements 面板观察：滑动后，原
<audio></audio>元素是否还存在于 DOM 中？如果不见了，说明被 JS 移除了
audio 标签必须放在翻页容器外部
要把背景音乐和翻页逻辑解耦。音频控制权必须脱离单页生命周期，固定在顶层容器（如 或 <div class="wrap">）里，且只存在一个实例。
<ul><li>删掉所有 <code>.page1、.page2 内部的 <audio></audio>，只在 <div class="wrap"> 开头或结尾加一个：<pre class="brush:php;toolbar:false;"><audio id="bgm" src="./audio/bgm.mp3" preload="auto"><source src="./audio/bgm.ogg" type="audio/ogg">你的浏览器不支持音频</audio></pre>
<li>确保该 <code><audio></audio> 不受 CSS 动画、opacity 或 z-index 影响——它不需要显示，所以可以加 style="display:none"，但绝不能加 controls（否则会在页面某处突兀弹出控件）
play() / pause() 切换状态，currentTime 始终保持JS 控制播放必须绑定用户交互且处理 Promise
即使音频元素已存在，首次调用 audio.play() 仍大概率失败并抛出 DOMException: play() failed because the user didn't interact with the document first。这不是 bug，是 Chrome/Safari/Firefox 的强制策略。
立即学习“前端免费学习笔记（深入）”；
- 首次播放必须由用户真实操作触发（如点击“开始”按钮、触摸屏幕任意位置），不能在
init()或DOMContentLoaded里直接调用play() -
audio.play()返回 Promise，必须用.catch(e => console.warn("autoplay blocked:", e))捕获，否则控制台报错且后续逻辑中断 - 翻页过程中的播放/暂停，建议统一走一个函数：
function toggleBGM() { const audio = document.getElementById('bgm'); if (audio.paused) audio.play().catch(e => console.warn(e)); else audio.pause(); }并在翻页按钮或手势回调中调用它 - iOS Safari 最严格：哪怕你点了按钮，如果之后超过 5 秒才调用
play()，也可能被拒。所以最好在点击后立刻调用，或用audio.muted = true+play()强行解锁，再立刻设回muted = false
多页 HTML 游戏场景下别碰 localStorage 同步 currentTime
如果翻页是跳转到不同 HTML 文件（如 scene1.html → scene2.html），<audio></audio> 必然重置。这时候硬要用 localStorage 存 currentTime 并在新页读取恢复，会遇到两个坑：
- 新页面加载完成前，
audio还没 ready，loadeddata事件未触发，此时设currentTime无效甚至报错 - 用户切后台再切回来、或网络波动导致音频加载延迟，
currentTime同步值可能比实际播放位置快或慢几百毫秒，听感明显跳帧 - 真正可靠的方案是 iframe 套壳：主页面（
index.html）只放<audio></audio>和<iframe src="scene1.html"></iframe>，所有翻页都在 iframe 内部完成，主页面音频完全不受影响
滑动翻页本身不复杂，但音频一旦掺进来，核心矛盾就从“怎么动”变成了“怎么稳住声音”。多数人卡在第一步：把音频当页面内容塞进去，而不是当全局服务拎出来管。
