controls必须显式设置且不可为false，autoplay需与muted组合才能绕过浏览器自动播放拦截，preload="metadata"推荐使用，source顺序影响兼容性，错误需按code精细捕获。
controls 必须显式写，autoplay 单独用基本无效，muted 是绕过自动播放拦截的刚需组合项——这不是可选项，是现代浏览器（Chrome ≥70、Firefox ≥66、Safari ≥12.1）里能响起来的前提。
controls 属性怎么设才不白写
不写 controls，音频就不可见、不可交互，哪怕 play() 成功了用户也点不了暂停。空值或 controls="" 都有效，但千万别写 controls="false"：浏览器会当成真值处理，控件照常出现。
- 只在需要用户直接操作时保留它；若做背景音或提示音，可省略并用 JS 控制 UI
- 搭配
preload="metadata"可减少首帧卡顿，尤其在弱网下 - 某些 Android WebView 会忽略
controls渲染样式，需额外 CSS 重置audio::-webkit-media-controls
autoplay + muted 组合为什么不能拆开
Chrome 和 Safari 在无用户手势（如 click/touchstart）前提下，直接调用 play() 会抛 NotAllowedError；即使写了 autoplay，没 muted 也会被静音拦截。只有 autoplay + muted 同时存在，才能触发自动加载+自动播放流程。
- 移动端几乎全部强制要求该组合，iOS Safari 尤其严格
- 用户首次交互后（比如点了个按钮），可以再执行
audio.muted = false恢复有声 - 别依赖
autoplay做关键功能逻辑，它只是“尽力而为”，要监听playing或canplaythrough事件确认真正就绪
preload 和 source 顺序直接影响首播体验
preload 不是开关，而是策略信号：none 最省流量但首播延迟高；metadata 是推荐值，只拉时长、采样率等元数据；auto 在多数移动端实际被降级为 metadata。
立即学习“前端免费学习笔记（深入）”；
-
<source></source>的 DOM 顺序决定浏览器尝试优先级：把兼容最广、解码最快（通常是 MP3）放第一位 - WAV 放最后——文件大、加载慢，仅作兜底；Safari 对
audio/ogg支持不稳定，实测audio/wav反而更稳 - 企业内网可能禁用 MP3 解码，OPUS（
audio/opus）体积小 30%～50%，Chrome/Firefox 已支持，可作为第二顺位
最容易被忽略的是错误捕获粒度：只监听 error 事件不够，audio.error?.code === 4 才表示所有 <source></source> 都失败；而 play().catch() 里的 NotAllowedError 和 NotSupportedError 必须分开处理——前者靠用户交互补救，后者得换格式或降级提示。
