HTML中audio循环播放 HTML中audio标签loop属性设置

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，就得默认按“不可靠”来设计逻辑。