如何消除React+Web Audio API节拍器按键到首音的播放延迟

架构老林

2026-8-27

问题根因

时间基准初始化错误：代码将记录上一拍时间的lastNote初始值设为0，但点击播放时AudioContext的currentTime已经不是0（上下文创建后就会持续计时），第一次执行定时器回调时计算的时间差不符合预期，无法立刻触发第一拍。
定时器调度逻辑缺陷：setInterval的触发间隔被设置为完整的一拍时长，40BPM时间隔长达1.5秒，第一次回调要等完整间隔周期才会判断是否需要发声，低BPM下延迟感会被放得极大，完全违背了Chris Wilson提出的「短间隔轮询+音频时间预调度」的核心实现思路。
生命周期逻辑错位：AudioContext在组件每次重渲染时都会被重新创建，播放/暂停的控制逻辑直接写在组件函数体中，会跟随渲染反复执行，打乱音频时序状态。
首拍无主动触发逻辑：点击播放后没有主动安排第一拍的发声，完全等定时器轮询到满足条件才触发，必然存在等待延迟。

修复方案

把音频上下文、定时器、时间状态存入useRef，将播放控制逻辑全部移入useEffect，仅跟随isPlaying状态变化执行，避免渲染过程反复修改音频状态、重建上下文。
点击播放启动节拍器时，立刻在当前音频时间触发第一拍，同时正确初始化时间基准，不要用0作为初始时间值。
把setInterval的轮询间隔改成25ms（通用预调度轮询间隔），每次轮询时提前安排未来100ms内的所有拍点，不要等拍点时间到了才触发发声。
停止播放时正确重置时间状态、清空定时器、挂起音频上下文。

修复后的完整代码如下：

import { useState, useEffect, useRef } from 'react';

function App() {
  const [isPlaying, setIsPlaying] = useState(false);
  const [bpm, setBpm] = useState(40);
  const acRef = useRef<AudioContext | null>(null);
  const engineRef = useRef<number | null>(null);
  const nextNoteRef = useRef(0);

  const oneBeatInSeconds = 60 / bpm;
  const scheduleAheadTime = 0.1; // 提前100ms调度拍点

  const sound = (ac: AudioContext, time: number, dur: number) => {
    const osc = ac.createOscillator();
    osc.connect(ac.destination);
    osc.start(time);
    osc.stop(time + dur);
  };

  const scheduler = () => {
    // 轮询时只要下一个拍点在预调度窗口内，就安排发声，同时推进下一拍时间
    while (nextNoteRef.current < acRef.current!.currentTime + scheduleAheadTime) {
      sound(acRef.current!, nextNoteRef.current, 0.025);
      nextNoteRef.current += oneBeatInSeconds;
    }
  };

  useEffect(() => {
    if (isPlaying) {
      // 第一次播放才初始化音频上下文
      if (!acRef.current) {
        acRef.current = new AudioContext();
      }
      acRef.current.resume();
      // 第一拍立刻触发，初始化时间基准
      nextNoteRef.current = acRef.current.currentTime;
      sound(acRef.current, nextNoteRef.current, 0.025);
      nextNoteRef.current += oneBeatInSeconds;
      // 短间隔轮询预调度
      engineRef.current = window.setInterval(scheduler, 25);
    } else {
      // 停止时清理状态
      if (engineRef.current) {
        clearInterval(engineRef.current);
        engineRef.current = null;
      }
      if (acRef.current) {
        acRef.current.suspend();
      }
    }

    return () => {
      if (engineRef.current) clearInterval(engineRef.current);
    }
  }, [isPlaying, oneBeatInSeconds]);

  const toggleButton = () => setIsPlaying(prev => !prev);

  return (
    <div className="App">
      <div className="Bpm">
        <label className="Bpm_label" htmlFor="Bpm_input">
          {bpm} BPM
        </label>
        <input 
          type="range" 
          min="40" 
          max="200" 
          step="1" 
          value={bpm} 
          onChange={(e) => setBpm(Number(e.target.value))}
        />
      </div>
      <button type="button" className="PlayButton" onClick={toggleButton}>
        {!isPlaying ? 'play' : 'stop'}
      </button>
    </div>
  );
}

export default App;

修复后点击播放会立刻发出第一拍，无论BPM设置为多少都不会出现启动延迟，同时拍点精度也会比原实现高很多，不会因为主线程短暂阻塞出现掉拍问题。

内容的提问来源于stack exchange，提问作者Marco Mazzai