audio标签是唯一原生支持的音频嵌入方案，但必须加controls才显示控件，需用source提供MP3+OGG多格式回退，autoplay须配muted，preload推荐metadata，路径错误或CORS会导致404。

audio 标签是当前唯一无需 JS、不依赖插件、所有现代浏览器都支持的原生方案，但光写 <audio src="a.mp3"></audio> 很大概率播不了——问题不在语法错，而在属性缺失、格式单一、路径出错或触发时机违规。

必须加 controls 才有播放器可见

没加 controls 时，audio 元素在 DOM 中存在，也能被 JS 控制（比如调用 .play()），但页面上完全不可见、不可点击、没有进度条或音量滑块。用户面对的是一个“静音的空盒子”。

• 要让用户能直接操作，必须显式写 controls：
• 若想自定义 UI（如用 SVG 按钮 + Canvas 进度条），反而要主动去掉 controls，再用 JS 绑定事件
• controlsList="nodownload noremote nofullscreen" 可隐藏右键菜单里的下载项、移除全屏按钮（对纯音频有意义）

单靠 MP3 会丢掉 Firefox 和部分 Opera 用户

Firefox 默认不支持 audio/mpeg，Safari 不认 audio/ogg。只放一个 src 等于主动放弃约 25% 的桌面用户。

• 必须用 <source></source> 提供多格式回退，浏览器按顺序尝试，遇到第一个能解码的就停
• 推荐组合：<source src="song.mp3" type="audio/mpeg"></source> + <source src="song.ogg" type="audio/ogg"></source>
• type 属性不能省——它让浏览器跳过无法解码的格式，避免卡在 loading 状态
• WAV 虽通用但体积大、无压缩，除老 IE 外已基本弃用，不建议主力使用

autoplay 必须配 muted，否则 99% 被拦截

Chrome、Edge、Safari、Android Chrome 全部强制要求：带声音的自动播放必须由用户手势触发。没交互就播，.play() 会直接 reject 并抛出 DOMException。

• 唯一稳妥的静音自动播写法：<audio autoplay muted controls src="intro.mp3"></audio>
• 移动端更严格：iOS Safari 基本无视 autoplay muted，Android 部分机型只允许首次静音自动播
• 真正可靠的方案是监听一次 click 或 touchstart，再调用 audio.play()；别在 DOMContentLoaded 里直接调
• 如果只是预加载元数据（比如读取时长），用 preload="metadata"，比 auto 更省带宽

404 和 net::ERR_FILE_NOT_FOUND 是最常卡住的地方

控制台报这个错，说明文件根本没加载进来。不是代码问题，是路径错了。

• 本地开发用 file:// 协议双击打开 HTML？Chrome 会禁掉本地音频加载——必须起本地服务，例如 python3 -m http.server
• 相对路径以 HTML 文件位置为基准，不是 JS 或 CSS 所在目录；src="music/bgm.mp3" 就得确认 music/ 目录真在 HTML 同级，且大小写完全一致（macOS/Linux 区分）
• 部署到服务器后，检查网络面板：是否返回 404？是否因 CORS 被拒（跨域资源需服务端配 Access-Control-Allow-Origin）？
• 路径没问题但还是不响？试试把文件拖进浏览器地址栏看能否直连播放——排除服务器配置或 MIME 类型问题