Live Audio Visualise continuously increasing the tab in brower's Memory utlisation.

[theguidingstar]

Example Usage :

{mediaRecorder && ( <LiveAudioVisualizer mediaRecorder={mediaRecorder} height={100} width={300} barWidth={5} gap={3} /> )}

When starting to visualise it uses 250mb (Project files) as soon as we start to visualise it. Within 2-3 mins, the memory usuage of tab shoots upto 2gb.

anyways it can be addressed or handled? Something i am doing wrong here?

[sharjeelaqdusrb]

We are facing the same issue, Chrome Tab Memory goes up to 1.6 GB in 10 minutes, Anyone has got any solution for this ?

[zmays]

I don't think the logic here handles when going from paused to closed (i.e if you pause and then stop the stream, audio context won't get closed)

if (mediaRecorder.state === "recording") {
      analyser?.getByteFrequencyData(data);
      processFrequencyData(data);
      requestAnimationFrame(report);
    } else if (mediaRecorder.state === "paused") {
      processFrequencyData(data);
    } else if (
      mediaRecorder.state === "inactive" &&
      context.state !== "closed"
    ) {
      context.close();
    }
  }, [analyser, context.state]);

report get's called only when in recording state, and with the recursive requestAnimation callback:

 useEffect(() => {
    if (analyser && mediaRecorder.state === "recording") {
      report();
    }
  }, [analyser, mediaRecorder.state]);

[zmays]

In our repo we were mounting and unmounting this component in a user flow, and found that the context.close call never happens FYI, we updated the effect to close on unmount/re-run of the hook:

	useEffect(() => {
		if (!mediaRecorder.stream) return;

		const audioContext = new AudioContext();
		const analyserNode = audioContext.createAnalyser();
		analyserNode.fftSize = fftSize;
		analyserNode.minDecibels = minDecibels;
		analyserNode.maxDecibels = maxDecibels;
		analyserNode.smoothingTimeConstant = smoothingTimeConstant;
		const source = audioContext.createMediaStreamSource(mediaRecorder.stream);
		source.connect(analyserNode);

		setAnalyser(analyserNode);

		return () => {
			setAnalyser(undefined);
			void audioContext?.close();
		};
		// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [mediaRecorder.stream]);

[zmays]

pr for it here: https://github.com/samhirtarif/react-audio-visualize/pull/23

[samhirtarif]

Really sorry for missing this and thank you for pointing this out. I've left a review on the PR and hoping to get this fix merged soon! 🙏🏻

[samhirtarif]

#23 and #27 add cleans ups for the audio context, analyser node and source node which should ideally fix any memory leaks.