credits

This project is a fork of the original one (react-voice-recorder) made a bit more customizable

myedu-react-voice-recorder

Record your voice and download the audio file

Installation

npm i myedu-react-voice-recorder //This will download the latest version of Module.

Import in your project file

import {Recorder} from 'myedu-react-voice-recorder'
import 'myedu-react-voice-recorder/dist/styles.module.css'

Declare inside the render menthod

this.state = {
    audioDetails: {
        url: null,
        blob: null,
        chunks: null,
        duration: {
          h: 0,
          m: 0,
          s: 0
        }
      }
}
handleAudioStop(data){
    console.log(data)
    this.setState({ audioDetails: data });
}

handleAudioUpload(file) {
    console.log(file);
}

handleCountDown(data) {
    console.log(data);
}

handleReset() {
    const reset = {
      url: null,
      blob: null,
      chunks: null,
      duration: {
        h: 0,
        m: 0,
        s: 0
      }
    };
    this.setState({ audioDetails: reset });
  }

<Recorder
    record={true}
    title={"New recording"}
    audioURL={this.state.audioDetails.url}
    showUIAudio
    handleAudioStop={data => this.handleAudioStop(data)}
    handleAudioUpload={data => this.handleAudioUpload(data)}
    handleCountDown={data => this.handleCountDown(data)}
    handleReset={() => this.handleReset()}
    mimeTypeToUseWhenRecording={`audio/webm`} // For specific mimetype.
/>

Props

Common props you may want to specify include:

• record - Flag
• title - Title for the Model
• hideHeader - To hide the header which showing title
• audioURL - To hear what has been recorded.
• showUIAudio - Either need to show HTML5 audio tag after stopped or not.
• handleAudioStop - Once your are stop the record, this will send your the data to process. further
• handleAudioUpload - Onced click the upload button, Blob will be passed via props
• handleCountDown - Transmits time every 100 milliseconds
• uploadButtonDisabled (optional) - When set to true, the upload button is disabled
• themeColor (optional) - customize theme main color.
• infoText (optional) - info text that will be displayed while not recording.
• recordingText (optional) - info text that will be displayed while recording.
• clearBtnText (optional) - the text that will be displayed in the clear audio button.
• downloadBtnText (optional) - the text that will be displayed in the audio download button.
• mimeTypeToUseWhenRecording (optional) - Specify the MIME type you want to use when recording. If none specified, the browser's default will be used.
  • audio/ogg for Firefox
  • audio/webm for Chrome

License

MIT Licensed.