音频同步应以audio.currentTime为唯一时间源，在requestAnimationFrame中读取并校正，seek后需监听seeked事件重置状态；高精度需求须用Web Audio API配合context.currentTime；移动端需用户手势触发播放并防御性处理加载间隙。
音频同步靠 currentTime 控制动画帧，不是靠定时器硬等
HTML5 动画（如 requestAnimationFrame）和 的播放节奏天然不同步：前者依赖屏幕刷新率（约 60fps），后者依赖音频解码与硬件缓冲。直接用 setTimeout 或固定帧率驱动动画去“匹配”音频时间点，极易漂移——尤其在音频 seek、暂停恢复或低端设备上。
正确做法是：动画逻辑每帧主动读取 audio.currentTime，再据此计算当前应显示的视觉状态。
- 永远以
audio.currentTime为唯一时间源，不维护独立计时器 - 避免在
audio.ontimeupdate中驱动关键动画——该事件不保证每帧触发，且有延迟（通常 200–500ms） - 若需高精度（如节拍可视化），在
requestAnimationFrame回调里读audio.currentTime，并用audio.playbackRate校正（如变速播放）
seek 后动画跳变必须手动重置状态
用户拖动进度条（audio.currentTime = x）后，requestAnimationFrame 循环不会自动感知“时间突变”，动画会继续从旧位置渐进，导致音画脱节几秒。必须监听 seeked 事件，并立刻同步视觉状态。
- 监听
audio.addEventListener('seeked', () => { updateVisualAt(audio.currentTime); }) -
updateVisualAt()需跳过插值过程，直接将动画元素设为对应时间点的目标状态（例如 SVG 路径d属性、transform值、canvas 绘图坐标） - 注意：不要在
seeking阶段更新——此时audio.currentTime还未稳定，可能读到旧值
Web Audio API 比
如果要做鼓点检测、频率响应动画（如音乐可视化），仅靠 元素的 currentTime 不够——它无法提供实时音频数据。必须升级到 Web Audio API，用 AnalyserNode 获取时域/频域数据，并通过 audioContext.currentTime 对齐时间线。
- 创建
AudioContext后，用context.createMediaElementSource(audio)接入已有 - 分析节点输出（如
analyser.getFloatFrequencyData()）应在requestAnimationFrame中读取，但时间基准仍用context.currentTime（比audio.currentTime更精确） - 注意兼容性：
AudioContext在 iOS Safari 需用户手势触发才能启动，不能 onload 就初始化
const context = new (window.AudioContext || window.webkitAudioContext)();
const analyser = context.createAnalyser();
analyser.fftSize = 256;
const source = context.createMediaElementSource(audio);
source.connect(analyser);
analyser.connect(context.destination);
function animate() {
requestAnimationFrame(animate);
const now = context.currentTime; // 精确时间戳
const freqData = new Float32Array(analyser.frequencyBinCount);
analyser.getFloatFrequencyData(freqData);
drawSpectrum(freqData, now); // 用 now 校准动画相位
}
移动端自动播放限制会让同步逻辑失效
iOS 和 Android Chrome 强制要求音频必须由用户手势触发（click、touchstart）才能播放。若动画在 audio.play() 成功前就开始跑，currentTime 一直是 0，所有基于时间的计算都会错乱。
立即学习“前端免费学习笔记（深入）”；
- 动画循环（
requestAnimationFrame）必须在audio.play().then(() => {...})内启动，或监听playing事件 - 首次播放失败时（
play()返回 Promise reject），不要静默忽略——需提示用户点击屏幕继续 - 避免在
autoplay属性上赌运气，它在多数移动浏览器中默认被禁用
currentTime 可能为 0 或 NaN，必须做防御性判断。 
