Add props to allow download of recording blob (#36)

Author: samhirtarif

README.md

@@ -28,46 +28,37 @@ const addAudioElement = (blob) => {
 
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
-    <AudioRecorder onRecordingComplete={addAudioElement} />
+    <AudioRecorder 
+      onRecordingComplete={addAudioElement} 
+      downloadOnSavePress={true}
+      downloadFileExtension="mp3"
+    />
   </React.StrictMode>
 );
 ```
 
-The component also takes a `classes` as a prop, allowing you to modify the styles for the entire component or specific portions of it.
-
+| Props  | Description | Default | Optional |
+| :------------ |:--------------- |:--------------- | :--------------- |
+| **`onRecordingComplete`**  | A method that gets called when "Save recording" option is pressed | N/A | Yes |
+| **`downloadOnSavePress`**  | A `boolean` value that determines if the recording should be downloaded when "Save recording" option is pressed | `false` | Yes |
+| **`downloadFileExtension`**  | The file extension to be used for the downloaded file. Allowed values are `mp3`, `wav` and `webm` | `mp3` | Yes |
+| **`classes`** | This allows class names to be passed to modify the styles for the entire component or specific portions of it | N/A | Yes |
 ---
 ### **useAudioRecorder** hook
 
 If you prefer to build up your own UI but take advantage of the implementation provided by this package, you can use this hook instead of the component
 
 The hook returns the following:
 
-#### **`startRecording`**
-Calling this method would result in the recording to start. Sets `isRecording` to `true`
-
-
-#### **`stopRecording`**
-This results in a recording in progress being stopped and the resulting audio being present in `recordingBlob`. Sets `isRecording` to `false`
-
-
-#### **`togglePauseResume`**
-Calling this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused`
-
-
-#### **`recordingBlob`**
-This is the recording blob that is created after `stopRecording` has been called
-
-
-#### **`isRecording`**
-A boolean value that represents whether a recording is currently in progress
-
-
-#### **`isPaused`**
-A boolean value that represents whether a recording in progress is paused
-
-
-#### **`recordingTime`**
-Number of seconds that the recording has gone on. This is updated every second
+| Identifiers   | Description |
+| :------------ |:---------------|
+| **`startRecording`** | Invoking this method starts the recording. Sets `isRecording` to `true` |
+| **`stopRecording`** | Invoking this method stops the recording in progress and the resulting audio is made available in `recordingBlob`. Sets `isRecording` to `false` |
+| **`togglePauseResume`** | Invoking this method would pause the recording if it is currently running or resume if it is paused. Toggles the value `isPaused` |
+| **`recordingBlob`** | This is the recording blob that is created after `stopRecording` has been called |
+| **`isRecording`** | A boolean value that represents whether a recording is currently in progress |
+| **`isPaused`** | A boolean value that represents whether a recording in progress is paused |
+| **`recordingTime`** | Number of seconds that the recording has gone on. This is updated every second |
 
 ### Sample usage of hook
 

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "react-audio-voice-recorder",
   "private": false,
-  "version": "1.0.11",
+  "version": "1.1.0",
   "license": "MIT",
   "author": "",
   "repository": {

package.json

@@ -16,11 +16,15 @@ import "../styles/audio-recorder.css";
  * @prop `onRecordingComplete` Method that gets called when save recording option is clicked
  * @prop `recorderControls` Externally initilize hook and pass the returned object to this param, this gives your control over the component from outside the component.
  * https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
+ * @prop `downloadOnSavePress` If set to `true` the file gets downloaded when save recording is pressed. Defaults to `false`
+ * @prop `downloadFileExtension` File extension for the audio filed that gets downloaded. Defaults to `mp3`. Allowed values are `mp3`, `wav` and `webm`
  * @prop `classes` Is an object with attributes representing classes for different parts of the component
  */
 const AudioRecorder: (props: Props) => ReactElement = ({
   onRecordingComplete,
   recorderControls,
+  downloadOnSavePress = false,
+  downloadFileExtension = "mp3",
   classes,
 }: Props) => {
   const {
@@ -33,14 +37,30 @@ const AudioRecorder: (props: Props) => ReactElement = ({
     recordingTime,
     // eslint-disable-next-line react-hooks/rules-of-hooks
   } = recorderControls ?? useAudioRecorder();
+
   const [shouldSave, setShouldSave] = useState(false);
+
   const stopAudioRecorder: (save?: boolean) => void = (
     save: boolean = true
   ) => {
     setShouldSave(save);
     stopRecording();
   };
 
+  const downloadBlob = (blob: Blob): void => {
+    const downloadBlob = new Blob([blob], {
+      type: `audio/${downloadFileExtension}`,
+    });
+    const url = URL.createObjectURL(downloadBlob);
+
+    const a = document.createElement("a");
+    a.style.display = "none";
+    a.href = url;
+    a.download = `audio.${downloadFileExtension}`;
+    document.body.appendChild(a);
+    a.click();
+  };
+
   useEffect(() => {
     if (
       (shouldSave || recorderControls) &&
@@ -49,7 +69,12 @@ const AudioRecorder: (props: Props) => ReactElement = ({
     ) {
       onRecordingComplete(recordingBlob);
     }
+
+    if (downloadOnSavePress && recordingBlob != null) {
+      downloadBlob(recordingBlob);
+    }
   }, [recordingBlob]);
+
   return (
     <div
       className={`audio-recorder ${isRecording ? "recording" : ""} ${

src/components/AudioRecordingComponent.tsx

@@ -39,6 +39,14 @@ export interface Props {
    * @sample_usage https://github.com/samhirtarif/react-audio-recorder#combine-the-useaudiorecorder-hook-and-the-audiorecorder-component
    **/
   recorderControls?: recorderControls;
+  /**
+   * If set to `true` the file gets downloaded when save recording is pressed
+   **/
+  downloadOnSavePress?: boolean;
+  /**
+   * File extension for the audio filed that gets downloaded
+   **/
+  downloadFileExtension?: "mp3" | "wav" | "webm";
   /**
    * Custom classes to changes styles.
    **/