如何在 HTML 音频标签中利用 loop 属性实现背景音乐的无缝循环播放-html教程-PHP中文网

html audio的loop属性无法实现真正无缝循环，因其存在毫秒级停顿；mp3末尾静音、编码帧边界及浏览器实现差异导致咔哒声；web audio api手动衔接或预处理音频文件是可行方案。

如何在 html 音频标签中利用 loop 属性实现背景音乐的无缝循环播放

loop 属性本身无法实现真正无缝循环

HTML <audio></audio> 的 loop 属性只是让浏览器在播放结束时跳回开头重新开始，中间存在毫秒级停顿（尤其在 MP3 文件中明显），根本做不到音频波形衔接的“无缝”。这不是你代码写错了，而是浏览器原生行为限制——它不处理解码缓冲区拼接，也不消除末尾静音或编码帧边界导致的咔哒声。

MP3 文件普遍在末尾有 10–200ms 填充静音或不完整帧，loop 会暴露这段空白
Ogg/Vorbis 和 AAC（.m4a）表现稍好，但依然依赖文件是否经过专业无缝导出
Chrome 和 Safari 对 loop 的实现细节不同，同一文件在两者间可能一个有咔哒、一个无感

真正可行的无缝方案：用 Web Audio API 手动衔接

绕过 <audio></audio> 标签的局限，用 AudioContext 加载并循环播放 ArrayBuffer 数据，控制两个 BufferSourceNode 交替触发，在前一个即将结束时启动下一个，消除间隙。核心是监听 onended 并立即调度下一段。

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须使用 decodeAudioData() 预加载音频，不能直接用 src；否则无法精确控制起始/结束时间
关键技巧：用 start(startTime) 而非 start()，把第二个播放节点的开始时间设为第一个的 duration（单位秒）
避免内存泄漏：每次 onended 触发后，显式调用 node.disconnect()

示例片段：

context.decodeAudioData(buffer).then(audioBuffer => {
  function playLoop() {
    const source = context.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(context.destination);
    source.start();
    source.onended = () => playLoop(); // 立即递归启动下一轮
  }
  playLoop();
});