如何解决我可以中止整个组件吗?
我在我的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 举报,一经查实,本站将立刻删除。