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 类型问题
