React集成Web Audio API遇问题：延迟按钮样式不更新

核心问题分析 #

1. 按钮颜色不更新：React组件仅在state/props变化时触发重渲染，echoDelay.isApplied()的变化属于外部实例状态，不会触发React的更新机制，所以UI不会同步变化。
2. 用state导致音频异常：组件重渲染时，顶层声明的audioContext、echoDelay会被重新创建，原来的音频节点连接被销毁，新实例状态和之前脱节，导致延迟效果失效。

解决步骤 #

1. 用useRef持久化音频实例：useRef存储的对象不会随组件重渲染重新创建，能保持音频上下文和延迟效果实例的连续性。
2. 用state跟踪UI状态：通过delayIsOn state同步延迟开关状态，触发UI重渲染，同时在state变化时同步更新音频实例的状态。
3. 延迟初始化音频资源：避免在组件顶层创建AudioContext，改用useEffect初始化，确保仅执行一次。

修改后的完整代码 #

import React, { useState, useEffect, useRef } from "react";
import { useSelector, useDispatch } from "react-redux";
import { hide_fmSynth } from "./fmSynthSlice";
import "./fmSynth.css";

const VoiceComponent = () => {
    const dispatch = useDispatch();
    const { display } = useSelector((state) => state.fmSynth);
    const [microphoneStarted, setMicrophoneStarted] = useState(false);
    const [delayIsOn, setDelayIsOn] = useState(false);

    // 用useRef持久化音频相关实例
    const audioContextRef = useRef(null);
    const primaryGainControlRef = useRef(null);
    const echoDelayRef = useRef(null);

    // 初始化音频资源，仅执行一次
    useEffect(() => {
        const audioContext = new AudioContext();
        const primaryGainControl = audioContext.createGain();
        primaryGainControl.gain.setValueAtTime(0.35, audioContext.currentTime);
        const echoDelay = createEchoDelayEffect(audioContext);
        
        audioContextRef.current = audioContext;
        primaryGainControlRef.current = primaryGainControl;
        echoDelayRef.current = echoDelay;

        primaryGainControl.connect(audioContext.destination);

        // 组件卸载时清理音频资源
        return () => {
            audioContext.close();
        };
    }, []);

    const voiceInput = async () => {
        const audioContext = audioContextRef.current;
        const primaryGainControl = primaryGainControlRef.current;
        const echoDelay = echoDelayRef.current;

        try {
            const stream = await navigator.mediaDevices.getUserMedia({
                audio: true,
            });
            const microphoneSource = audioContext.createMediaStreamSource(stream);
            echoDelay.placeBetween(microphoneSource, primaryGainControl);
        } catch (error) {
            console.error("麦克风出错", error);
        }
    };

    function createEchoDelayEffect(ctx) {
        const delay = ctx.createDelay(1);
        const dryNode = ctx.createGain();
        const wetNode = ctx.createGain();
        const mixer = ctx.createGain();
        const filter = ctx.createBiquadFilter();

        delay.delayTime.value = 0.75;
        dryNode.gain.value = 1;
        wetNode.gain.value = 0;
        filter.frequency.value = 1100;
        filter.type = "highpass";

        return {
            apply: function () {
                wetNode.gain.setValueAtTime(0.75, ctx.currentTime);
            },
            discard: function () {
                wetNode.gain.setValueAtTime(0, ctx.currentTime);
            },
            isApplied: function () {
                return wetNode.gain.value > 0;
            },
            placeBetween: function (inputNode, outputNode) {
                inputNode.connect(delay);
                delay.connect(wetNode);
                wetNode.connect(filter);
                filter.connect(delay);

                inputNode.connect(dryNode);
                dryNode.connect(mixer);
                wetNode.connect(mixer);
                mixer.connect(outputNode);
            },
        };
    }

    // 监听麦克风状态变化，初始化输入
    useEffect(() => {
        if (microphoneStarted) {
            voiceInput();
        }
    }, [microphoneStarted]);

    // 监听delayIsOn状态，同步音频效果
    useEffect(() => {
        const echoDelay = echoDelayRef.current;
        if (!echoDelay) return;

        if (delayIsOn) {
            echoDelay.apply();
        } else {
            echoDelay.discard();
        }
    }, [delayIsOn]);

    if (display) {
        return (
            <section className="pad">
                <button onClick={() => dispatch(hide_fmSynth())}>
                    x
                </button>
                <button onClick={() => setMicrophoneStarted(!microphoneStarted)}>
                    voice
                </button>
                <button
                    id="delay"
                    onClick={() => setDelayIsOn(!delayIsOn)}
                    style={delayIsOn ? { color: "red" } : {}}
                >
                    delay
                </button>
            </section>
        );
    } else {
        return null;
    }
};

export default VoiceComponent;

关键修改点说明 #

• useRef存储音频实例：确保音频上下文、延迟效果实例在组件生命周期内唯一，不会因重渲染被销毁重建。
• 分离UI状态与音频状态：用delayIsOn state控制UI渲染，通过useEffect监听state变化来同步音频效果的开关，保证两者状态一致。
• 组件卸载清理：关闭AudioContext，避免内存泄漏。

内容的提问来源于stack exchange，提问作者shmen-shmen