HTML5 <audio> 实现自动循环播放和音量管理需遵循浏览器策略：loop仅在自然结束时触发，volume须在loadedmetadata后设置，muted优先级高于volume，autoplay必须配合muted且依赖用户手势。
HTML5 <audio> 实现自动循环播放和音量管理，关键不在“加个属性就完事”，而在于理解浏览器策略、生命周期时机和属性优先级。很多问题（比如 loop 不生效、volume 设了没反应）其实都源于这些细节没对上。
loop 属性的正确用法与常见误区
loop 是布尔型 HTML 属性，只需写 loop 即可启用循环，无需赋值。但它只在音频自然播放结束（ended 事件触发）时才重新开始，不会覆盖手动暂停或出错中断的状态。
- 确保音频资源能正常加载并播放完成——如果因格式不支持、路径错误或网络中断导致播放失败，loop 就不会触发
- 不要依赖 loop 实现“无限背景音效”：若需强控制（如中途跳转后仍保持循环），建议监听
ended事件后手动调用currentTime = 0; play(); - 移动端 Safari 对 loop 支持稳定，但部分安卓 WebView 可能忽略该属性；稳妥做法是 JS + 事件兜底
音量设置必须等元数据就绪
volume 是浮点数（0.0–1.0），但它不是随时可写的“开关”。在 loadedmetadata 事件触发前设置，多数浏览器会静默忽略。
- 推荐写法：监听
loadedmetadata，再赋值audio.volume = 0.7；此时duration也已可用 - 避免在
DOMContentLoaded或load事件里直接设 volume——元素可能还没解析完元数据 - 注意：设
volume = 0不等于静音，只是输出为零；真正影响用户感知的是muted状态
静音切换要兼顾状态与记忆
单独切 muted 很简单，但用户需要“点击静音→再点恢复原音量”，这就得存原始音量值。
立即学习“前端免费学习笔记（深入）”；
- 初始化时保存默认音量：
let lastVolume = audio.volume || 1; - 切换逻辑：若当前 muted，先取消 muted，再恢复 lastVolume；否则记录当前 volume 并 mute
-
muted优先级高于volume——即使 volume=1，muted=true 就听不到声音 - 移动端首次播放必须由用户手势触发，之后才能安全修改 volume/muted
自动播放 + 循环 + 静音的组合写法
想让音频一进页面就循环播放（比如引导音效），唯一可靠方式是 autoplay + muted + loop 三者共存，并确保有用户交互兜底。
- HTML 层：
<audio src="bg.mp3" autoplay muted loop></audio> - JS 层：监听
play事件确认成功；若被拦截（Promise reject），显示“点击播放”按钮并绑定play() - 不要省略 muted——现代浏览器几乎全部强制要求，否则 autoplay 直接失效
- preload 建议设为
metadata，减少首屏带宽压力，又不影响 loop 和音量初始化
