2

我正在运行这个 wavesurfer 麦克风实例，this.stop.stream每当我在启动麦克风后尝试停止麦克风时，我就会遇到一个名为 is not a function 的问题。

这个麦克风不记录任何东西——它只是在可视化。但是在 chrome 中，麦克风一直保持打开状态，直到重新加载。这对用户来说并不有趣。和米。

我找到了为什么会在这里发生 => https://wavesurfer-js.org/api/file/src/plugin/microphone.js.html#lineNumber199

启动麦克风后调用的所有方法都带有“this”。

我还不够先进，无法找出我怎么可能阻止那个麦克风。

有人能帮助我吗？

提前致谢

  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: 10,
        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);
    }
  }, []);

  const stopMicrophone = waveSurfer && waveSurfer.microphone.stopDevice.bind(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();
    setIsRecording(false);
    setIsProcessing(true);
    setShowWavesurfer(false);
  }

  return (
    <AudioInterfaceWrapper>
      {noAudioYet && (
        <>
          <NoAudioYet systemMessage={'record a fiddle.'} />
        </>
      )}
      {!noAudioYet && (
        <>
          <Mic record={isRecording} onStop={handleStop} onData={handleData} mimeType="audio/webm" />
          {isProcessing && <LoadingLineLong />}
        </>
      )}
      <Waveform showWavesurfer={showWavesurfer} ref={waveformRef} />
      {isRecording && <StopButton onClick={stopRecording} />}
      {!isRecording && !isProcessing && <RecordButton onClick={startRecording} />}
    </AudioInterfaceWrapper>
  );
}
4

0 回答 0