最简方式是<audio controls src="sound.mp3">，需确保路径正确、用英文命名，MP3格式兼容最佳；autoplay受浏览器策略限制，须配合muted或用户交互触发。
怎么用 <audio> 标签嵌入本地音频文件
直接写 <audio src="music.mp3"></audio> 是最简方式，但浏览器默认不自动播放，也不显示控件——用户根本不知道有声音。必须加 controls 属性才能出现播放按钮、进度条等界面元素。
- 推荐写法：
<audio controls src="sound.mp3"></audio> - 路径要相对或绝对正确；如果文件在
assets/audio/下，就得写src="assets/audio/sound.mp3" - 常见错误：路径带中文或空格，比如
src="我的音频.mp3"，部分浏览器会加载失败，建议用英文命名 - MP3 是兼容性最好的格式，
.wav文件大、.ogg在 Safari 里可能不支持，单格式优先选 MP3
preload 属性到底要不要设？设成什么值？
preload 控制页面加载时是否提前下载音频数据，不是“要不要加载”，而是“加载多少”。它有三个可选值：none、metadata、auto。
-
preload="none"：最省流量，用户点播放才开始请求文件；适合页面上有多个音频、或音频较大（如 >5MB） -
preload="metadata"：只下载头信息（时长、采样率等），能立刻显示总时长和可拖拽进度条；适合需要快速响应交互的场景 -
preload="auto"：浏览器自行决定是否下载全部内容；移动端 Safari 默认忽略该值，强制按metadata处理 - 别写
preload不带值，HTML5 中这是无效写法，等价于没写
为什么加了 autoplay 却不自动播放？
几乎所有现代浏览器（Chrome、Firefox、Safari、Edge）都禁用了无用户交互触发的 autoplay，尤其当音频有声音（非静音）。这不是 bug，是策略限制。
- 唯一可靠解法：加
muted属性，即<audio autoplay muted src="intro.mp3"></audio> - 即使你后续用 JS 调用
play()，也必须发生在用户手势事件内（如click、touchstart），否则会报错DOMException: play() failed because the user didn't interact with the document first - 想实现“点击按钮后自动播下一首”？得确保调用
play()的函数是在事件回调里，而不是定时器或异步加载完成时直接调
怎么让音频在后台持续播放（比如离开标签页也不中断）？
浏览器默认会在标签页失焦或系统休眠时暂停音频，这是节电和用户体验设计，无法靠 HTML 属性绕过。
立即学习“前端免费学习笔记（深入）”；
- 没有纯 HTML 方案；JS 侧需监听
visibilitychange事件，在页面重新可见时手动恢复播放 - 注意：Safari iOS 对后台音频极其严格，即使监听了事件，也可能被系统强制终止 AudioContext 或挂起
<audio> - 真正需要后台播放（如播客 App），应使用 PWA + Background Fetch + Service Worker 组合，但音频仍需用户首次主动播放一次来解锁音频上下文
controls 属性，其次就是对 autoplay 的误判——它从来就不是“放着就能响”的开关。 
