Fix download issues (#59)

* Add ffmpeg to convert webm to mp3/wav

* Add migration message

* Linting

Author: samhirtarif

.eslintrc.json

@@ -35,8 +35,13 @@
             }
         ],
         "react-hooks/exhaustive-deps": "off",
-        "@typescript-eslint/strict-boolean-expressions": "off"
-
+        "@typescript-eslint/strict-boolean-expressions": "off",
+        "@typescript-eslint/no-floating-promises": [
+            "error",
+            {
+                "ignoreVoid": true
+            }
+        ]
     },
     "ignorePatterns": ["src/main.tsx", "src/vite-env.d.ts"]
 }

README.md

@@ -7,6 +7,14 @@ An audio recording helper for React. Provides a component and a hook to help wit
 npm install react-audio-voice-recorder
 ```
 
+```sh
+yarn add react-audio-voice-recorder
+```
+
+## Migrating from v1 → v2
+### Breaking changes
+- In v2 the `AudioRecorder` prop `downloadFileExtension` no longer supports `mp3` and `wav` without the website using this package being [cross-origin isolated](https://web.dev/cross-origin-isolation-guide/). This change was made in order to fix [issue #54](https://github.com/samhirtarif/react-audio-recorder/issues/54) in v1.2.1
+
 ## Usage
 
 ### **AudioRecorder** Component ([Usage](https://stackblitz.com/edit/react-ts-cc5l47?file=App.tsx))
@@ -35,7 +43,7 @@ ReactDOM.createRoot(document.getElementById("root")).render(
         echoCancellation: true,
       }} 
       downloadOnSavePress={true}
-      downloadFileExtension="mp3"
+      downloadFileExtension="webm"
     />
   </React.StrictMode>
 );
@@ -47,9 +55,12 @@ ReactDOM.createRoot(document.getElementById("root")).render(
 | **`audioTrackConstraints`** | Takes a [subset](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackSettings#instance_properties_of_audio_tracks) of `MediaTrackConstraints` that apply to the audio track | N/A | Yes
 | **`onNotAllowedOrFound`** | This gets called when the `getUserMedia` promise is rejected. It takes the resultant `DOMException` as its parameter | 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 |
+| **`downloadFileExtension`**  | The file extension to be used for the downloaded file. Allowed values are `webm`, `mp3` and `wav`. In order to use `mp3` or `wav` please ensure that your website is [cross-origin isolated](https://web.dev/cross-origin-isolation-guide/). [Further reading](https://web.dev/coop-coep/) | `webm` | Yes |
 | **`showVisualizer`**  | Displays a waveform visualization for the audio when set to `true` | `false` | 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 |
+
+**NOTE: In order for `mp3` and `wav` downloading to work properly, your website needs to be [cross-origin isolated](https://web.dev/cross-origin-isolation-guide/). This is necessary because this package uses [FFmpeg](https://www.npmjs.com/package/@ffmpeg/ffmpeg) which internally uses `SharedArrayBuffer` that requires cross-origin isolation**
+
 ---
 ### **useAudioRecorder** hook