真正可靠的跨页音频连续性只存在于单页应用（SPA）或 iframe 架构中；多 HTML 文件因文档上下文隔离，无法天然保持 audio 状态，localStorage 同步易失败，autoplay+muted 是中断最小化唯一可行方案。
多页面 HTML 游戏或分支叙事网站中，audio 标签无法跨页面“记住”播放位置——每次跳转到新 HTML 文件，旧 audio 元素就被销毁，currentTime、paused 状态全丢。靠 localStorage 存时间点再手动恢复？行不通：iOS Safari 会在页面卸载前冻结 JS，beforeunload 里写入常失败；Chrome 94+ 对后台页面的定时器和事件监听也大幅限频，导致同步延迟或丢失。
为什么不能只用 localStorage + play() 恢复播放
表面看，存 localStorage.setItem('bgmTime', audio.currentTime) 再在新页读取并 audio.currentTime = ... 很合理。但实际会卡在三处：
- 页面跳转瞬间，旧页 JS 执行被中断，
localStorage可能根本没写入成功（尤其 Safari） - 新页加载后，
audio元素尚未loadedmetadata，直接设currentTime会静默失败，且不抛错 - 即使设成功，调用
play()仍需用户交互授权（未muted时），否则 Promise reject，控制台报DOMException: The user gesture requirement is not met
iframe 嵌套是唯一可靠方案
把所有游戏页面（scene1.html、scene2.html…）放进一个主页面的 iframe 里，背景音乐 audio 元素放在主页面 DOM 中——这样页面切换只刷新 iframe 内容，主页面及其 audio 实例全程存活，播放状态天然连续。
-
iframe的src改为指向游戏子页面，例如<iframe src="scene1.html" id="gameFrame"></iframe> - 主页面中独立放
<audio id="bgm" src="music.mp3" loop></audio>，不加autoplay，首次由用户点击按钮触发play() - 子页面内链接全部用
parent.document.getElementById('gameFrame').src = 'scene2.html'切换，避免整页跳转 - 如需从子页面控制音乐（如暂停/音量），通过
parent.document.getElementById('bgm')访问，注意同源限制
如果必须用多 HTML 页面（无 iframe 权限）
只能接受“中断但最小化感知”，而非真正续播。关键不是存时间点，而是降低重载冲击：
立即学习“前端免费学习笔记（深入）”；
- 音频文件必须
muted+autoplay，确保首屏立即静音播放（<audio autoplay muted loop src="bgm.mp3"></audio>） - 所有页面使用完全相同的
src路径和文件名，让浏览器复用 HTTP 缓存，减少加载延迟 - 禁用
preload="none"，改用preload="metadata"，至少提前拿到时长和可播放信号 - 放弃“续播”幻想，改为统一设计：每页加载完成时，用
audio.play().catch(() => {})尝试播放，失败就忽略——用户听不出是否中断，只觉得音乐“一直有”
真正可靠的跨页音频连续性，只存在于单页应用（SPA）或 iframe 架构中。多 HTML 文件本质是多个独立文档上下文，浏览器没给它留“记忆接口”。强行用 storage + 事件同步，只会陷入兼容性补丁的无限循环。
