This is a fork of the original project (react-voice-recorder) customized for MyEDU purposes.

This project is a fork of the original one (react-voice-recorder) made a bit more customizable
Record your voice and download the audio file
[//]: # (# Demo)
[//]: # ()
[//]: # (Checkout the [Demo](https://library-demos.herokuapp.com/react-voice-recorder))
``npm i myedu-react-voice-recorder` //This will download the latest version of Module.
``
import {Recorder} from 'myedu-react-voice-recorder'
import 'myedu-react-voice-recorder/dist/styles.module.css'
`
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 });
}
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.
/>
`
Common props you may want to specify include:
- record - Flag title
- - Title for the ModelhideHeader
- - To hide the header which showing titleaudioURL
- - 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. furtherhandleAudioUpload
- - 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 Firefoxaudio/webm` for Chrome
-
MIT Licensed.