https://github.com/doppelgunner/audio-react-recorder
Audio / Voice Recorder for ReactJS using Web Audio API
https://github.com/doppelgunner/audio-react-recorder
Last synced: 8 months ago
JSON representation
Audio / Voice Recorder for ReactJS using Web Audio API
- Host: GitHub
- URL: https://github.com/doppelgunner/audio-react-recorder
- Owner: doppelgunner
- Created: 2020-10-18T11:59:28.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-06-18T08:05:33.000Z (over 2 years ago)
- Last Synced: 2025-04-24T00:01:59.279Z (9 months ago)
- Language: JavaScript
- Size: 504 KB
- Stars: 50
- Watchers: 1
- Forks: 42
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# audio-react-recorder
> Audio / Voice Recorder w/ Audio Wave for React using the [Web Audio API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API)
[](https://www.npmjs.com/package/audio-react-recorder) [](https://standardjs.com)
## Install
```bash
npm install --save audio-react-recorder
```
## DEMO
[AudioReactRecorder demo](https://doppelgunner.github.io/audio-react-recorder/)
## Usage
```jsx
import React, { Component } from 'react'
import AudioReactRecorder, { RecordState } from 'audio-react-recorder'
class App extends Component {
constructor(props) {
super(props)
this.state = {
recordState: null
}
}
start = () => {
this.setState({
recordState: RecordState.START
})
}
stop = () => {
this.setState({
recordState: RecordState.STOP
})
}
//audioData contains blob and blobUrl
onStop = (audioData) => {
console.log('audioData', audioData)
}
render() {
const { recordState } = this.state
return (
Start
Stop
)
}
}
```
## Supported props
| Property name | Type | Default | Description |
| --------------- | ------------- | ------------------ | ---------------------------------------------------- |
| state | string | RecordState.NONE | RecordState.(NONE,START,STOP,PAUSE) |
| type | string | audio/wav | MIME type of the audio file |
| backgroundColor | string | rgb(200, 200, 200) | Background color of the audio wave / canvas |
| foregroundColor | string | rgb(0, 0, 0) | Foreground color of the audio wave / canvas |
| canvasWidth | number,string | 500 | Canvas width (you can use css to make it responsive) |
| canvasHeight | number,string | 300 | canvas height |
## License
MIT © [noobieprogrammer](https://github.com/noobieprogrammer)
## Buy me a coffee or just follow me
[](https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=GCJGP8MTETUYU)
- [My Blog](https://noobieprogrammer.blogspot.com/)
- [Twitter](https://twitter.com/noobieprogrmmer)
- [Youtube](https://www.youtube.com/channel/UCpzMkMzGopmft5welUr8QZg)