loop属性无法实现真正无缝循环，因浏览器解码器和播放管线限制；正确写法为html中写loop或loop=""，js中设audio.loop = true；mp3存在50–200ms间隙，推荐改用.ogg格式并用提供多格式。
loop 属性不能实现真正无缝循环。这是浏览器解码器和播放管线的固有行为，不是配置错误，也不是你漏写了什么属性。
为什么 loop="true" 或 JS 里写 audio.loop = "true" 都不生效？
因为 loop 是布尔属性，只看“是否存在”，不认值。写成 loop="true"、loop="loop" 甚至 loop="false"，浏览器都当它没写——等价于没加 loop。
正确写法只有两种：loop（直接写属性名），或 loop=""（空字符串）。JS 中必须赋布尔值：audio.loop = true，而不是字符串。
- 常见错误：在事件回调里反复执行
audio.play()却忘了设audio.loop = true，结果每次播完就停 - 另一个坑：用
audio.load()重载后，loop状态不会丢失，但若之前被 JS 手动设为false，就得再设回来
MP3 循环卡顿明显？优先换 .ogg 格式
MP3 文件头信息不统一、解码器对循环点识别不准，导致多数浏览器（尤其是 Chrome 和 Safari）在末尾出现 50–200ms 静音间隙。这不是 bug，是格式限制。
.ogg（Vorbis 编码）和 .wav 在循环衔接上更可靠，实测间隙常低于 10ms。如果音频是自己生成或可重新导出，务必优先试 .ogg。
- 不要只提供 MP3：用
<source></source>声明多格式，让浏览器自动选最合适的 - 避免用在线转码工具草率转换：有些会破坏原始循环点，建议用 Audacity 或 FFmpeg 重导出，并勾选“无间隙导出”选项
- 小体积背景音效（.wav 反而更省事，免解码延迟
移动端 iOS Safari 的 loop 为什么经常“失灵”？
iOS Safari 的 loop 仅在“正常播放结束”时触发。如果网络波动导致缓冲中断、用户快速切页、或音频还没完全解码就到末尾，它就不会重播——这属于设计行为，不是兼容性 bug。
真正能跨平台兜底的方式，是监听 ended 事件手动跳转 + 播放：
audio.addEventListener('ended', () => {
if (audio.readyState >= audio.HAVE_FUTURE_DATA) {
audio.currentTime = 0;
audio.play().catch(e => console.warn('循环触发被阻止:', e));
}
});
- 必须检查
readyState，否则currentTime = 0可能失败并静默忽略 - 不要在
ended里无条件play()：iOS 要求用户手势后才能解禁声音，首次播放必须由 click/touch 触发 - 如果音频已
muted，这个方案在所有平台都稳定；若需取消静音，得在用户交互后单独调用audio.muted = false
真正难的从来不是加个 loop 属性，而是判断这个循环是否“被浏览器允许开始”——从首次播放触发时机，到格式选择，再到移动端异常中断的容错，每一步都可能断在你看不见的地方。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
