@cleanderson/react-mic
react-mic
Wrapper component forWhat's new - @cleandersonlobo/react-mic
The Component audio format is supported in Safari browsers (including Safari on iOS).
The Package has been updated to use the MediaStreamRecorder to record WAV audio.
The Package has been updated to use the wasm-optimized vmsg to record MP3 audio.
- Supports WAV audio recording
- Supports MP3 audio recording
Problem to be solved.
- Audio recorded in WAV by safari presents noises;
react-mic
DemosCheck out the demo.
NOTE: The above demo does not use this package
Installation
npm install --save @cleandersonlobo/react-mic
Features
- Record audio from microphone
- Display sound wave as voice is being recorded
- Save audio as BLOB
Usage
<ReactMic record=boolean // defaults -> false. Set to true to begin recording pause=boolean // defaults -> false. Available in React-Mic-Plus upgrade only className=string // provide css class name onStop=
Example
AUDIO/WAV
; Component { superprops; thisstate = record: false } { this; } { this; } { console; } { console; } { return <div> <ReactMic record=thisstaterecord className="sound-wave" onStop=thisonStop onData=thisonData strokeColor="#000000" backgroundColor="#FF4081" /> <button onTouchTap=thisstartRecording type="button">Start</button> <button onTouchTap=thisstopRecording type="button">Stop</button> </div> ; }
AUDIO/MP3
; Component ... { console; } { console; } { return <div> <ReactMic record=thisstaterecord className="sound-wave" onStop=thisonStop onData=thisonData strokeColor="#000000" backgroundColor="#FF4081" mimeType="audio/mp3" /> <button onTouchTap=thisstartRecording type="button">Start</button> <button onTouchTap=thisstopRecording type="button">Stop</button> </div> ; }
Having issues with the lambda function?
Try installing babel-preset-stage-1
Include stage-1 in your webpack.config under presets.
e.g.
moduleexports = entry: "./scripts/Main.js" output: path: __dirname filename: "./static/script.js" module: loaders: test: /\.css$/ loader: "style!css" test: /\.js$/ // exclude: /(node_modules)/, loader: 'babel-loader' query: presets: 'es2015' 'react' 'stage-1' ;
License
MIT