React-audio-voice-recorder NPM

react-audio-voice-recorder

An audio recording helper for React. Provides a component and a hook to help with audio recording.

Installation

npm install react-audio-voice-recorder

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. This change was made in order to fix issue #54 in v1.2.1

Usage

AudioRecorder Component (See it in action)

You can use an out-of-the-box component that takes onRecordingComplete method as a prop and calls it when you save the recording

import React from "react";
import ReactDOM from "react-dom/client";
import { AudioRecorder } from 'react-audio-voice-recorder';

const addAudioElement = (blob) => {
  const url = URL.createObjectURL(blob);
  const audio = document.createElement("audio");
  audio.src = url;
  audio.controls = true;
  document.body.appendChild(audio);
};

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <AudioRecorder 
      onRecordingComplete={addAudioElement}
      audioTrackConstraints={{
        noiseSuppression: true,
        echoCancellation: true,
      }} 
      downloadOnSavePress={true}
      downloadFileExtension="webm"
    />
  </React.StrictMode>
);

Props	Description	Default	Optional
`onRecordingComplete`	A method that gets called when "Save recording" option is pressed	N/A	Yes
`audioTrackConstraints`	Takes a subset 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 `webm`, `mp3` and `wav`. In order to use `mp3` or `wav` please ensure that your website is cross-origin isolated. Further reading	`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. This is necessary because this package uses FFmpeg which internally uses SharedArrayBuffer that requires cross-origin isolation

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

Params	Description	Optional
`audioTrackConstraints`	Takes a subset of `MediaTrackConstraints` that apply to the audio track	Yes
`onNotAllowedOrFound`	This gets called when the `getUserMedia` promise is rejected. It takes the resultant `DOMException` as its parameter	Yes

The hook returns the following:

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
`mediaRecorder`	The current mediaRecorder in use. Can be undefined in case recording is not in progress

Sample usage of hook

  import { useAudioRecorder } from 'react-audio-voice-recorder';
  // ...
  // ...
  const {
    startRecording,
    stopRecording,
    togglePauseResume,
    recordingBlob,
    isRecording,
    isPaused,
    recordingTime,
    mediaRecorder
  } = useAudioRecorder();

  useEffect(() => {
    if (!recordingBlob) return;

    // recordingBlob will be present at this point after 'stopRecording' has been called
  }, [recordingBlob])

Combine the `useAudioRecorder` hook and the `AudioRecorder` component

This is for scenarios where you would wish to control the AudioRecorder component from outside the component. You can call the useAudioRecorder and pass the object it returns to the recorderControls of the AudioRecorder. This would enable you to control the AudioRecorder component from outside the component as well

Sample usage (See it in action)

import { AudioRecorder, useAudioRecorder } from 'react-audio-voice-recorder';

const ExampleComponent = () => {
  const recorderControls = useAudioRecorder()
  const addAudioElement = (blob) => {
    const url = URL.createObjectURL(blob);
    const audio = document.createElement("audio");
    audio.src = url;
    audio.controls = true;
    document.body.appendChild(audio);
  };

  return (
    <div>
      <AudioRecorder 
        onRecordingComplete={(blob) => addAudioElement(blob)}
        recorderControls={recorderControls}
      />
      <button onClick={recorderControls.stopRecording}>Stop recording</button>
    </div>
  )
}

NOTE: When using both AudioRecorder and useAudioRecorder in combination, the audioTrackConstraints and onNotAllowedOrFound should be provided in the useAudioRecorder hook