Wavesurfer麦克风无法停止或如何停止所有用户

Question

我遇到了waveurfer。我正在使用它来可视化麦克风输入，并且很难取消订阅。

Wavesurfer有a couple of ways to stop the microphone，但是它们都不起作用。 我总是得到this.stream.stop is not a function

例如，如果我放 waveSurfer.microphone.stop()插入我的handleStop函数。

为什么waveSurfer.microphone.start（）和stop（）不起作用？

有人可以帮忙吗？

export default function InitialAudioRecording({ handleStop }) {
  const [noAudioYet, setNoAudioYet] = React.useState(true);
  const [isRecording, setIsRecording] = React.useState(false);
  const [isProcessing, setIsProcessing] = React.useState(false);
  const [waveSurfer, setWaveSurfer] = React.useState();
  const [showWavesurfer, setShowWavesurfer] = React.useState(false);

  const waveformRef = React.useRef();

  React.useEffect(() => {
    if (waveformRef.current) {
      const themeGradient = getThemeGradient();
      const wavesurfer = WaveSurfer.create({
        container: waveformRef.current,
        barWidth: 5,
        barHeight: 2,
        cursorWidth: 0,
        waveColor: themeGradient,
        hideScrollbar: true,
        autoCenter: false,
        responsive: true,
        interact: false,
        width: 100,
        height: 350,
        maxCanvasWidth: 2000,
        fillParent: true,
        plugins: [MicrophonePlugin.create()]
      });
      wavesurfer.microphone.on('deviceReady', function(stream) {
        console.log('Device ready!', stream);
      });
      wavesurfer.microphone.on('deviceError', function(code) {
        console.warn('Device error: ' + code);
      });
      setWaveSurfer(wavesurfer);
    }
  }, []);

  function startRecording() {
    waveSurfer.microphone.start();
    setShowWavesurfer(true);
    setNoAudioYet(false);
    setIsRecording(true);
  }

  function handleData(recordedBlob) {
    console.log('chunk of real-time data is: ', recordedBlob);
  }

 function stopRecording() {
    waveSurfer.microphone.stop();
    setShowWavesurfer(false);
    setIsRecording(false);
    setIsProcessing(true);
  }