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).
Check out the simple demo first.
Check out the component in action within a professional Web app here.
npm install --save react-mic
- Record audio from microphone
- Display sound wave as voice is being recorded
- Save audio as BLOB
<ReactMic
record={boolean} // defaults -> false. Set to true to begin recording
className={string} // provide css class name
onStop={function} // callback to execute when audio stops recording
onData={function} // callback to execute when chunk of audio data is available
strokeColor={string} // sound wave color
backgroundColor={string} // background color
/>import { ReactMic } from 'react-mic';
export class Example extends React.Component {
constructor(props) {
super(props);
this.state = {
record: false
}
}
startRecording = () => {
this.setState({
record: true
});
}
stopRecording = () => {
this.setState({
record: false
});
}
onData(recordedBlob) {
console.log('chunk of real-time data is: ', recordedBlob);
}
onStop(recordedBlob) {
console.log('recordedBlob is: ', recordedBlob);
}
render() {
return (
<div>
<ReactMic
record={this.state.record}
className="sound-wave"
onStop={this.onStop}
onData={this.onData}
strokeColor="#000000"
backgroundColor="#FF4081" />
<button onTouchTap={this.startRecording} type="button">Start</button>
<button onTouchTap={this.stopRecording} type="button">Stop</button>
</div>
);
}
}Try installing babel-preset-stage-1
Include stage-1 in your webpack.config under presets.
e.g.
module.exports = {
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']
}
}]
}
};MIT