网页全局背景音乐无缝延续需用iframe隔离音频与内容，主页嵌入audio并保持存活，子页通过parent控制；或用sessionstorage持久化状态并手动处理ended事件实现近无缝循环，同时合规绕过自动播放限制。
实现网页全局背景音乐的无缝延续，核心不是让每个页面都“各自播放”，而是让音频状态脱离单页生命周期——即避免页面跳转时 audio 元素被销毁重置。
用 iframe 架构隔离音频与内容
将整个游戏或网站内容嵌入 iframe，而 <audio></audio> 元素放在主页面（如 index.html）中。这样页面跳转只发生在 iframe 内，主页面保持存活，音频持续播放、状态不丢失。
- 主 HTML 文件（
index.html）包含：<audio id="bgm" autoplay muted loop></audio>和一个全屏<iframe src="scene1.html"></iframe> - 所有场景页（
scene1.html、scene2.html…）只负责展示内容，不放 audio 标签 - 通过
window.parent.document.getElementById('bgm')可从子页控制主页音频（如暂停、调音量）
用 JavaScript 持久化播放状态（轻量级方案）
若无法改用 iframe，可借助 sessionStorage 记录关键状态，并在新页加载后恢复：
- 监听
beforeunload保存currentTime、paused、muted、volume - 新页面 onload 后读取并设置
audio.currentTime，再调用play()或pause() - 注意：首次播放仍需用户手势触发；恢复播放时若已静音，可直接继续；若有声，则需先绑定一次点击事件解锁音频上下文
确保循环真正连贯不卡顿
原生 loop 属性在 MP3 上常有 50–200ms 间隙，尤其在移动端。要接近无缝，必须组合处理：
- 优先使用
.ogg（Vorbis 编码）格式，它比 MP3 在循环衔接上更稳定 - 提供多源：
<source src="bgm.ogg" type="audio/ogg"><source src="bgm.mp3" type="audio/mpeg"></source></source> - 监听
ended事件手动跳转：audio.addEventListener('ended', () => { if (audio.readyState >= audio.HAVE_FUTURE_DATA) audio.currentTime = 0; }) - 避免同时启用原生
loop和 JS 跳转——二者冲突会导致异常行为
绕过自动播放限制的合规做法
现代浏览器禁止无声以外的自动播放，且 iOS Safari 连 muted autoplay 都不支持。必须尊重这一策略：
- 页面加载时设
muted+autoplay，多数桌面浏览器能静音启动 - 为 iOS 等严格环境准备显眼按钮（如「开启背景音乐」），绑定
audio.play() - 成功播放后，再设
audio.muted = false并调整音量，后续循环不受影响 - 不要用
volume = 0替代muted——iOS 仍视其为有声流，同样被拦截
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
