HTML5 标签最简结构需含 controls 属性和至少一个 ，并提供 src 与 type；自动播放须满足用户交互、muted 静音或浏览器授权；移动端需显式手势触发 play()，且应始终带 controls 并设计降级方案。
HTML5 的 标签能直接嵌入音频，但“能用”不等于“好用”——浏览器兼容性、自动播放限制、移动端行为差异，才是实际开发中最常卡住的地方。
怎么写最基础的
最简结构只需 包裹一个 src 和 type：
要点说明：
-
controls属性必须加，否则默认无界面（连播放按钮都没有） - 多个
- MP3 在所有主流浏览器都支持，
.ogg主要用于 Firefox 旧版本或需要免版权场景 - 结尾的提示文字不是可选的“装饰”，它是当所有
为什么加了 autoplay 却不自动播放
这是当前最普遍的困惑。现代浏览器（Chrome、Safari、Edge、Firefox）全部默认禁止有声音的自动播放，除非满足以下任一条件：
立即学习“前端免费学习笔记（深入）”；
- 用户已与页面有过交互（比如点过任意位置）后再调用
play() - 音频被设为静音：
autoplay muted（注意：必须同时写两个属性） - 用户在浏览器设置中手动允许了该站点的自动播放（极少数）
所以这段代码大概率失效：
而这段才可能生效：
纯 HTML 只能做基础控制；真要实现播放逻辑（如切换歌曲、监听进度、错误重试），必须靠 JavaScript。
关键属性与对应 JS 行为：
-
preload="auto"：提示浏览器预加载音频（但实际是否加载由浏览器决定，移动端常忽略） -
loop：循环播放，JS 中对应audio.loop = true -
muted：静音，JS 中改audio.muted = true可绕过自动播放限制 -
volume：取值 0.0–1.0，但部分安卓 WebView 不支持动态调节 - 监听播放状态用事件：
play、pause、ended、error（注意：出错时error事件只触发一次，且audio.error是个对象，需查audio.error.code）
移动端和微信内置浏览器的特别坑
iOS Safari 和微信 Android（X5 内核）对 有额外限制：
- iOS 上，
play()必须在用户手势回调中调用（onclick、ontouchstart），不能放在setTimeout或异步请求回调里 - 微信中，部分安卓机型会把
当作“背景音乐”接管，导致页面切到后台后继续播，但无法用 JS 控制暂停 - 没有
controls的在 iOS 上完全不可见、不可控，哪怕 JS 调用play()也无效 - 推荐方案：始终带
controls，首次播放用显式按钮触发，后续再用 JS 管理；避免依赖自动播放做核心功能
真正难的不是写对标签，而是判断当前环境是否允许你执行想要的操作——每次加音频前，先想清楚：这个播放动作，是用户主动触发的吗？有没有备选静音方案？移动端出错时有没有 fallback 提示？
