关键是要将音频置于翻页容器外部并统一管理：删除各页面内独立audio标签，仅在顶层容器（如body或.wrap）中保留唯一实例，通过JS绑定用户交互触发play()并捕获Promise错误，确保currentTime持续跟踪且不受DOM切换影响。

手机端上滑翻页时插入音频，关键不是“加个 标签就完事”，而是要解决三个实际问题：音频不能随页面跳转中断、不能因浏览器策略静音或拒绝播放、不能在滑动过程中卡顿或错位触发。直接在每个翻页

里放独立 ，翻到第二页音乐就重播——这不是插入，是干扰。

为什么翻页时音频会中断或重播

每次 DOM 切换（比如用 transform: translateY() 或 scroll-snap 实现的翻页）本身不重置音频；但如果你把 写在每个 .page 内部，滑到新页时旧页可能被 display: none、visibility: hidden 或直接从 DOM 移除，导致其 audio 元素被销毁或暂停。更常见的是：用 JS 控制翻页时，手动调用了 audio.pause() 却没在下一页恢复 currentTime 和播放状态。

• 检查是否每个 .page 都嵌了一个独立 ——这是最典型的“伪插入”，实际是多个实例互相打架
• 确认翻页逻辑有没有监听 scroll 或 touchend 后主动调用 audio.pause()，却漏掉 audio.currentTime = ... 恢复
• 用 Chrome DevTools 的 Elements 面板观察：滑动后，原 元素是否还存在于 DOM 中？如果不见了，说明被 JS 移除了

audio 标签必须放在翻页容器外部

要把背景音乐和翻页逻辑解耦。音频控制权必须脱离单页生命周期，固定在顶层容器（如 或

）里，且只存在一个实例。

• 删掉所有 .page1、.page2 内部的 ，只在
  开头或结尾加一个：

  <audio id="bgm" src="./audio/bgm.mp3" preload="auto"><source src="./audio/bgm.ogg" type="audio/ogg">你的浏览器不支持音频</source></audio>

• 确保该 不受 CSS 动画、opacity 或 z-index 影响——它不需要显示，所以可以加 style="display:none"，但绝不能加 controls（否则会在页面某处突兀弹出控件）
• 用 JS 统一管理：翻页开始前不暂停，翻页结束后也不重播，只靠 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）， 必然重置。这时候硬要用 localStorage 存 currentTime 并在新页读取恢复，会遇到两个坑：


使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审
使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。
下载
• 新页面加载完成前，audio 还没 ready，loadeddata 事件未触发，此时设 currentTime 无效甚至报错
• 用户切后台再切回来、或网络波动导致音频加载延迟，currentTime 同步值可能比实际播放位置快或慢几百毫秒，听感明显跳帧
• 真正可靠的方案是 iframe 套壳：主页面（index.html）只放 和 ，所有翻页都在 iframe 内部完成，主页面音频完全不受影响

滑动翻页本身不复杂，但音频一旦掺进来，核心矛盾就从“怎么动”变成了“怎么稳住声音”。多数人卡在第一步：把音频当页面内容塞进去，而不是当全局服务拎出来管。