audio标签需显式添加controls属性才能显示控件；须用source元素提供mp3+ogg双格式并准确声明type；autoplay需配合muted才生效，有声播放必须绑定用户手势；preload推荐metadata，ios safari中play()必须在click等事件中调用。
audio 标签是 HTML5 原生嵌入音频的唯一标准方式，不依赖插件、不需 JS 就能播放，但直接写 <audio src="x.mp3"></audio> 很大概率播不了——问题不在语法错，而在格式、属性和浏览器策略没对齐。
为什么加了 src 还不显示控件？
因为 audio 默认完全静默且不可见。没有 controls 属性，它就只是个“空盒子”，哪怕音频已加载完成，用户也点不了、拖不了、调不了音量。
- 必须显式写
controls（布尔属性，无需赋值），如：<audio src="music.mp3" controls></audio> - 若想用自定义 UI（比如图标按钮 + 进度条），反而要主动去掉
controls，再用 JS 绑定play()、pause()等方法 - 某些 CMS 或编辑器会自动过滤掉无值的布尔属性，导致
controls被删掉——检查最终渲染出的 HTML 源码确认是否还在
为什么在 Safari / Firefox 里音频不播放？
浏览器对音频格式支持不一致：Safari 不支持 .ogg，Firefox 对某些 MP3 编码变体兼容性差，单靠一个 src 属性无法兜底。
- 必须用
<source></source>提供至少两种格式，推荐mp3+ogg组合 -
type属性必须写准确：audio/mpeg对应 MP3，audio/ogg对应 OGG，写错（如audio/mp3）会导致该<source></source>被跳过 - 浏览器按
<source></source>出现顺序尝试加载，第一个能解析的就用，后面的忽略——把最兼容的（通常是 MP3）放前面
autoplay 失效？不是 bug，是浏览器强制策略
Chrome、Safari、Edge 等主流浏览器默认禁止有声自动播放，即使写了 autoplay，也会静音或直接阻断。这不是代码问题，而是防打扰机制。
- 唯一稳定生效的方案是加
muted：<audio src="bgm.mp3" autoplay muted loop></audio> - 如果必须有声自动播放，需先触发一次用户手势（如点击、触摸），之后再调用
play()方法；单纯靠DOMContentLoaded或load事件不行 -
preload="metadata"是合理折中：只预加载时长、采样率等元信息，不拉完整文件，既加快控件响应，又避免浪费带宽
怎样让 audio 在页面中真正“隐形”又可控？
有些场景需要音频后台运行（如语音提示、游戏音效），但不想暴露控件——这时不能只靠 CSS 隐藏，得从行为和加载策略入手。
- 去掉
controls，用 JS 控制；设置style="display:none"或visibility:hidden即可视觉隐藏 - 避免用
preload="auto"，尤其在移动端，它可能触发整段音频提前下载，影响首屏性能 - 注意：iOS Safari 中，即使 JS 调用
play()，若未绑定到用户手势事件，仍会失败——必须确保首次播放调用发生在click、touchstart等回调内
最容易被忽略的一点：所有 <source></source> 的 type 值必须与实际文件 MIME 类型严格匹配，服务器返回的 Content-Type 错了，浏览器照样跳过——别只查本地文件后缀。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
