audio标签中loop是布尔属性，仅需存在即可生效；但实际循环失效多因播放未启动、自动播放被拦截、资源未就绪或iOS Safari限制，推荐用ended事件+currentTime=0+play()手动实现稳定循环。
直接写 loop 就能循环，但多数“不循环”问题根本不是属性没配对，而是音频压根没播起来。
audio 标签里 loop 怎么写才有效
loop 是布尔属性，只看是否存在，不看值：
- ✅ 正确：
<audio loop>或<audio loop=""> - ❌ 无效：
<audio loop="true">、<audio loop="1">、<audio loop="loop">
写在标签里最稳妥；如果用 JS 动态设置，必须等 loadedmetadata 或 canplay 事件之后再赋值 audio.loop = true，否则部分浏览器（尤其是 Safari）会忽略。
为什么加了 loop 却只播一次
常见失效场景不是语法错，而是播放被拦截或资源未就绪：
立即学习“前端免费学习笔记（深入）”；
- 音频
src404 或路径错误，network 面板能看到请求失败，此时play()被静默拒绝 - 没用户交互（如点击/触摸）就调用
play()，Chrome/Firefox/iOS Safari 会阻止自动播放，loop失去作用对象 -
preload="none"且没手动load()，元数据未加载，loop无从生效 - 服务端响应头缺失
Accept-Ranges: bytes，Safari 无法正确 seek 到结尾，导致不触发循环
移动端 iOS Safari 的 loop 特别难搞
iOS Safari 对 loop 支持有隐性前提：
- 即使写了
loop，若首次播放不是由用户手势（如click、touchstart）触发，它大概率不循环 - 音频中途因网络卡顿中断，不会被识别为“正常播放结束”，因此不触发下一轮——这不是 bug，是设计行为
- MP3 格式比
.ogg更容易出现毫秒级静音间隙，无缝循环基本做不到
实操建议：iOS 上别依赖原生 loop，改用 ended 事件 + currentTime = 0 + play() 组合，并确保首次 play() 在用户点击回调中执行。
用 JavaScript 实现更可控的循环逻辑
绕过 loop 的不可靠性，监听 ended 并手动重播更稳定：
const audio = document.querySelector('audio');
audio.addEventListener('ended', () => {
if (audio.readyState >= audio.HAVE_FUTURE_DATA) {
audio.currentTime = 0;
audio.play().catch(e => console.warn('循环播放被阻止:', e));
}
});
这样做的好处：
- 可随时移除监听器关闭循环：
audio.removeEventListener('ended', handler) - 支持条件判断，比如只在
audio.dataset.loop === 'on'时重播 - 兼容所有现代浏览器，包括 iOS Safari
- 避免
autoplay+loop组合引发的静音/拦截问题
真正麻烦的从来不是怎么让音频循环，而是怎么让它在各种策略限制、网络波动、格式差异下，每次都能按你预期的方式循环——loop 只是个开关，按下之后转不转、转几圈、中间卡不卡，全得靠 JS 状态和时机来兜底。
