dinakar17 / react-microphone-recorder

https://react-microphone-recorder.vercel.app
MIT License
2 stars 1 forks source link

react-microphone-recorder

A convenient and powerful React hook and component for audio recording with customizable options and audio levels.

recorder-demo.gif

Live Demo

Deploy with Vercel

Table of Contents

Features

  1. useRecorder - A React hook that provides audio recording functionalities and exposes several useful properties.
  2. RecordAudio - A pre-built, beautifully designed React component for audio recording.
  3. Full TypeScript support.

Installation

Using npm:

npm install react-microphone-recorder

Or using yarn:

yarn add react-microphone-recorder

Usage

useRecorder

import { useRecorder } from 'react-microphone-recorder';

function MyComponent() {
  const { audioLevel, startRecording, pauseRecording, stopRecording, resetRecording, time, audioURL, recordingState, isRecording, audioFile } = useRecorder();

  // use these values in your component
}

Properties exposed by useRecorder:

RecordAudio

Simply import the RecordAudio component and all you need to do is pass the audioFile property to it. The component will take care of the rest.

import { RecordAudio } from 'react-microphone-recorder'

function MyComponent() {
  // ... get audioURL and audioFile ...
  const [audioFile, setAudioFile] = (useState < File) | (undefined > undefined)

  return <RecordAudio audioFile={audioFile} />
}

RecordAudio

Warning The RecordAudio component is styled using Tailwind CSS. It's important to note that the styles will only be correctly applied if your project is set up with Tailwind CSS. If your project does not use Tailwind CSS, the component will still function correctly, but it will not have the intended visual style. If you are not using Tailwind CSS and still want to use the RecordAudio component, you may need to manually adjust the styles to suit your project's styling solution. Alternatively, consider setting up Tailwind CSS in your project, which can be done following the instructions on the official Tailwind CSS documentation.

Note Use useRecorder if you want to build your own custom UI for audio recording.

Contributing

Contributions are welcome! Please open an issue or submit a pull request

License

This project is licensed under the MIT License - see the LICENSE file for details.