Voice Recoder React
React package for recording audio in the browser.
Inspired by https://github.com/sivaprakashDesingu/react-voice-recorder
This component decouples the UI from the recording functionality.
Demo
https://codesandbox.io/s/prod-star-sxndo
Props
The following props are passed by both hooks and Component
| Prop | Default | Description |
|---|---|---|
| time | {h:0 ,m:0 ,s:0} | An object that holds the duration of a recording |
| stop | n/a | a function that stops the media recorder |
| start | n/a | a function that starts the media recorder |
| pause | n/a | a function that pauses the media recorder |
| resume | n/a | a function that resumes the media recorder |
| reset | n/a | a function that discards all current recording data |
| data | {blob: Blob; url: string; chunks: Blob[];duration: Time;} | This object holds the data about the last recording |
| paused | false | indicates if the current recording is paused |
| recording | false | indicates if there is an ongoing recording |
| props | '{}' | This is unique only to the component usage. It accepts additional props to pass to the sub component |
| hasRecorder | true | If you try to record and there are no media devices found this will change to false |
Please refer to the demo to understand better.
Hooks Usage
Please refer to the demo for a working example
Recoder component
The Recorder Component is better for usage with nextJS although you still need to import it with next/dynamic
Please refer to the demo for a working example
Contributing
If you have any issues or questions please feel free to open an issue or discussion on github
You can also Fork and open a PR on the component if you have any particular features you'd like to see.
There's also example code available on github