audio标签不加controls属性则无任何控件渲染，需显式添加controls并用css隐藏才可确保正常加载与js控制；后台播放受浏览器策略限制，须用media session api或iframe隔离；移动端autoplay需同时满足preload="metadata"、用户交互及dom位置要求。
audio 标签不加 controls 就是隐形的
写了 <audio src="bgm.mp3"></audio>，页面上什么都不会出现——不是加载失败，是根本没渲染控件。浏览器不会自动给你加播放按钮、进度条或音量滑块。用户既点不了、也看不到、更没法调音量，容易误判为“代码没生效”或“文件路径错”。
必须显式写 controls 才会显示默认控件；如果真想隐藏，得靠 CSS 或 JS 主动控制，而不是靠“不写”来实现。
用 CSS 隐藏 controls 比省略更可控
直接删掉 controls 属性后，音频可能连加载状态都不反馈，JS 调用 play() 还受用户交互策略限制，调试困难。
更稳妥的做法是保留 controls，再用样式隐藏：
<audio src="./audio/intro.mp3" controls id="bgm"></audio>
#bgm { display: none; } 或 #bgm { visibility: hidden; height: 0; overflow: hidden; }
这样做的好处是：
- 音频仍能正常加载、解码、触发
loadeddata和canplay事件 - JS 可随时调用
play()/pause()，不受“无控件导致的策略拦截”影响 - 需要时还能快速恢复显示：
el.style.display = "inline"
后台静默播放不是“关掉声音就行”
即使加了 muted 和 autoplay，标签页切走、系统锁屏、设备休眠后，Chrome/Firefox/Safari 会主动暂停所有带音频输出的 <audio></audio> 实例。这不是 bug，是策略限制。
常见错误现象：
- 页面切到后台后几秒内播放中断，控制台报
"DOMException: play() failed because the document is not visible" - 加了
loop也没用，因为暂停后不会自动恢复 - Service Worker 无法绕过此限制，它不能直接调用
play()
真正可行的方案只有两个：
- Media Session API：告诉操作系统“这个页面正在播媒体”，让锁屏界面显示控件、支持快捷键。但必须在音频已开始播放后注册，且仅限 active 状态下生效
-
iframe 隔离：把
<audio></audio>放在固定主页面中，内容页用<iframe src="page2.html"></iframe>加载，避免整页刷新导致音频销毁
移动端 autoplay 必须满足三条件
iOS Safari 和 Android Chrome 对自动播放卡得极严：只写 autoplay muted 不够，还必须满足：
-
preload="metadata"（减少首次加载阻塞） - 用户已与页面发生至少一次手势交互（如点击、触摸），之后才能调用
play() -
<audio></audio>必须是的直系子元素，且未被display: none或visibility: hidden完全遮蔽
漏掉任意一条，play() 返回的 Promise 就会被 reject，且不抛 JS 错误，只在控制台输出警告。建议始终用 .catch() 捕获：
audio.play().catch(e => console.warn("play blocked:", e));
真正难的不是写对标签，而是理解浏览器何时允许你“碰声音”——这个时机由用户行为决定，不是由你写的属性顺序决定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
