WebAudio API调整Gain导致音频中断问题求助

我开发了下面这个React组件LiveAudioProcessor，目标是通过WebAudio API根据传入的rpm值，实现多个音频源之间的平滑交叉淡入淡出切换。但现在遇到的问题是，每当rpm值变化时，所有音频都会完全停止，而不是仅将无关轨道静音。我试过用disconnect移除连接、启停旧音频源等方法，问题依然存在，希望能实现音频源间的平滑过渡。

const LiveAudioProcessor: React.FC<LiveAudioProcessorProps> = ({ audioFiles, rpm }) => {
  const [isStarted, setIsStarted] = useState(false);
  const audioSourcesRef = useRef<Map<AudioFile, { source: AudioBufferSourceNode, gain: GainNode }>>(new Map());
  const audioBuffersRef = useRef<Map<AudioFile, AudioBuffer>>(new Map());

  const startAudio = async () => {
    audioContext.resume();
  
    for (const file of audioFiles) {
      if (!audioSourcesRef.current.has(file)) {
        const response = await fetch(file.url);
        const arrayBuffer = await response.arrayBuffer();
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
        audioBuffersRef.current.set(file, audioBuffer);
  
        const source = audioContext.createBufferSource();
        source.buffer = audioBuffer;
        source.loop = true;
        const gain = audioContext.createGain();
        source.connect(gain);
        gain.connect(audioContext.destination);
        audioSourcesRef.current.set(file, { source, gain });
  
        source.start();
      }
    }
  
    setIsStarted(true);
    playAudio();
  };

    const playAudio = () => {
        if (!audioContext) return;
      
        const sortedAudioFiles = [...audioFiles].sort((a, b) => a.rpm - b.rpm);
        const lowerFile = sortedAudioFiles.find((file, i) => file.rpm <= rpm && sortedAudioFiles[i + 1]?.rpm > rpm);
        if (!lowerFile) {
          // Handle the case where lowerFile is undefined
          return;
        }
        const lowerFileIndex = sortedAudioFiles.findIndex((file) => file === lowerFile);
        const upperFile = sortedAudioFiles[lowerFileIndex + 1];
      
        if (!upperFile) {
          // Handle the case where upperFile is undefined
          return;
        }
      
        const crossfadeLevel = (rpm - lowerFile.rpm) / (upperFile.rpm - lowerFile.rpm);
      
        // Adjust the gain of the audio sources
        audioSourcesRef.current.forEach(({ source, gain }, file) => {
            
          if (file === lowerFile) {
            gain.gain.value = 1 - crossfadeLevel;
          } else if (file === upperFile) {
            gain.gain.value = crossfadeLevel;
          } else {
            gain.gain.value = 0.001;
          }
        });
      };

  useEffect(() => {
    console.log('RPM changed:', rpm);
    if (isStarted) {
      playAudio();
    } else {
        console.log('Audio not started');
    }
  }, [rpm, isStarted]);

  useEffect(() => {
    return () => {
      audioSourcesRef.current.forEach(({ source }) => source.stop());
    };
  }, []);


  return (
    <>
        <button onClick={startAudio} disabled={isStarted}>
        Start Audio
        </button>
    </>

  );
};

问题根源与修复方案 #

1. 未正确初始化AudioContext

代码中直接使用audioContext但未声明持久化实例，会导致运行时错误触发音频停止。需要用useRef创建全局唯一的AudioContext：

const audioContextRef = useRef<AudioContext | null>(null);

// 在startAudio中初始化
const startAudio = async () => {
  if (!audioContextRef.current) {
    audioContextRef.current = new AudioContext();
  }
  audioContextRef.current.resume();
  // ... 后续代码
};

// 修改playAudio中的上下文判断
const playAudio = () => {
  const audioContext = audioContextRef.current;
  if (!audioContext) return;
  // ... 后续代码
};

2. 直接设置gain值导致突变（甚至音频中断）

直接赋值gain.gain.value会造成音量突变，还可能触发音频上下文异常。改用WebAudio的线性过渡方法实现平滑淡入淡出：

