audio-react-recorder

Audio / Voice Recorder w/ Audio Wave for React using the Web Audio API

Install

npm install --save audio-react-recorder

DEMO

AudioReactRecorder 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
deviceId	string	default	the device id of the audio input device

License

MIT © noobieprogrammer

Buy me a coffee or just follow me

• My Blog
• Twitter
• Youtube

Modifications on this fork by

Liam Erickson

@ericksonl

Sam Platt

@platt-sam

Joshua Yoon

@GeneralNotSteve