React useWavAudioRecorder

This is a simple React hook that uses extendable-media-recorder and extendable-media-recorder-wav-encoder under the hood to record raw WAV audio in a cross-browser compatible manner. It produces a Blob of the WAV audio.

Installation

Install as react-use-wav-audio-recorder from NPM:

1pnpm i react-use-wav-audio-recorder

Usage

1function MyComponent() {
2  const [audioBlob, setAudioBlob] = useState<Blob>();
3  
4  const {
5    // recording status flag
6    recording,
7    // a method to start the permission grant flow and start recording immediately afterwards
8    startRecording,
9    // a method to stop the recording
10    stopRecording
11    } = useWavAudioRecorder({
12    onComplete: async (blob) => {
13      // store the blob
14      setAudioBlob(setAudioUrl(window.URL.createObjectURL(blob)));
15      // ... or you can convert it to an object URL so it can be assigned to an <audio> element
16      // setAudioUrl(window.URL.createObjectURL(blob));
17      // ... or you can turn it to a File so you can upload it later etc.
18      // const file = new File([blob], 'recording.wav');
19    },
20    onNoPermissionError: () => {
21      // Called when recording permissions coudln't be obtained
22    },
23    onNotSupportedError: () => {
24      // Called when browser doesn't support recording
25    },
26    onOtherError: (e) => {
27      // Called on any other unexpected errors
28    },
29  });
30
31  // ...wire up the props to buttons etc.
32}

MP3 compression

There's also a utility hook called useWavToMp3Worker that uses @breezystack/lamejs to encode the WAV into an MP3 file using a Web Worker so that the main thread isn't blocked during the encoding process.

The bitrate of the MP3 is currently fixed to 256 Kbps but this will be made into a parametrized value in the future (feel free to open a PR!).

The worker is also set to terminate after 60 seconds (feel free to open a PR to parametrize this as well).

Web Worker issues with Vite

Vite has some issues with resolving the library-mode-bundled Web Workers. In order for the Web Worker to work properly during development you should add this to your vite.config.ts optimizeDeps.exclude field:

1export default defineConfig({
2  // ...
3  optimizeDeps: {
4    exclude: ['react-use-wav-audio-recorder']
5  }
6  // ...
7})
8

In production builds everything seems to be working just fine without the optimizeDeps.exclude entry.

Usage

1const {
2  // a method to start the encoding process, accepts a Blob
3  convert,
4  // a flag telling you if the process is in progress
5  inProgress
6} = useWavToMp3Worker({
7  onComplete: async (blob) => {
8    // here you grab the processed blob just like with the WAV recording and do whatever you please with it
9  },
10  onError: (e) => {
11    // this is called if any errors occur
12  },
13});

Credits

Here's a great article that was used for the initial implementation of the MP3 encoder and inspired the creation of these hooks.