html5音频无缝衔接需三方面协同：音频文件首尾对齐、javascript精准控制播放逻辑、格式与环境适配；浏览器原生loop存在100–500ms停顿，须用ended事件重置currenttime并容错，高精度场景应采用web audio api。
HTML5 音频的“无缝衔接”不是加个 loop 就能实现的。浏览器原生循环存在 100–500ms 停顿，尤其在 Safari 和部分安卓 WebView 中明显。真正可用的方案需同时满足三方面：音频文件首尾对齐、播放逻辑精准控制、格式与环境适配。
音频文件本身必须首尾对齐
再好的代码也救不了有间隙的音频。MP3 文件开头和结尾不能有静音段或电平突变，否则即使 currentTime 归零重播，也会听到“咔”一声或空白。建议用 Audacity 或 Adobe Audition 检查波形，裁掉首尾毫秒级静音，并导出时选择“无淡入淡出”。导出后可用 ffprobe 验证：
-
ffprobe -v quiet -show_entries format=duration -of default audio.mp3确认总时长 - 用音频编辑软件听最后一帧是否自然收尾，避免硬切导致相位不连续
用 JavaScript 实现近似无缝循环
监听 ended 事件并手动重置播放是最常用且兼容性最好的方式。关键点在于：首次播放必须由用户手势触发，且要捕获可能的 Promise 拒绝：
- 给
<audio></audio>标签设id="bgm"，不依赖autoplay - 绑定一次点击事件（如页面任意位置），调用
audio.play()启动首次播放 - 在
ended回调中执行audio.currentTime = 0再audio.play()，并用.catch()容错 - 避免在
loadstart或canplay里提前调用play()，此时未获用户授权会失败
高精度场景必须用 Web Audio API
节拍同步、游戏音效叠加、实时混音等需求下，<audio></audio> 标签无法满足亚毫秒级精度。Web Audio API 允许预加载解码、精确调度播放起始时间、跨 buffer 拼接：
- 用
fetch()加载音频，再经audioContext.decodeAudioData()转为AudioBuffer - 创建
AudioBufferSourceNode，调用start(when, offset, duration)控制循环切片 - iOS Safari 要求首次
audioContext.resume()必须在用户点击回调内执行 - 不要设
bufferSource.loop = true，那仍走浏览器底层逻辑，抖动照旧
多音频顺序播放的衔接要点
多个文件依次播放时，“无缝”指前一个结束瞬间启动下一个，中间不能有停顿。核心是避免重复初始化开销：
- 所有音频元素提前声明在 HTML 中，或用
new Audio(src)预实例化 - 当前音频的
ended事件里立即设置下一音频的src（若尚未加载）并调用play() - 对长音频，可监听
canplay再触发播放，避免play()被拒绝；短音效建议直接预加载到内存 - 不推荐靠
setTimeout估算时长来切换，误差大且不可靠
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
