From 95386ed0dfbb9f692b8e4c019d9e2426a859c92c Mon Sep 17 00:00:00 2001
From: sanan4li <alisanan620@gmail.com>
Date: Tue, 20 Aug 2024 22:47:56 +0500
Subject: [PATCH 1/2] added callbacks for recoring functions

---
 README.md                   | 101 ++++++++++++++++++++++++++++++++++--
 src/hooks/audio-recorder.ts |  14 +++--
 2 files changed, 106 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 6652cee..ecf5287 100644
--- a/README.md
+++ b/README.md
@@ -60,21 +60,21 @@ function App() {
       <div>
         <button
           disabled={!(!recordingStatus || recordingStatus === "stopped")}
-          onClick={startRecording}
+          onClick={() => startRecording()}
         >
           Start
         </button>
 
         <button
           disabled={!(recordingStatus === "recording")}
-          onClick={pauseRecording}
+          onClick={() => pauseRecording()}
         >
           Pause
         </button>
 
         <button
           disabled={!(recordingStatus === "paused")}
-          onClick={resumeRecording}
+          onClick={() => resumeRecording()}
         >
           Resume
         </button>
@@ -83,7 +83,100 @@ function App() {
           disabled={
             !(recordingStatus === "recording" || recordingStatus === "paused")
           }
-          onClick={stopRecording}
+          onClick={() => stopRecording()}
+        >
+          Stop
+        </button>
+      </div>
+
+      <div>
+        <button
+          disabled={!(recordingStatus === "stopped")}
+          onClick={() => saveRecording()}
+        >
+          Save
+        </button>
+        <button
+          disabled={!(recordingStatus === "stopped")}
+          onClick={() => console.log(getBlob())}
+        >
+          Get Blob
+        </button>
+      </div>
+    </div>
+  );
+}
+```
+
+### `useAudioRecorder` hook with callbacks
+
+You can optionally pass callback function to `startRecording`, `stopRecording`, `pauseRecording`, and `resumeRecording` functions to handle the recording status changes. This will help to do some task when recording is started, stopped, paused or resumed.
+The common use case is when you want to get the blob when recording is stopped.
+
+Here is complete example with callbacks.
+
+```jsx
+import { useAudioRecorder } from "react-use-audio-recorder";
+
+function App() {
+  const {
+    recordingStatus,
+    recordingTime,
+    startRecording,
+    stopRecording,
+    pauseRecording,
+    resumeRecording,
+    getBlob,
+    saveRecording,
+  } = useAudioRecorder();
+
+  return (
+    <div>
+      <span>{`Recording Status - ${recordingStatus} - ${recordingTime} s`}</span>
+
+      <div>
+        <button
+          disabled={!(!recordingStatus || recordingStatus === "stopped")}
+          onClick={() =>
+            startRecording(() => {
+              console.log("recording started");
+            })
+          }
+        >
+          Start
+        </button>
+
+        <button
+          disabled={!(recordingStatus === "recording")}
+          onClick={() =>
+            pauseRecording(() => {
+              console.log("recording paused");
+            })
+          }
+        >
+          Pause
+        </button>
+
+        <button
+          disabled={!(recordingStatus === "paused")}
+          onClick={() =>
+            resumeRecording(() => {
+              console.log("recording resumed");
+            })
+          }
+        >
+          Resume
+        </button>
+
+        <button
+          disabled={
+            !(recordingStatus === "recording" || recordingStatus === "paused")
+          }
+          onClick={() =>
+            stopRecording(() => {
+              console.log("recording stopped");
+            })
+          }
         >
           Stop
         </button>
diff --git a/src/hooks/audio-recorder.ts b/src/hooks/audio-recorder.ts
index fe30c7d..32f615e 100644
--- a/src/hooks/audio-recorder.ts
+++ b/src/hooks/audio-recorder.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import RecordRTC, { StereoAudioRecorder, State } from "recordrtc";
+import RecordRTC, { State, StereoAudioRecorder } from "recordrtc";
 
 const useAudioRecorder = () => {
   const [recordingTime, setRecordingTime] = useState(0);
@@ -8,7 +8,7 @@ const useAudioRecorder = () => {
   const intervalRef = useRef<any>(null);
   const recorderRef = useRef<any>(null);
 
-  const startRecording = () => {
+  const startRecording = (callBack?: () => void) => {
     navigator.mediaDevices
       .getUserMedia({ audio: true })
       .then((microphone) => {
@@ -22,6 +22,7 @@ const useAudioRecorder = () => {
         recorderRef.current.startRecording();
         recorderRef.current.microphone = microphone;
         setRecordingStatus("recording");
+        callBack?.();
       })
       .catch((error) => {
         alert("Unable to access your microphone.");
@@ -29,22 +30,25 @@ const useAudioRecorder = () => {
       });
   };
 
-  const stopRecording = () => {
+  const stopRecording = (callBack?: () => void) => {
     recorderRef.current?.stopRecording(() => {
       recorderRef.current.microphone.stop();
       setRecordingStatus("stopped");
       setRecordingTime(0);
+      callBack?.();
     });
   };
 
-  const pauseRecording = () => {
+  const pauseRecording = (callBack?: () => void) => {
     recorderRef.current?.pauseRecording();
     setRecordingStatus("paused");
+    callBack?.();
   };
 
-  const resumeRecording = () => {
+  const resumeRecording = (callBack?: () => void) => {
     recorderRef.current?.resumeRecording();
     setRecordingStatus("recording");
+    callBack?.();
   };
 
   const saveRecording = (fileName?: string) => {

From 8f532366fcc7a1ab4fc4a351c407b37986b51ddd Mon Sep 17 00:00:00 2001
From: sanan4li <alisanan620@gmail.com>
Date: Wed, 21 Aug 2024 15:24:53 +0500
Subject: [PATCH 2/2] added requested changes

---
 README.md                   | 105 +++---------------------------------
 src/hooks/audio-recorder.ts |  19 ++++---
 2 files changed, 17 insertions(+), 107 deletions(-)

diff --git a/README.md b/README.md
index ecf5287..0f19a56 100644
--- a/README.md
+++ b/README.md
@@ -60,21 +60,21 @@ function App() {
       <div>
         <button
           disabled={!(!recordingStatus || recordingStatus === "stopped")}
-          onClick={() => startRecording()}
+          onClick={startRecording}
         >
           Start
         </button>
 
         <button
           disabled={!(recordingStatus === "recording")}
-          onClick={() => pauseRecording()}
+          onClick={pauseRecording}
         >
           Pause
         </button>
 
         <button
           disabled={!(recordingStatus === "paused")}
-          onClick={() => resumeRecording()}
+          onClick={resumeRecording}
         >
           Resume
         </button>
@@ -83,100 +83,11 @@ function App() {
           disabled={
             !(recordingStatus === "recording" || recordingStatus === "paused")
           }
-          onClick={() => stopRecording()}
-        >
-          Stop
-        </button>
-      </div>
-
-      <div>
-        <button
-          disabled={!(recordingStatus === "stopped")}
-          onClick={() => saveRecording()}
-        >
-          Save
-        </button>
-        <button
-          disabled={!(recordingStatus === "stopped")}
-          onClick={() => console.log(getBlob())}
-        >
-          Get Blob
-        </button>
-      </div>
-    </div>
-  );
-}
-```
-
-### `useAudioRecorder` hook with callbacks
-
-You can optionally pass callback function to `startRecording`, `stopRecording`, `pauseRecording`, and `resumeRecording` functions to handle the recording status changes. This will help to do some task when recording is started, stopped, paused or resumed.
-The common use case is when you want to get the blob when recording is stopped.
-
-Here is complete example with callbacks.
-
-```jsx
-import { useAudioRecorder } from "react-use-audio-recorder";
-
-function App() {
-  const {
-    recordingStatus,
-    recordingTime,
-    startRecording,
-    stopRecording,
-    pauseRecording,
-    resumeRecording,
-    getBlob,
-    saveRecording,
-  } = useAudioRecorder();
-
-  return (
-    <div>
-      <span>{`Recording Status - ${recordingStatus} - ${recordingTime} s`}</span>
-
-      <div>
-        <button
-          disabled={!(!recordingStatus || recordingStatus === "stopped")}
-          onClick={() =>
-            startRecording(() => {
-              console.log("recording started");
-            })
-          }
-        >
-          Start
-        </button>
-
-        <button
-          disabled={!(recordingStatus === "recording")}
-          onClick={() =>
-            pauseRecording(() => {
-              console.log("recording paused");
-            })
-          }
-        >
-          Pause
-        </button>
-
-        <button
-          disabled={!(recordingStatus === "paused")}
-          onClick={() =>
-            resumeRecording(() => {
-              console.log("recording resumed");
-            })
-          }
-        >
-          Resume
-        </button>
-
-        <button
-          disabled={
-            !(recordingStatus === "recording" || recordingStatus === "paused")
-          }
-          onClick={() =>
-            stopRecording(() => {
-              console.log("recording stopped");
-            })
-          }
+          onClick={() => {
+            stopRecording((blob) => {
+              console.log(blob);
+            });
+          }}
         >
           Stop
         </button>
diff --git a/src/hooks/audio-recorder.ts b/src/hooks/audio-recorder.ts
index 32f615e..8974c40 100644
--- a/src/hooks/audio-recorder.ts
+++ b/src/hooks/audio-recorder.ts
@@ -1,5 +1,5 @@
 import { useEffect, useRef, useState } from "react";
-import RecordRTC, { State, StereoAudioRecorder } from "recordrtc";
+import RecordRTC, { StereoAudioRecorder, State } from "recordrtc";
 
 const useAudioRecorder = () => {
   const [recordingTime, setRecordingTime] = useState(0);
@@ -8,7 +8,7 @@ const useAudioRecorder = () => {
   const intervalRef = useRef<any>(null);
   const recorderRef = useRef<any>(null);
 
-  const startRecording = (callBack?: () => void) => {
+  const startRecording = () => {
     navigator.mediaDevices
       .getUserMedia({ audio: true })
       .then((microphone) => {
@@ -22,7 +22,6 @@ const useAudioRecorder = () => {
         recorderRef.current.startRecording();
         recorderRef.current.microphone = microphone;
         setRecordingStatus("recording");
-        callBack?.();
       })
       .catch((error) => {
         alert("Unable to access your microphone.");
@@ -30,25 +29,25 @@ const useAudioRecorder = () => {
       });
   };
 
-  const stopRecording = (callBack?: () => void) => {
-    recorderRef.current?.stopRecording(() => {
+  const stopRecording = (
+    callBack?: (blob?: Blob, blobURL?: string) => void
+  ) => {
+    recorderRef.current?.stopRecording((blobURL: string) => {
       recorderRef.current.microphone.stop();
       setRecordingStatus("stopped");
       setRecordingTime(0);
-      callBack?.();
+      callBack?.(recorderRef.current?.getBlob(), blobURL);
     });
   };
 
-  const pauseRecording = (callBack?: () => void) => {
+  const pauseRecording = () => {
     recorderRef.current?.pauseRecording();
     setRecordingStatus("paused");
-    callBack?.();
   };
 
-  const resumeRecording = (callBack?: () => void) => {
+  const resumeRecording = () => {
     recorderRef.current?.resumeRecording();
     setRecordingStatus("recording");
-    callBack?.();
   };
 
   const saveRecording = (fileName?: string) => {