<audio>标签无需JS即可运行，常见问题为漏写controls属性、路径错误及移动端静音限制；自动播放需同时加autoplay与muted；preload="metadata"可优化加载性能；controlsList可隐藏下载等非必要控件。
<audio> 标签就能跑起来，不需要 JS、不依赖库、不配构建工具——但多数人卡在路径、属性漏写、移动端静音限制这三处。
为什么 <audio> 加了 src 却没声音
最常见原因是没加 controls 属性，导致控件完全不渲染，页面上“空空如也”；其次是文件路径错误，尤其本地开发时：
- 相对路径如
src="music/bgm.mp3"要确认文件真在music/目录下，且大小写完全一致（macOS/Linux 区分大小写） - 部署后路径以 HTML 文件所在位置为基准，不是以 JS 或 CSS 为准
- 用浏览器 DevTools 的 Network 面板看
bgm.mp3是否返回 404 或 403 - 如果想自动播放，必须同时加
autoplay muted，否则 Chrome/Firefox/iOS Safari 会直接拦截
怎么让音频加载更快、更省流量
preload="metadata" 是关键开关，它只拉取时长、采样率等基本信息，不加载整段音频数据。这对大文件（比如 >10MB 的播客）特别有用：
- 默认值是
preload="auto"，可能一开页面就触发整首下载，浪费带宽 -
preload="none"完全不预加载，适合用户点击才播的场景（如文章内嵌音频） - 不要依赖
audio.load()手动触发预加载——它不会绕过 autoplay 限制，且在 iOS 上常被忽略
如何隐藏下载按钮和全屏选项
原生控件右键会出现“下载音频”菜单，对版权敏感内容不友好。用 controlsList 可精准控制：
-
controlsList="nodownload"去掉右键下载项 -
controlsList="noremote nofullscreen"移除远程播放（AirPlay/Chromecast）和全屏按钮（纯音频基本用不到） - 注意：这个属性在旧版 Safari（
自定义进度条和时间显示的坑点
一旦去掉 controls，就得自己监听 timeupdate 和处理 seekBar 拖动。最容易出错的是时长未就绪就计算：
立即学习“前端免费学习笔记（深入）”；
-
audio.duration初始为NaN，要等loadedmetadata事件后才有效 - 拖动进度条时，不能直接设
audio.currentTime = value，得先检查audio.readyState >= 2（HAVE_FUTURE_DATA），否则在低网速下会失败 - 移动端 touch 事件需额外绑定
touchstart/touchmove，仅靠change无法实时响应滑动
autoplay 的差异化拦截、iOS 对非用户手势的严格限制，以及 Safari 对 controlsList 的滞后支持——这些没法靠“多写几行 JS”解决，得靠条件判断 + 降级提示。 
