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.

This package was created to address issues encountered when recording audio in React applications, specifically missing duration data in the downloaded files, which affected audio player timelines, and compatibility problems with iOS devices.

Features

• AudioRecorder React component
• useAudioRecorder hook

Install

npm i react-use-audio-recorder

Quick Start

AudioRecorder React component

make sure to import styles from react-use-audio-recorder/dist/index.css

1import AudioRecorder from "react-use-audio-recorder";
2import "react-use-audio-recorder/dist/index.css";
3
4function App() {
5  return <AudioRecorder onStop={(blob) => console.log(blob)} />;
6}

To customize the styles, you can download the CSS file, make modifications, and apply the changes.

useAudioRecorder hook

1import { useAudioRecorder } from "react-use-audio-recorder";
2
3function App() {
4  const {
5    recordingStatus,
6    recordingTime,
7    startRecording,
8    stopRecording,
9    pauseRecording,
10    resumeRecording,
11    getBlob,
12    saveRecording,
13  } = useAudioRecorder();
14
15  return (
16    <div>
17      <span>{`Recording Status - ${recordingStatus} - ${recordingTime} s`}</span>
18
19      <div>
20        <button
21          disabled={!(!recordingStatus || recordingStatus === "stopped")}
22          onClick={startRecording}
23        >
24          Start
25        </button>
26
27        <button
28          disabled={!(recordingStatus === "recording")}
29          onClick={pauseRecording}
30        >
31          Pause
32        </button>
33
34        <button
35          disabled={!(recordingStatus === "paused")}
36          onClick={resumeRecording}
37        >
38          Resume
39        </button>
40
41        <button
42          disabled={
43            !(recordingStatus === "recording" || recordingStatus === "paused")
44          }
45          onClick={() => {
46            stopRecording((blob) => {
47              console.log(blob);
48            });
49          }}
50        >
51          Stop
52        </button>
53      </div>
54
55      <div>
56        <button
57          disabled={!(recordingStatus === "stopped")}
58          onClick={() => saveRecording()}
59        >
60          Save
61        </button>
62        <button
63          disabled={!(recordingStatus === "stopped")}
64          onClick={() => console.log(getBlob())}
65        >
66          Get Blob
67        </button>
68      </div>
69    </div>
70  );
71}

If you find this useful, please give it a star. Thanks! ⭐