audio标签必须显式添加controls属性才能显示播放控件，否则元素隐身不可交互；src路径需为HTTP服务下的相对或绝对URL，避免file://；MP3需配合与type="audio/mpeg"并提供OGG回退；autoplay须加muted才可能生效。
audio 标签加 controls 属性，是唯一能立刻用起来的方案。不加 controls，就等于没放——用户看不见、点不了、也调不了音量。
为什么写了 audio 却没控件？
最常见错误：只写 <audio src="song.mp3"></audio>，漏掉 controls。浏览器不会自动显示播放条，也不会响应点击。这不是 bug，是规范行为。
-
controls是显式开关，不是可选项；没有它，audio元素在 DOM 里存在，但 UI 层完全“隐身” - 移动端尤其明显：iOS Safari 和 Android Chrome 都不会为无
controls的audio创建任何交互入口 - 别指望靠 CSS 显示它——
display: block或visibility: visible都无效，控件由浏览器原生渲染，不走 CSS 流程
src 路径错在哪？
路径问题占本地开发失败的 70% 以上。双击 HTML 打开时，Chrome/Firefox 会拒绝加载 src 中的相对路径（如 "./music/bg.mp3"），报 net::ERR_FILE_NOT_FOUND 或静默失败。
- 必须用本地 HTTP 服务启动：终端进项目目录，运行
python3 -m http.server（Python 3）或python -m SimpleHTTPServer（Python 2） - 路径要相对于 HTML 文件位置，不是 JS 或 CSS 文件；大小写必须完全一致（macOS/Linux 区分大小写）
- 避免
file://协议下直接打开，那是浏览器安全策略的“禁区”，不是你的代码问题
为什么 MP3 在 Firefox 里播不了？
Firefox 默认不支持 audio/mpeg（即 MP3），只认 audio/ogg 和 audio/wav。单写一个 MP3，等于主动放弃 Firefox 用户。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<source></source>提供回退：先放 MP3，再放 OGG，浏览器按顺序选第一个能解码的 -
type属性不能省，也不能写错："audio/mp3"无效，必须是"audio/mpeg"（MP3）或"audio/ogg"（OGG） - Ogg 文件可用
ffmpeg -i input.mp3 -c:a libvorbis output.ogg转换，免费且 Firefox 原生支持
autoplay 为啥点了也不响？
现代浏览器（Chrome 66+、Safari 11+、Edge 79+）强制要求：有声音的自动播放，必须满足两个条件之一——要么加 muted，要么等用户真实交互后才允许调用 play()。
- 只写
autoplay不生效，控制台可能不报错，但音频根本不会开始解码 - 加
muted后，autoplay才真正触发（适合背景音乐、引导页动效） - 如果必须带声自动播，得监听一次
click或touchstart，再执行audio.play()；DOMContentLoaded里直接调用必失败
最容易被忽略的点：移动端对自动播放更严，部分安卓机型即使 autoplay muted 也只允许首次静音播放；而 iOS Safari 要求所有音频都必须由用户手势触发——哪怕你已经点过一次，换一首歌仍需再点。
