用iframe嵌套游戏页面并将audio置于主页面，可避免跳转时音频重置，实现跨页无缝播放；网易云外链需改协议为https并用postmessage跨域通信，静音autoplay配合用户手势解禁有声播放。
直接用 <iframe></iframe> 嵌套网易云外链或自建音频控件，把播放逻辑锁在主页面里，就能做到切页不中断——这不是“优化技巧”，而是唯一能绕过浏览器页面重载销毁音频状态的实操路径。
为什么 iframe 能解决切页中断问题
每次跳转到新 HTML 文件（如 scene2.html），浏览器会卸载整个当前文档，包括其中所有 <audio></audio> 元素及其播放状态。而 <iframe></iframe> 内容刷新时，父页面 DOM 完全不受影响，<audio></audio> 实例持续存活、时间点和暂停状态原封不动。
- 关键前提是：音频元素必须在主页面（如
index.html）中，不能放在 iframe 的 src 页面里 - iframe 仅负责承载内容区域，所有跳转都通过修改
iframe.src完成，不触发window.location变更 - 如果误把
<audio></audio>放进scene1.html再嵌入，那跟单页没区别，照样中断
网易云外链 iframe 的常见坑与填法
直接复制网易云给的代码，大概率在本地或 HTTPS 站点失效，因为它的 src 是协议相对地址（//music.163.com/...）。
- 本地开发时用
file://协议，浏览器拒绝加载跨协议资源 → 改成https://music.163.com/... - 页面是 HTTPS，但外链用
http://→ 混合内容被拦截 → 必须统一为https -
width和height属性控制 iframe 容器尺寸，src中的height=66控制内部播放器样式，二者可不同，但别设成 0 - 想让播放器随页面缩放？把
width="100%"，再用 CSS 限制最大宽，别用固定像素
子页面如何控制父页面的 audio 元素
iframe 内的页面（如 scene2.html）默认无法直接访问父页面 DOM，需用 postMessage 安全通信。
- 父页面（
index.html）监听消息：window.addEventListener('message', e => { if (e.data === 'pause') bgm.pause(); }) - 子页面触发控制：
window.parent.postMessage('play', '*')或window.parent.postMessage({ cmd: 'volume', value: 0.7 }, '*') - 不要用
window.parent.document.getElementById(...)—— 跨域时会抛出 SecurityError - 如果父子同源（比如都是
localhost或同一域名），可省略postMessage，直接调用window.parent.bgm.play()
自动播放限制怎么合规绕过
桌面 Chrome 允许静音自动播放，但 iOS Safari 连 muted autoplay 都不认，必须用户第一次交互后才能解禁有声播放。
- 主页面加载时，
<audio muted autoplay></audio>+play()尝试静音启动（多数桌面端成功） - 加一个显眼按钮，例如「开启背景音乐」，点击后执行
audio.muted = false; audio.play() - 不要设
volume = 0代替muted—— iOS 仍判定为有声流，同样被拦截 - 播放成功后，再保存用户偏好到
localStorage，下次进来直接复用上次音量和 mute 状态
真正容易被忽略的是：iframe 切换内容时，如果新页面 JS 里有未清理的定时器或事件监听，可能累积内存泄漏；另外，网易云外链播放器本身不提供播放状态回调，需要自己用 postMessage 模拟心跳或靠 UI 按钮驱动，别指望它主动通知你当前是否在播。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
