我可以中止整个组件吗？

问题描述

我在我的react项目中使用realtime-bpm-analyzer（https://www.npmjs.com/package/realtime-bpm-analyzer）来实时计算bpm，该bpm附加到scriptProcessorNode（webaudioapi）上，并每隔X秒用BPM推送一次回调。我已经知道如何在自己的代码中清除间隔/超时，但是在卸载后可以取消整个组件吗？

更新26-10

程序包执行的工作很艰巨，并且没有正确的清理工作，它仍然在后台运行，是否有任何方法可以在不编辑程序包的情况下进行清理，或者可以通过webaudio取消下一个节点？

我提供一个最小的示例，如果您运行并记录一些东西，它将显示推测的bpm，那么您将停止记录并且它仍在后台运行（请参见浏览器控制台）

Media.js

import React,{ Fragment,useState,useEffect } from 'react';
import Analiser from './Analiser';

const Media = (props) => {
  const [mediaStream,setMediaStream] = useState(null);
  const getMic = async () => {
    const tempAudio = await navigator.mediaDevices.getUserMedia({
      audio: true,video: false,});
    setMediaStream(tempAudio);
  };

  useEffect(() => {
    console.log(mediaStream);
  },[mediaStream]);

  const stopMic = () => {
    mediaStream.getTracks().forEach((track) => track.stop());
    setMediaStream(null);
  };

  return (
    <Fragment>
      <div>
        <button onClick={getMic}>Get Mic</button>
        <button onClick={stopMic}>Stop Mic</button>
      </div>
      {mediaStream === null ? (
        <p>Nothing</p>
      ) : (
        <div>
          <p>Recording</p>
          <Analiser mediaStream={mediaStream} />
        </div>
      )}
    </Fragment>
  );
};
export default Media;

Analiser.js

import React,useEffect } from 'react';
import RealTimeBPMAnalyzer from 'realtime-bpm-analyzer';

const Analiser = ({ mediaStream }) => {
  const [mediaStreamCopy,setMediaStreamCopy] = useState(mediaStream);
  const audioContext = new (window.AudioContext || window.webkitAudioContext)();
  const source = audioContext.createMediaStreamSource(mediaStream);
  const scriptProcessorNode = audioContext.createScriptProcessor(4096,1,1);
  scriptProcessorNode.connect(audioContext.destination);
  source.connect(scriptProcessorNode);
  const onAudioProcess = new RealTimeBPMAnalyzer({
    scriptNode: {
      bufferSize: 4096 * 4,numberOfInputChannels: 1,numberOfOutputChannels: 1,},pushTime: 2000,pushCallback: (err,bpm) => {
      if (bpm) {
        console.log(bpm);
      }
    },});
  scriptProcessorNode.onaudioprocess = (e) => {
    onAudioProcess.analyze(e);
  };

  useEffect(() => {
    return () => {
      scriptProcessorNode.onAudioProcess = null;
      source.disconnect();
    };
  },[]);

  return <Fragment></Fragment>;
};
export default Analiser;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）