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.

> 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

$3

> make sure to import styles from 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 (

);
}
``

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