arr

audio-react-recorder

Audio / Voice Recorder for ReactJS using Web Audio API

Showing:

Popularity

Downloads/wk

721

GitHub Stars

12

Maintenance

Last Commit

1yr ago

Contributors

1

Package

Dependencies

1

Size (min+gzip)

2.8KB

License

MIT

Type Definitions

Tree-Shakeable

Yes?

Categories

Readme

audio-react-recorder

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

NPM JavaScript Style Guide

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 nameTypeDefaultDescription
statestringRecordState.NONERecordState.(NONE,START,STOP,PAUSE)
typestringaudio/wavMIME type of the audio file
backgroundColorstringrgb(200, 200, 200)Background color of the audio wave / canvas
foregroundColorstringrgb(0, 0, 0)Foreground color of the audio wave / canvas
canvasWidthnumber,string500Canvas width (you can use css to make it responsive)
canvasHeightnumber,string300canvas height

License

MIT © noobieprogrammer

Buy me a coffee or just follow me

paypal

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100