react-mic
Record a user's voice and display as an oscillation. Audio is saved as WebM audio file format.
PLEASE NOTE: The WebM audio format is not supported in Safari browsers (including Safari on iOS). You need to save an audio recording as a WAV file in order to get full cross-browser and cross-device support.
If you need a version of this React component with added WAV support so you can record and play back audio recordings in any browser and mobile device (iOS + Android), please purchase React-Mic-Plus. You can join this Slack channel if you have any questions or problems.
Featured in the course "How To Develop A Professional React App".
Works via the HTML5 MediaRecorder API (currently only available in Chrome & Firefox).
Demos
Check out the simple demo first.
Check out the component in action within a professional Web app here.
Installation
npm install --save 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 className=string // provide css class name onStop=
Example
; 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> ; }
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