audio标签的loop属性不能实现无缝循环。因解码器和播放管线限制，多数浏览器存在毫秒级静音间隙，MP3尤甚；loop是布尔属性，仅检测是否存在；移动端Safari兼容性差，需用ended事件手动load()+play()并确保用户交互。
audio 标签的 loop 属性是否真能无缝循环？
不能。原生 <audio loop> 在大多数浏览器中存在毫秒级静音间隙，尤其在 MP3 文件上更明显——这不是配置错误，而是解码器和播放管线的固有行为。
实操建议：
- 若只需简单重复（如背景音效、提示音），直接用
<audio loop>即可，无需额外处理 - 对“无缝”有硬性要求（如环境白噪音、循环音乐伴奏），必须放弃
loop属性，改用ended事件手动load()+play() - MP3 文件比 WAV / OGG 更容易出现卡顿，优先尝试
.ogg格式测试
为什么 loop="true" 或 loop="loop" 都不生效？
loop 是布尔属性，只认是否存在，不认值。写成 loop="true" 或 loop="loop" 不报错，但语义上等同于没写——浏览器只检查属性是否被声明。
正确写法只有两种：
立即学习“前端免费学习笔记（深入）”；
<audio src="bg.mp3" loop></audio>-
<audio src="bg.mp3" loop=""></audio>（空字符串也合法）
常见错误：在 JS 中误用 audio.loop = "true"，应改为 audio.loop = true（布尔值，不是字符串）。
用 JavaScript 控制循环时，load() 和 play() 的调用时机很关键
直接在 ended 事件里 play() 容易失败，尤其在移动端或静音策略下，浏览器会拒绝自动播放。
安全做法：
- 监听
ended后先调用load()，再立即调用play() - 确保用户已与页面交互过（如点击过按钮），否则
play()可能抛出NotAllowedError - 加
try/catch捕获异常，并 fallback 到重置currentTime = 0后再试一次
示例片段：
audio.addEventListener('ended', () => {
audio.load();
audio.play().catch(e => {
audio.currentTime = 0;
audio.play();
});
});
移动端 Safari 对 loop 的兼容性特别差
iOS 15+ 之前，Safari 完全忽略 loop 属性；iOS 15.4 起支持但仍有间隙；iOS 16.4 后才基本稳定。且自动播放限制极严——即使加了 loop，首次加载也不会自动播。
应对策略：
- 必须依赖用户手势触发首次
play()（哪怕只是点一下空白区域） - 不要在
DOMContentLoaded或load事件里调用play() - 考虑用
AudioContext+ Web Audio API 实现真正无缝循环（但需自行解码音频数据，复杂度高）
实际项目中，如果只面向现代桌面端，loop 属性够用；一旦涉及 iOS，就得默认按“不可靠”来设计逻辑。
