react-mic
Record a user's voice and display as an oscillation. Plug-n-play component for React apps. Audio is saved as WebM audio file format. Works via the HTML5 MediaRecorder API (currently only available in Chrome & Firefox).
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 that supports the WAV audio format so that you can record and play back audio recordings in any browser and mobile device (iOS + Android), you can purchase React-Mic-Plus. React-Mic-Plus also comes with an optional pause feature.
NEW!!! The full React code for Voice Record Pro with React-Mic-Plus built in is now available. Create your audio recording or voice-activated React app by building on top of an expert codebase and fully responsive interface that runs on any device. Let your users share audio recordings by just sharing a web link. Installation support provided. Contact Mark if you have any questions.
Join the Slack channel if you have any questions or problems with React-Mic or React-Mic-Plus.
Also check out my latest course on building professional React apps for an employer, clients, or your own startup!
Demos
Check out the demo.
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 pause=boolean // defaults -> false. Available in React-Mic-Plus upgrade only 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