<audio>标签是HTML原生音频播放的最简方案，需加controls属性显示控件，用preload="metadata"优化加载，autoplay须配合muted，多格式<source>兜底，并注意路径正确性、移动端交互触发及样式限制。
用 <audio> 标签是最直接的方式
HTML 原生支持音频播放，<audio> 是唯一需要的标签，不需要额外 JS 或第三方库就能跑起来。它默认带基础控件（播放/暂停、音量、进度条），适合嵌入背景音乐、播客片段或提示音。
常见错误是只写 <audio src="xxx.mp3"></audio> 却没加 controls 属性——这样页面上什么也看不到，用户无法操作。
-
controls必须加上，否则无界面 - 推荐同时加
preload="metadata"，避免一打开页面就加载整首歌（尤其大文件） - 如果想自动播放（比如网页背景音），得加
autoplay和muted（现代浏览器强制要求静音才能自动播） - 多个格式兜底更稳妥：
<source src="song.mp3" type="audio/mpeg">+<source src="song.ogg" type="audio/ogg">
MP3 文件路径不对，<audio> 就是“静音的盒子”
最常卡住的地方不是代码写错，而是文件根本没加载进来。浏览器控制台里出现 404 或 net::ERR_FILE_NOT_FOUND 就是典型信号。
路径问题分三种情况：
立即学习“前端免费学习笔记（深入）”；
- 本地开发时用相对路径，比如
src="music/bgm.mp3"，要确认文件真在music/目录下，且大小写完全一致（Linux/macOS 区分大小写） - 部署到服务器后，路径以 HTML 所在位置为基准，不是以 JS 或 CSS 文件为准
- 如果用
file://协议双击打开 HTML，Chrome 会禁掉<audio>加载本地文件（安全限制），必须起一个本地服务（如python3 -m http.server）
移动端自动播放基本失效，别硬刚 autoplay
iOS Safari 和 Android Chrome 都限制非用户手势触发的音频播放。即使写了 autoplay muted，部分安卓机型仍可能不响，或只允许第一次静音自动播。
真正可靠的方案是等用户点一下页面再触发播放：
- 监听一次
click或touchstart，然后调用audio.play() - 别在
DOMContentLoaded或load事件里直接play()，大概率被拒并抛出DOMException: play() failed because the user didn't interact with the document first - 如果只是想预加载音频，用
audio.load()即可，不用play()
样式难改？用 controlsList 和 CSS 联合控制
<audio> 的默认控件没法用 CSS 深度定制（比如隐藏下载按钮、换滑块颜色），但可以微调：
- 加
controlsList="nodownload noremote nofullscreen"去掉右键菜单里的下载项、移除全屏按钮（对纯音频意义不大，但能减少干扰） - 用
::-webkit-media-controls-play-button等伪元素改按钮样式（仅 WebKit 内核有效，Firefox 不支持） - 真要完全自定义 UI，就得隐藏原生控件（
controls去掉），自己写按钮 + 调audio.play()/audio.currentTime/audio.volume，但得处理 iOS 的播放限制逻辑
原生 <audio> 看似简单，但路径、自动播、移动端兼容这三块最容易漏掉细节。尤其是调试时看到“没声音”，先看控制台报什么错，而不是立刻怀疑代码写错了。
