audio标签不加controls仅隐藏控件，不等于后台播放；真正静默播放需同时满足：src路径合法、muted与autoplay共存、元素未被CSS隐藏。
audio 标签不加 controls 就不会显示控件，但也不等于“后台静默播放”
很多人以为删掉 controls 属性，音频就会在后台悄悄运行——其实不是。不加 controls 只是隐藏界面，音频是否播放、能否自动播放、会不会被拦截，完全由其他条件决定。浏览器根本不管“你有没有控件”，只看：用户是否交互过、muted 是否存在、autoplay 是否配合策略、资源路径是否合法。
要实现真正可用的后台静默播放，必须同时满足三个硬性条件
缺一不可，少一个就卡在加载、暂停或报错上：
-
src必须指向可访问的路径（推荐相对路径如"./audio/bgm.mp3"；file:///协议下 Chrome/Firefox 直接拒绝加载） - 必须带
muted和autoplay两个布尔属性（仅autoplay会被浏览器无视） - 音频元素不能被 CSS 隐藏（如
display: none或visibility: hidden），iOS Safari 尤其敏感，建议直接放在下一级
为什么 JS 调用 play() 常报 DOMException: play() failed because the user didn't interact with the document first
这个错误不是代码写错了，是浏览器在守规矩。现代浏览器（Chrome 70+、Firefox 66+、Safari 12.1+）强制要求：任何有声播放操作，必须发生在用户明确交互之后（比如 click、touchstart）。即使你先设了 muted="true"，后续想 audio.muted = false; audio.play() 恢复声音，也得等用户点过一次页面才行。
绕过方式只有两种：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 用
<audio muted autoplay></audio>开机即静音播，再监听首次click后解除静音并重播（注意：必须立刻调用play()，不能套setTimeout） - 彻底放弃自动播放幻想，改用按钮触发：
<button onclick="document.getElementById('bgm').play()">开始播放</button>
MP3 在 Firefox 里播不了？别急着换格式，先检查 <source></source> 的 type 属性
只写 <source src="bgm.mp3"></source> 是不够的。Firefox 等浏览器依赖 type 值判断是否支持该格式，没写或写错（比如写成 type="audio/mp3"）就会跳过这个源，导致 fallback 失效。
正确写法必须匹配标准 MIME 类型：
<source src="bgm.mp3" type="audio/mpeg"></source><source src="bgm.ogg" type="audio/ogg"></source><source src="bgm.wav" type="audio/wav"></source>
顺序也很关键：把兼容性最广的 .mp3 放第一个，浏览器按顺序尝试，直到找到能播的。
真正难的不是写对标签，而是理解浏览器不是“执行你的指令”，而是在执行一套你必须适配的播放策略。路径、MIME、交互时机、iOS 的 DOM 位置限制——漏掉任意一环，音频就停在加载状态，连错误提示都不给。
