audio标签必须显式添加controls属性才能显示播放控件，否则完全隐身；src路径需正确（相对或绝对URL），推荐用提供mp3、ogg、wav多格式回退并写对type值；autoplay需配合muted才可能生效，且JS播放必须由用户手势触发并处理Promise错误。
audio 标签不加 controls 就等于没放
很多人写完 <audio src="bgm.mp3"></audio> 刷新页面，什么都没看到，以为代码错了。其实不是加载失败，是它根本“隐身”了——没有 controls 属性，浏览器连播放按钮都不渲染，用户既看不到、也点不了、更没法判断是否加载成功。
真正能立刻验证的最小结构只有这三样：src（路径必须对）、controls（必须显式写上）、以及一个可访问的音频文件。其他属性如 autoplay、loop 全部可选，但少了 controls，就等于没加音频。
- 路径必须是相对路径（如
"./audio/bgm.mp3"）或绝对 URL（如"https://cdn.example.com/bgm.ogg"），不能只写"bgm.mp3"或"C:\music\bgm.mp3" - 直接双击 HTML 文件打开时，Chrome/Firefox 会因
file://协议拒绝加载音频；用python -m http.server起个本地服务就能绕过 - 控制台报
404或ERR_FAILED，90% 是路径大小写错误、文件没放对位置、或服务器没配好 MIME 类型
MP3 播不了？别怪浏览器，怪你只写了一个 source
Firefox 默认不支持 MP3 解码，Safari 对 OGG 更友好，iOS 微信内置浏览器甚至会跳过没写 type 的 <source></source>。只放一个 .mp3，相当于主动放弃 20%+ 的真实用户。
正确做法是用 <source></source> 提供多格式回退，浏览器按顺序尝试，遇到第一个支持且可加载的就停：
立即学习“前端免费学习笔记（深入）”；
<audio controls> <source src="bgm.mp3" type="audio/mpeg"> <source src="bgm.ogg" type="audio/ogg"> <source src="bgm.wav" type="audio/wav"> 您的浏览器不支持 audio 元素。 </audio>
-
type属性不能省，也不能写错："audio/mp3"是无效值，必须是"audio/mpeg"（MP3）、"audio/ogg"（OGG）、"audio/wav"（WAV） - .mp3 体积适中、兼容广，适合主用；.ogg（Vorbis）压缩率高、开源免费，Firefox/Chrome/Edge 均原生支持；.wav 仅建议用于几秒内的提示音
- HTTP 服务器若未返回正确的
Content-Type响应头，没写type的<source></source>很可能被浏览器直接忽略
autoplay 不响？不是 bug，是浏览器策略强制静音
加了 autoplay 却没声音，不是代码问题，是现代浏览器（Chrome 94+、Safari、iOS WebView）统一执行的 Autoplay Policy：未经用户交互，禁止播放有声媒体。强行加 autoplay 只会触发控制台警告，甚至直接失败。
唯一稳定生效的方式是配合 muted：
<audio src="bgm.mp3" autoplay muted loop controls></audio>
-
muted是布尔属性，写了就生效，不需要muted="true" - 即使你后续用 JS 执行
audio.muted = false，也得先确保音频已进入可播放状态（监听canplay或loadeddata事件） - iOS Safari 最严格：首次播放必须由用户点击/触摸触发，
autoplay muted在 iOS 上也可能被忽略，必须准备 fallback 按钮
想用 JS 控制播放？别在 onload 里调 play()
常见错误是把 audio.play() 放在 DOMContentLoaded、window.onload 或 setTimeout 里，结果报错：DOMException: play() failed because the user didn't interact with the document first。
浏览器只认“真实用户手势”，比如 click、touchstart、keydown（非自动触发）。安全写法是绑定到用户可点击的元素上：
const audio = document.querySelector('audio');<br>document.getElementById('playBtn').addEventListener('click', () => {<br> audio.play().catch(e => console.warn('播放被拒:', e));<br>});
- 每次调用
play()都返回 Promise，必须.catch()，否则错误静默消失，调试无从下手 - 不要反复调用
play()：先判断audio.paused === true再执行，否则会抛出异常 - 移动端尤其要注意：微信/QQ 内置浏览器对
play()的调用时机更敏感，首次点击后才解锁音频能力，之后才能自由控制
