React component and hook for audio recording in your React applications
npm install react-use-audio-recorder
React-use-audio-recorder simplifies audio recording in your React applications. Built on top of the powerful RecordRTC.js library, this provides an easy-to-use interface for capturing, managing, and interacting with audio recordings.
AudioRecorder React component
useAudioRecorder hook
react-use-audio-recorder/dist/index.css
jsx
import AudioRecorder from "react-use-audio-recorder";
import "react-use-audio-recorder/dist/index.css";
function App() {
return console.log(blob)} />;
}
`
To customize the styles, you can download the CSS file, make modifications, and apply the changes.
$3
`jsx
import { useAudioRecorder } from "react-use-audio-recorder";
function App() {
const {
recordingStatus,
recordingTime,
startRecording,
stopRecording,
pauseRecording,
resumeRecording,
getBlob,
saveRecording,
} = useAudioRecorder();
return (
{Recording Status - ${recordingStatus} - ${recordingTime} s}
disabled={!(!recordingStatus || recordingStatus === "stopped")}
onClick={startRecording}
>
Start
disabled={!(recordingStatus === "recording")}
onClick={pauseRecording}
>
Pause
disabled={!(recordingStatus === "paused")}
onClick={resumeRecording}
>
Resume
disabled={
!(recordingStatus === "recording" || recordingStatus === "paused")
}
onClick={() => {
stopRecording((blob) => {
console.log(blob);
});
}}
>
Stop
disabled={!(recordingStatus === "stopped")}
onClick={() => saveRecording()}
>
Save
disabled={!(recordingStatus === "stopped")}
onClick={() => console.log(getBlob())}
>
Get Blob
);
}
``
If you find this useful, please give it a star. Thanks! ⭐