@altimus/audio-react-recorder
v1.0.7
Published
Audio / Voice Recorder for React
Downloads
203
Maintainers
Readme
audio-react-recorder
Audio / Voice Recorder w/ Audio Wave for React using the Web Audio API
Install
npm install --save audio-react-recorder
DEMO
Usage
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 (
<div>
<AudioReactRecorder state={recordState} onStop={this.onStop} />
<button onClick={this.start}>Start</button>
<button onClick={this.stop}>Stop</button>
</div>
)
}
}
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