实现html5音频无缝切换需用双audio实例交叉淡入淡出，配合web audio api精确控制音量与时机，并预加载下一首以避免延迟。
要实现 HTML5 音频背景音乐的无缝切换，核心不是靠单个 <audio></audio> 元素硬切，而是利用两个音频实例交叉淡入淡出（crossfade），配合时间精度控制与状态同步。关键在于避免静音间隙、消除点击声、保持播放节奏连贯。
双 Audio 实例 + 交叉淡出淡入
浏览器对单个 <audio></audio> 的 src 切换存在加载延迟和重置行为，必然中断。正确做法是维护两个 Audio 对象（例如 playerA 和 playerB），始终保证至少一个在播放中：
- 当前主播放器（如 playerA）在切换前开始线性降低音量（fade out），持续约 300–800ms
- 新音频（playerB）提前加载完成（监听
loadeddata或canplay），在 fade out 过程中开始播放并同步提升音量（fade in） - 当 playerA 音量降至 0 时，暂停它并重置（
pause(); currentTime = 0），为下次复用准备 - playerB 成为新的主播放器，整个过程无静音段
使用 Web Audio API 精确控制音量与时机
HTML5 原生 volume 属性调节粗糙、有平台差异，且无法平滑插值。推荐用 Web Audio API 封装播放器，获得毫秒级控制能力：
- 每个
AudioContext创建两个MediaElementAudioSourceNode，分别连接 playerA/playerB - 用
GainNode控制每路增益，调用gain.setValueAtTime()+gain.linearRampToValueAtTime()实现无跳变音量过渡 - 所有时间点（如 fade 开始/结束）基于
audioContext.currentTime调度，不受页面卡顿影响
预加载 + 缓存策略减少切换延迟
无缝的前提是“新曲目已就绪”。不能等用户触发切换才开始加载：
- 在当前曲目播放到末尾前 5–10 秒，预先
new Audio(url).load()下一首（或用fetch+createMediaStreamSource预解码） - 对常用 BGM 建立 URL →
AudioBuffer缓存池（适合短循环音效），长背景乐仍用<audio></audio>流式加载更省内存 - 监听
networkState === NETWORK_LOADED和readyState >= HAVE_FUTURE_DATA双重判断是否真正可播
处理循环、暂停与用户交互干扰
真实场景中需应对播放中断（如用户切页、系统休眠、手动暂停）：
- 切换前检查
playerA.paused === false，若已暂停则直接替换，不执行 fade - 启用
loop = true时，在timeupdate中监控currentTime接近duration（误差 - 页面 visibilitychange 时暂停所有 audio，恢复时按最后状态 resume + 补齐 fade 进度（用
performance.now()校准流逝时间）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