const playAudio = () => {
  const audioContext = audioContextRef.current;
  if (!audioContext) return;

  const sortedAudioFiles = [...audioFiles].sort((a, b) => a.rpm - b.rpm);
  const lowerFile = sortedAudioFiles.find((file, i) => file.rpm <= rpm && sortedAudioFiles[i + 1]?.rpm > rpm);
  if (!lowerFile) return;
  const lowerFileIndex = sortedAudioFiles.findIndex((file) => file === lowerFile);
  const upperFile = sortedAudioFiles[lowerFileIndex + 1];
  if (!upperFile) return;

  const crossfadeLevel = (rpm - lowerFile.rpm) / (upperFile.rpm - lowerFile.rpm);
  const currentTime = audioContext.currentTime;
  const transitionDuration = 0.1; // 100ms平滑过渡，可按需调整

  audioSourcesRef.current.forEach(({ gain }, file) => {
    let targetGain = 0;
    if (file === lowerFile) {
      targetGain = 1 - crossfadeLevel;
    } else if (file === upperFile) {
      targetGain = crossfadeLevel;
    }
    // 取消之前的调度，应用新的平滑过渡
    gain.gain.cancelScheduledValues(currentTime);
    gain.gain.linearRampToValueAtTime(targetGain, currentTime + transitionDuration);
  });
};

3. 无关轨道音量设置不合理

原代码设置0.001仍会残留微小音量，直接设为0即可，通过平滑过渡避免突兀感。

4. 组件卸载时的清理逻辑优化

确保AudioContext和音频源都被正确销毁：

useEffect(() => {
  return () => {
    audioSourcesRef.current.forEach(({ source }) => {
      try {
        source.stop();
      } catch (e) {
        // 忽略已停止的源的错误
      }
    });
    if (audioContextRef.current) {
      audioContextRef.current.close();
    }
  };
}, []);

修复后的完整组件 #

const LiveAudioProcessor: React.FC<LiveAudioProcessorProps> = ({ audioFiles, rpm }) => {
  const [isStarted, setIsStarted] = useState(false);
  const audioContextRef = useRef<AudioContext | null>(null);
  const audioSourcesRef = useRef<Map<AudioFile, { source: AudioBufferSourceNode, gain: GainNode }>>(new Map());
  const audioBuffersRef = useRef<Map<AudioFile, AudioBuffer>>(new Map());

  const startAudio = async () => {
    if (!audioContextRef.current) {
      audioContextRef.current = new AudioContext();
    }
    const audioContext = audioContextRef.current;
    audioContext.resume();
  
    for (const file of audioFiles) {
      if (!audioSourcesRef.current.has(file)) {
        const response = await fetch(file.url);
        const arrayBuffer = await response.arrayBuffer();
        const audioBuffer = await audioContext.decodeAudioData(arrayBuffer);
        audioBuffersRef.current.set(file, audioBuffer);
  
        const source = audioContext.createBufferSource();
        source.buffer = audioBuffer;
        source.loop = true;
        const gain = audioContext.createGain();
        // 初始音量设为0，避免未选中的音频突然出声
        gain.gain.value = 0;
        source.connect(gain);
        gain.connect(audioContext.destination);
        audioSourcesRef.current.set(file, { source, gain });
  
        source.start();
      }
    }
  
    setIsStarted(true);
    playAudio();
  };

  const playAudio = () => {
    const audioContext = audioContextRef.current;
    if (!audioContext) return;
  
    const sortedAudioFiles = [...audioFiles].sort((a, b) => a.rpm - b.rpm);
    const lowerFile = sortedAudioFiles.find((file, i) => file.rpm <= rpm && sortedAudioFiles[i + 1]?.rpm > rpm);
    if (!lowerFile) return;
    const lowerFileIndex = sortedAudioFiles.findIndex((file) => file === lowerFile);
    const upperFile = sortedAudioFiles[lowerFileIndex + 1];
    if (!upperFile) return;
  
    const crossfadeLevel = (rpm - lowerFile.rpm) / (upperFile.rpm - lowerFile.rpm);
    const currentTime = audioContext.currentTime;
    const transitionDuration = 0.1;
  
    audioSourcesRef.current.forEach(({ gain }, file) => {
      let targetGain = 0;
      if (file === lowerFile) {
        targetGain = 1 - crossfadeLevel;
      } else if (file === upperFile) {
        targetGain = crossfadeLevel;
      }
      gain.gain.cancelScheduledValues(currentTime);
      gain.gain.linearRampToValueAtTime(targetGain, currentTime + transitionDuration);
    });
  };

  useEffect(() => {
    if (isStarted) {
      playAudio();
    }
  }, [rpm, isStarted]);

  useEffect(() => {
    return () => {
      audioSourcesRef.current.forEach(({ source }) => {
        try {
          source.stop();
        } catch (e) {}
      });
      if (audioContextRef.current) {
        audioContextRef.current.close();
      }
    };
  }, []);

  return (
    <>
      <button onClick={startAudio} disabled={isStarted}>
        Start Audio
      </button>
    </>
  );
};

内容的提问来源于stack exchange，提问作者Oliver Jackson