现代浏览器禁止有声自动播放，audio标签需配合用户交互、多格式回退及css隐藏（非display:none）才可实现背景音乐自动循环播放。
现代浏览器不允许静音以外的自动播放背景音乐，audio 标签是唯一合规方案，但必须配合用户交互、多格式回退和特定隐藏方式，否则在 Chrome、Firefox 或 iOS Safari 上会失效甚至被中断。
为什么 display: none 会让 audio 暂停或加载失败
Chrome 和 Firefox 在元素设为 display: none 时会主动暂停音频；iOS Safari 更激进——直接拒绝解码和加载。这不是 bug，是浏览器策略强制行为。
- 改用
position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;隐藏 —— 元素仍参与渲染流程，音频可正常加载与播放 - 绝对定位要加
top: 0; left: 0;，否则某些旧版 WebView 可能计算错位置 - 避免用
hidden属性，它等价于display: none
如何让背景音乐真正“自动”循环播放（且有声）
用户首次点击页面后才能解除静音并播放有声内容，这是硬性限制。不能跳过，也不能靠定时器模拟。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- HTML 中必须带
muted和autoplay，否则初始加载就会被阻止 - 绑定一次性的
click事件（用{ once: true }），触发play()后立即调用unmute()和设置volume -
loop属性必须写在 HTML 里，JS 设置loop = true在部分 Safari 版本中不生效 - 示例关键代码：
<audio id="bgAudio" src="bgm.mp3" muted autoplay loop style="position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden;"><source src="bgm.mp3" type="audio/mpeg"><source src="bgm.ogg" type="audio/ogg"></source></source></audio>
为什么只放 MP3 文件大概率播不出来
Firefox 默认不支持 MP3 解码，Safari 对 OGG 支持极差，只靠单一格式等于主动放弃兼容性。
- 必须用
<source></source>提供至少两种格式：MP3 + OGG 是最低要求 -
type属性不可省略，否则浏览器无法预判是否支持，可能卡在 loading 状态 - MP3 放前面，因为多数浏览器优先尝试首个
<source></source>；OGG 放后面作 fallback - 不要指望
preload="auto"—— 它在静音 autoplay 下意义不大，preload="metadata"更稳妥
移动端（尤其是 iOS）额外要注意的坑
iOS Safari 对隐藏音频更敏感，还附带全屏、黑屏、自动暂停等连锁问题。
- 必须添加
playsinline和webkit-playsinline，否则视频 fallback 方案会在播放时强制全屏 - 若用
video标签代替audio（如<video src="bgm.mp3" ...></video>），需补上x5-playsinline和x-webkit-airplay="allow" - 三个点菜单（下载 / 播放速度）可用
controlsList="nodownload noplaybackrate"隐藏，但仅限 Chromium 内核 - 音频初始化失败时，
play()会返回 Promise，记得.catch(e => console.warn("play failed:", e))查错
最易被忽略的一点：所有用户交互触发的 play() 必须发生在同一个事件循环内，不能包裹在 setTimeout 或异步回调里，否则 iOS 会判定为“非直接交互”，依旧拒绝播放。
