最简可用的<audio>标签写法是<audio src="music.mp3" controls></audio>，需确保src为正确相对路径或绝对URL，且文件位于服务器环境（非file://协议）下；推荐用<source>提供mp3+ogg双格式回退，并注意autoplay须配合muted才可能生效。
直接用 <audio> 标签就能插入音频，不需要 JavaScript 或第三方库——但浏览器兼容性、自动播放限制和路径写错是 90% 的人卡住的地方。
怎么写最简可用的 <audio> 标签
最基础写法只要两样：一个 src 属性指向音频文件，加上 controls 让用户能操作：
<audio src="music.mp3" controls></audio>
注意：src 值必须是相对路径（如 "./audio/intro.wav"）或绝对 URL（如 "https://example.com/sound.ogg"），不能只写文件名；本地双击 HTML 文件时，部分浏览器会因安全策略拒绝加载 file:// 路径下的音频。
- 推荐把音频文件放在和 HTML 同级或子目录下，用相对路径更可靠
- 如果页面部署在服务器（哪怕本地用
python -m http.server），file://问题就消失 - 不加
controls属性的话，默认完全不可见、不可操作，不是“静音”，是“隐身”
为什么 MP3 播不了？——格式与浏览器支持差异
不是所有浏览器都支持所有格式：.mp3 在 Chrome/Firefox/Edge 都行，但 Safari 对 .ogg 支持更好；.wav 兼容性最好但体积大；.aac 在 iOS 上更稳妥。单一 src 属性不够健壮。
立即学习“前端免费学习笔记（深入）”；
正确做法是用 <source> 子标签提供多个格式回退：
<audio controls><br> <source src="music.mp3" type="audio/mpeg"><br> <source src="music.ogg" type="audio/ogg"><br> <source src="music.wav" type="audio/wav"><br></audio>
- 浏览器按顺序尝试
<source>，遇到第一个支持的就加载，后面的忽略 -
type属性不是可选的——没写或写错（比如写成"audio/mp3"）会导致该<source>被跳过 - 实际项目中，
.mp3 + .ogg组合已覆盖全部主流浏览器，不必塞三个
自动播放失败？别怪标签，怪浏览器策略
加了 autoplay 却没声音？这是现代浏览器的默认行为：除非用户已与页面有交互（如点击、滚动），否则禁止自动播放带声音的媒体。这是硬性限制，不是 bug。
-
autoplay必须配合muted才大概率生效（比如做背景动效）：<audio autoplay muted> - 想“点一下就播”，不要依赖
autoplay，改用 JS 的play()方法，在用户点击事件里调用 - 某些安卓 WebView 或旧版 iOS Safari 还会完全忽略
autoplay，即使加了muted
常见错误现象和对应检查点
音频不显示、不加载、报错 404 或 “Failed to load resource”，大概率是这几个地方出问题：
-
src路径大小写不对（Linux 服务器区分大小写，Music.mp3≠music.mp3） - 文件真没放在指定位置——右键网页 → “检查” → 切到 Network 标签，刷新，看音频请求是否标红 404
- 服务器没配对音频 MIME 类型（尤其是自建 Nginx/Apache 时），导致浏览器拒收；常见缺失类型包括
audio/ogg、audio/wav - 用了中文文件名或空格，URL 编码没处理好，建议全用英文下划线命名
音频本身损坏或编码异常（比如用剪映导出的某些 MP3）也会静默失败，换一个标准编码的文件快速验证。
