Recording MP3 audio using ReactJs under 5 minutes

Matheswaaran
Jul 15, 2019 · 2 min read

Hello folks. I was building a website using ReactJs and I came across a requirement to record an audio file on the web. Like, everyone, I started Googling it.

After googling some time, I came across an npm package that records mp3 files called mic-recorder-to-mp3 . You can find it in the below link.

https://www.npmjs.com/package/mic-recorder-to-mp3

Install and Import

To install the above npm package into your React project, do the following

npm install --save mic-recorder-to-mp3

After installing it you have to import the package in the project.

import MicRecorder from 'mic-recorder-to-mp3';

Configure MicRecorder

Now set the bit rate for the audio to be recorded to 128 bits

const Mp3Recorder = new MicRecorder({ bitRate: 128 });

Check for Browser Permissions

First set some basic state values like

this.state = {
isRecording: false,
blobURL: '',
isBlocked: false,
}

Before we start recording we should check if the permission for the microphone is allowed in the browser. To do that we need to use "navigator.getUserMedia()" function. Look more about it here.

I recommend using the below code in componentDidMount()

navigator.getUserMedia({ audio: true },
() => {
console.log('Permission Granted');
this.setState({ isBlocked: false });
},
() => {
console.log('Permission Denied');
this.setState({ isBlocked: true })
},
);

The above code checks the permissions of the web browser to access the microphone for recording audio. If permission is given the isBlocked is set to true or else false

Recording Audio

Set up two buttons and an HTML5 audio tag in the render() function.

<button onClick={this.start} disabled={this.state.isRecording}>
Record
</button>

To start the audio recording call the start() function in the Mp3Recorder which in turn returns a Promise.

start = () => {
if (this.state.isBlocked) {
console.log('Permission Denied');
} else {
Mp3Recorder
.start()
.then(() => {
this.setState({ isRecording: true });
}).catch((e) => console.error(e));
}
};

Now the audio starts to record once the above function is called. It continues to record until the stop() function is called.

After the recording is stopped, getMp3() is called which returns a Promise.

A blob and buffers are received as arguments when the Promise is resolved. We can create a “blob URL” from the received blob using URL.createObjectURL(). Now set the received URL as src for the audio tag.

stop = () => {
Mp3Recorder
.stop()
.getMp3()
.then(([buffer, blob]) => {
const blobURL = URL.createObjectURL(blob)
this.setState({ blobURL, isRecording: false });
}).catch((e) => console.log(e));
};

Hooray!!, Now you can record audio in MP3 format by clicking the start button.

The complete example is available in the GitHub link given below.

Say Hi, It’s free @matheswaaran_S or https://matheswaaran.com

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

Matheswaaran

Written by

Developer @NFN Labs

Frontend Weekly

It's really hard to keep up with all the front-end development news out there. Let us help you. We hand-pick interesting articles related to front-end development. You can also subscribe to our weekly newsletter at http://frontendweekly.co

More From Medium

More from Frontend Weekly

More from Frontend Weekly

More from Frontend Weekly

Understanding `static` in React

4.3K

More from Frontend Weekly

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade