An audio recording helper for React. Provides a component and a hook to help with audio recording.
npm install react-audio-voice-recorder
AudioRecorder Component (Usage)
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} />
</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.
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:
Calling this method would result in the recording to start. Sets isRecording
to true
This results in a recording in progress being stopped and the resulting audio being present in recordingBlob
. Sets isRecording
to false
Calling this method would pause the recording if it is currently running or resume if it is paused. Toggles the value isPaused
This is the recording blob that is created after stopRecording
has been called
A boolean value that represents whether a recording is currently in progress
A boolean value that represents whether a recording in progress is paused
Number of seconds that the recording has gone on. This is updated every second
import { useAudioRecorder } from 'react-audio-voice-recorder';
// ...
// ...
const {
startRecording,
stopRecording,
togglePauseResume,
recordingBlob,
isRecording,
isPaused,
recordingTime,
} = useAudioRecorder();
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 (Working example)
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>
)
}