audio标签必须加controls属性才能显示播放控件，否则仅为不可见的“透明盒子”；需用source提供mp3+ogg双格式并声明type；autoplay须配合muted且依赖用户手势触发；路径、mime类型及协议均需正确配置。
audio 标签必须加 controls 才能显示控件
不加 controls，<audio></audio> 元素在页面上就是个“透明盒子”：DOM 里存在、JS 能调用 play()，但用户看不见按钮、拖不了进度条、调不了音量。很多人写了半天没反应，问题就在这儿。
- 要让用户直接操作，必须显式写
controls（布尔属性，无需赋值） - 想自定义 UI（比如 SVG 按钮 + Canvas 进度条），反而得去掉
controls，再用 JS 绑定行为 -
controlsList="nodownload noremote nofullscreen"可隐藏右键菜单里的下载项和全屏按钮——对纯音频有意义，避免干扰
多格式 是跨浏览器兼容的硬性要求
只放一个 src="song.mp3"，等于主动放弃 Firefox 和部分 Opera 用户。Safari 支持 MP3，Firefox 原生认 OGG；WAV 虽通用但体积大，已基本弃用。
- 必须用
<source></source>提供至少两种格式，推荐组合：<source src="song.mp3" type="audio/mpeg"></source>+<source src="song.ogg" type="audio/ogg"></source> -
type属性不能省：它让浏览器跳过解码失败的格式，避免卡在 loading 状态 - 浏览器按
<source></source>顺序尝试，遇到第一个能解码的就停，后续忽略
autoplay 必须配 muted，且仍不可靠
Chrome、Edge、Safari、Android Chrome 全部强制要求：带声音的自动播放必须由用户手势触发。直接写 autoplay，99% 会被静音拦截或直接抛出 DOMException: play() failed because the user didn't interact with the document first。
- 唯一勉强可行的写法是
autoplay muted，但 iOS Safari 基本无视，Android 部分机型只允许首次静音自动播 - 真正可靠的方案是监听一次
click或touchstart，再调audio.play()；别在DOMContentLoaded或setTimeout里直接调 - 如果只是想预加载元数据（比如读取时长），用
preload="metadata"，比auto更省带宽
404 和 net::ERR_FILE_NOT_FOUND 是最常卡住的地方
控制台报这个错，不是代码语法问题，而是文件根本没加载进来。常见原因有三个：
- 路径写错：相对路径以 HTML 文件为基准，不是以 JS 或 CSS 文件为准
- 本地双击打开 HTML（
file://协议）：Chrome 会禁掉本地音频加载，必须起本地服务，例如python3 -m http.server - 服务器未正确返回 MIME 类型：MP3 文件需返回
audio/mpeg，OGG 需返回audio/ogg；Nginx/Apache 需手动配置，否则 Firefox 可能拒绝解码
真正麻烦的不是写几行 HTML，而是每个浏览器对“能播”“该播”“怎么播”的判断逻辑都不一样。格式、属性、路径、协议、触发时机，漏掉任何一环，音频就哑了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
