From 35ab6017e75404cfc6a87601d2bb3e1b3b53506f Mon Sep 17 00:00:00 2001
From: Stephen Arra <sa@apricothealth.ai>
Date: Tue, 30 Jul 2024 10:05:04 -0500
Subject: [PATCH 1/3] cleanup audio context on unmount

---
 src/LiveAudioVisualizer/LiveAudioVisualizer.tsx | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
index d5c6d32..da3b567 100644
--- a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
+++ b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
@@ -107,9 +107,7 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
   }, [mediaRecorder.stream]);
 
   useEffect(() => {
-    if (analyser && mediaRecorder.state === "recording") {
       report();
-    }
   }, [analyser, mediaRecorder.state]);
 
   const report = useCallback(() => {
@@ -123,13 +121,14 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
       requestAnimationFrame(report);
     } else if (mediaRecorder.state === "paused") {
       processFrequencyData(data);
-    } else if (
-      mediaRecorder.state === "inactive" &&
-      context.state !== "closed"
-    ) {
+    }
+  }, [analyser]);
+
+  useEffect(() => {
+    if (context.state !== "closed") {
       context.close();
     }
-  }, [analyser, context.state]);
+  }, []);
 
   const processFrequencyData = (data: Uint8Array): void => {
     if (!canvasRef.current) return;

From 8ef6be81b9baf368b766df187c69975bad932050 Mon Sep 17 00:00:00 2001
From: Stephen Arra <sa@apricothealth.ai>
Date: Tue, 30 Jul 2024 20:53:25 -0500
Subject: [PATCH 2/3] minimize change

---
 src/LiveAudioVisualizer/LiveAudioVisualizer.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
index da3b567..3d7def2 100644
--- a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
+++ b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
@@ -107,7 +107,9 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
   }, [mediaRecorder.stream]);
 
   useEffect(() => {
+    if (analyser && mediaRecorder.state === "recording") {
       report();
+    }
   }, [analyser, mediaRecorder.state]);
 
   const report = useCallback(() => {
@@ -121,8 +123,13 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
       requestAnimationFrame(report);
     } else if (mediaRecorder.state === "paused") {
       processFrequencyData(data);
+    } else if (
+      mediaRecorder.state === "inactive" &&
+      context.state !== "closed"
+    ) {
+      context.close();
     }
-  }, [analyser]);
+  }, [analyser, context.state]);
 
   useEffect(() => {
     if (context.state !== "closed") {

From d033fa54ada13536bf5a633d7742782d0a7f6627 Mon Sep 17 00:00:00 2001
From: Stephen Arra <arraworld@gmail.com>
Date: Sat, 31 Aug 2024 07:49:52 -0500
Subject: [PATCH 3/3] cr

Co-authored-by: Samhir Tarif <89391183+samhirtarif@users.noreply.github.com>
---
 src/LiveAudioVisualizer/LiveAudioVisualizer.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
index 3d7def2..d12cd09 100644
--- a/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
+++ b/src/LiveAudioVisualizer/LiveAudioVisualizer.tsx
@@ -132,8 +132,10 @@ const LiveAudioVisualizer: (props: Props) => ReactElement = ({
   }, [analyser, context.state]);
 
   useEffect(() => {
-    if (context.state !== "closed") {
-      context.close();
+    return () => {
+      if (context.state !== "closed") {
+        context.close();
+      }
     }
   }, []);