HTML5 Web Audio API 的时钟同步与音频节拍控制关键在于以 AudioContext.currentTime 为唯一高精度时间基准，所有调度、跳转、对齐均围绕其展开；它基于硬件时钟、单调递增、毫秒级稳定，需用 source.start(when, offset) 进行绝对时间调度，并在用户交互后调用 context.resume() 激活；多音轨同步须共享同一 scheduledTime，支持 seekOffset 精准定位；可视化分析需通过 AnalyserNode 获取原始数据，时间判断仍依赖 context.currentTime；移动端须由用户手势触发上下文初始化与 resume()，预加载推荐 fetch + decodeAudioData。
HTML5 Web Audio API 的时钟同步与音频节拍控制，关键在于放弃依赖 JavaScript 定时器或媒体元素 currentTime，转而以 AudioContext.currentTime 为唯一高精度时间基准，所有调度、跳转、对齐都围绕它展开。
用 AudioContext.currentTime 做绝对时间调度
AudioContext.currentTime 是基于音频硬件时钟的单调递增时间戳（单位：秒），毫秒级稳定，不受 JS 事件循环卡顿影响。它不是“已播放多久”，而是“从上下文创建起过了多少秒”。
- 所有音轨启动必须用
source.start(when, offset)，其中when是一个绝对时间点，比如context.currentTime + 0.02（预留 20ms 缓冲） - 避免写
source.start()或source.start(Date.now() / 1000)——前者易漂移，后者完全脱离音频时钟 - 上下文需在用户交互后调用
context.resume()激活，否则 start() 会被静音策略拦截
多音轨严格同步的实现方式
多个音轨（如鼓组、贝斯、主唱）要真正同步，不能各自 start()，而应共享同一计划时间点。
- 记录用户点击播放时刻的
context.currentTime，加上小偏移（如 +0.01）作为全局scheduledTime - 对每个 AudioBufferSourceNode 调用
start(scheduledTime, seekOffset)，seekOffset支持从任意位置开始（例如进度条拖动后） - 若某轨因解码延迟滞后，可暂停该节点，再用
start(context.currentTime, currentPlaybackPosition)即时追上主时间线
节拍可视化与实时分析同步
做频谱图、鼓点闪烁、波形动画等，仅靠 <audio>.currentTime 不够精确，也拿不到原始数据。
立即学习“前端免费学习笔记（深入）”；
- 用
context.createMediaElementSource(audio)将 HTML 音频接入 Web Audio 图，再接AnalyserNode - 在
requestAnimationFrame中读取分析数据（如analyser.getFloatFrequencyData()），但时间判断仍用context.currentTime - 节拍检测逻辑（如峰值识别）输出的时间戳，也要映射到
context.currentTime坐标系，才能驱动视觉动画精准对齐
移动端与兼容性注意事项
iOS Safari 和部分安卓浏览器对音频上下文限制更严，需主动适配。
- AudioContext 必须由用户手势（click/tap）触发初始化和 resume()，不能在页面加载时直接 new
- 预加载音频 buffer 推荐用
fetch().then(res => res.arrayBuffer()).then(context.decodeAudioData)，比 <audio> 标签更可控 - 监听
audio.addEventListener('seeked', () => { /* 同步视觉状态 */ })，避免拖动后动画滞后
