audio标签不加controls属性就不会显示播放控件，仅静默加载；必须显式添加controls（布尔属性，不可赋值false）才渲染默认UI；多格式回退需用source标签并严格匹配type与服务器Content-Type。
audio 标签不加 controls 就等于没写
写了 却看不到播放按钮？不是浏览器坏了，是根本没渲染控件。现代浏览器默认隐藏所有 UI，必须显式加 controls 属性才会显示播放/暂停/音量条。这个属性是布尔型，controls=""、controls="controls" 都行，但别写 controls="false"——浏览器会当成真值处理，照样显示控件。
如果你用 JS 自定义 UI（比如一个纯图标按钮），那才要主动去掉 controls，否则默认控件和自定义逻辑会打架。
多格式 fallback 必须用 source + 正确 type
只写 src="a.mp3" 在 Firefox 或某些 Android WebView 里直接静音或跳过加载，浏览器不会报错，只会沉默。真正能落地的写法是：
- 第一个
.mp3，type="audio/mpeg"（不是audio/mp3） - 第二个可选
.ogg（Vorbis 编码），type="audio/ogg" - WAV 和 OPUS 只在特定场景兜底：WAV 体积大、加载慢，仅适合短提示音；OPUS 虽小但 Safari 支持不稳定，慎用
- 所有
source的type必须和服务器返回的Content-Type响应头严格匹配，否则浏览器直接跳过该源
顺序不能错：浏览器按 DOM 顺序逐个尝试，遇到第一个能解码的就停，后面的不加载。Android 某些定制 WebView（如华为/联想）只读第一个 source，放错顺序等于废掉。
autoplay 要生效，muted 不是可选项，是硬门槛
Chrome 66+、Firefox 66+、Safari 13.1+ 全部拦截“有声 autoplay”，单独写 autoplay 或 autoplay="autoplay" 都无效。必须同时写 autoplay muted，且：
-
muted是布尔属性，写上即生效；设muted="false"无意义，JS 中恢复声音得用audio.muted = false - 移动端 iOS Safari 还有额外限制：首次播放必须由用户手势（click/touchstart）触发后，后续
play()才能解除静音；光靠autoplay muted只能静音播，点一次之后才能出声 - 不要依赖
volume=0或 JS 动态设音量来绕过策略——这些操作无法满足 autoplay 触发条件
preload="metadata" 是多数场景的合理默认值
preload="auto" 在移动端常被忽略，部分 Android WebView 直接降级为 metadata；而 preload="none" 会导致首次点击播放明显延迟，且与 autoplay 冲突（某些 WebView 直接拒绝播放）。
推荐做法：
- 默认用
preload="metadata"：只取时长、采样率等元数据，足够渲染进度条和 controls，又不浪费带宽 - 语音播报类小文件（≤200KB）、CDN 加速到位、明确要求秒开时，才考虑
preload="auto" - 播客列表页的非首项音频，可用
preload="none"，但得接受首次播放卡顿
真正容易被忽略的是服务器 MIME 配置——哪怕 HTML 写得再对，如果 Nginx/Apache 没配 audio/mpeg .mp3，浏览器收到 text/plain 响应头，就会当普通文本扔掉，连解码器都不调用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
