HTML5 audio的loop属性仅为伪循环，存在100–500ms停顿；JS监听ended事件重置currentTime并play()可近似无缝，但需用户手势触发；高精度场景应使用Web Audio API；音频文件本身须首尾对齐，三者缺一不可。
audio 标签 loop 属性只能“伪循环”，不是真正无缝
HTML5 的 loop 属性会让音频播完后立刻重新加载并播放，中间存在明显停顿（尤其在 Safari 和部分 Android 浏览器），这不是音频文件本身的静音间隙，而是浏览器重置解码器、重定位时间点导致的毫秒级空白。实测常见为 100–500ms 黑场，对背景音乐、氛围音效、游戏音效等场景不可接受。
用 JavaScript 控制 currentTime + play() 实现近似无缝
核心思路是监听 ended 事件，在触发瞬间将 currentTime 设为 0 并调用 play()，绕过浏览器默认 reload 行为。但需注意几个关键约束：
-
ended事件触发时，音频已暂停，必须显式调用play()； - 现代浏览器要求用户手势触发后才能自动播放，首次循环前需有用户交互（如点击按钮）；
- 某些安卓 WebView 或旧版 iOS 会因缓冲未完成而报
DOMException: The element has no supported sources，建议加try...catch并 fallback 到原生loop； - 音频格式优先选
.ogg或.mp3，避免.wav（体积大、解码慢、易卡顿）。
示例片段：
<audio id="bgm" src="loop.mp3"></audio>
<script>
const audio = document.getElementById('bgm');
audio.addEventListener('ended', () => {
audio.currentTime = 0;
audio.play().catch(e => console.warn('auto-replay failed:', e));
});
// 首次播放需用户触发
document.body.addEventListener('click', () => audio.play(), { once: true });
</script>
Web Audio API 是唯一真正可控的无缝方案
当精度要求高（如节拍同步、实时音效叠加），必须放弃 <audio></audio> 标签，改用 AudioContext + AudioBufferSourceNode。它允许你预加载音频、手动控制播放位置、重复调度、甚至跨 buffer 拼接，彻底消除中断。
立即学习“前端免费学习笔记（深入）”；
- 需用
fetch()+audioContext.decodeAudioData()加载； - 循环靠
start(when, offset, duration)的offset和duration参数实现精确切片； - 不能直接设
loop = true后依赖浏览器——那仍可能有抖动；应主动用setTimeout或ScriptProcessorNode（已弃用）/AudioWorklet做时间对齐； - 注意 iOS Safari 对
AudioContext的限制：必须在用户手势回调中首次 resume。
MP3 文件本身要“首尾对齐”，否则再好的代码也白搭
很多所谓“无缝循环失败”，根源在音频源文件。MP3 编码存在帧头/填充数据，导出时若没做特殊处理，开头会有几毫秒静音或爆音，结尾也可能被截断。解决方法：
- 用 Audacity 打开音频 → 菜单「效果 → 循环效果」，勾选「无缝循环」并导出为 WAV；再转 MP3 时选 LAME 编码器并启用
--no-gap或「无间隙编码」选项； - 或直接用 FFmpeg 命令确保起始点干净：
ffmpeg -i in.mp3 -ss 0.01 -c copy out.mp3（跳过开头 10ms）； - 验证是否合格：用播放器逐帧拖动到结尾→开头，听是否有咔哒声或节奏断裂。
真正无缝循环是三者共同作用的结果：音频文件无瑕疵、API 层不依赖浏览器默认行为、JS 控制足够及时。少一个环节，就容易在某个设备上突然出现半秒空白。
