controls属性必须显式存在才渲染ui，布尔型不可赋字符串值；autoplay需配合muted才能自动播放；preload控制加载量，source顺序影响格式兼容性；loop不随src动态重置，error需结合catch与code判断。
controls 属性必须显式存在，否则用户完全感知不到音频
不加 controls，<audio></audio> 就是静默加载——没界面、没按钮、没错误提示，连开发者都容易误以为“代码没生效”。它不是“隐藏控件”，而是根本没渲染任何 UI。
常见错误写法：controls="false" 或 controls=""。HTML 中 controls 是布尔属性，只要出现即生效；写成字符串值会被浏览器当作真值处理，反而导致意外显示控件。
在 Vue/React 等框架中，若用绑定语法如 :controls="showControls"，务必确保传入的是布尔值 true/false，而非字符串 "true" 或 "false"。
autoplay + muted 才是现代浏览器里唯一靠谱的自动播放组合
单独写 autoplay 在 Chrome ≥70、Firefox ≥66、Safari ≥12.1 中基本无效——浏览器会直接拦截并抛出 NotAllowedError。真正能落地的方案只有两个：
- 加
muted，再配autoplay：静音状态下多数浏览器允许自动播放（iOS Safari 仍需首次用户手势后才解禁） - 等用户点击后，用 JS 调用
audio.play()：此时可取消静音、调节音量，不受静音限制
muted 是开关型属性：设为 true 强制静音，且优先级高于 volume；设为 false 不代表“恢复声音”，只是移除静音状态，实际音量仍由 volume 决定。
preload 和 source 顺序直接影响首播体验与兼容性
preload 不是“要不要加载”，而是“加载多少”：
-
preload="none"：最省流量，但首次play()会有明显延迟（得等网络下载完才能播） -
preload="metadata"：只加载时长、采样率等头信息，推荐用于大多数场景（尤其带进度条的音频） -
preload="auto"：全量预加载，在移动端常被浏览器忽略，部分 Android WebView 直接降级为metadata
<source></source> 的 DOM 顺序决定浏览器匹配逻辑：从上到下找第一个它能解码的格式。正确顺序应是：
- MP3（
type="audio/mpeg"）放最前：Chrome/Safari/Edge 兼容性最广、解码最快 - OGG（
type="audio/ogg"）居中：Firefox/Opera 主力支持，但 Safari 对audio/ogg支持不稳定 - WAV 或 OPUS 放最后：WAV 通用但体积大，仅作兜底；OPUS（
type="audio/opus"）体积小、Chrome/Firefox 已支持，适合内网或对版权敏感环境
loop 行为和 error 捕获容易被低估的细节
loop 是布尔属性，写 loop 即可，无需 loop="loop" 或 loop="true"。但它有个关键特性：只对当前加载的音频源生效；如果 JS 动态修改了 src，loop 状态不会自动重置，必须手动执行 audio.loop = true。
更隐蔽的问题在错误处理：error 事件不总是触发，尤其当音频资源在 CDN 上且缺失 crossorigin 属性时，某些浏览器会静默失败，连 audio.error 都是 null。真正可靠的捕获方式是：
- 调用
play()后用.catch()捕获 Promise rejection：audio.play().catch(e => console.error(e.name)) - 监听
error事件，并检查audio.error?.code：值为4表示所有<source></source>均不可用 - 别依赖
canplay判断就绪——它只等元数据，音频体可能还没到；canplaythrough更准，但会显著延迟首次播放时机
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
