Build Your Own Audio Recorder In Browser With JavaScript

Let’s build a javascript app that records and downloads audio files in browser!

Build Your Own Audio Recorder In Browser With JavaScript

In this article, we’ll see how we can record audio with JavaScript. We’ll be using mediaDevices API for audio recording. We’ll also build a browser application that will allow us to record and download audio files.

A live demo of this application is here.

What is Navigator & mediaDevices API in JavaScript

According to MDN Docs,

The Navigator interface represents the state and the identity of the user agent. It allows scripts to query it and to register themselves to carry on some activities.

Simply put, Navigator Object contains data/information about the browser.

mediaDevices is a read-only property that provides access to media input devices like webcams, microphones, etc.

For more info on the navigator object, visit the MDN Docs for Navigator.

Audio Recording Application States for Audio Capture

The application we are going to build in this blog has 4 states:

1. Initial: This is the start of the application, here we will have a welcome message and a button to start the recording.
2. Record: Here, we will record the audio and have a button to stop the recording.
3. Download: This is the state where we can play the recorded audio, download the audio or re-record.
4. Error: Our application will have this state only if the client browser does not support the mediaDevices API.

Application states

Building the Audio Recording Application With JavaScript

Create an index.html file with the following code.

index.html

We’ll be populating text and control buttons in <div class=”display”> and <div class=”controllers”> via JavaScript, respectively.

Now, in styles.css

styles.css

Now, for the app.js

app.js

Here, we are selecting display and controllerWrapper to add text and buttons dynamically.

State array lists all the states the application has and stateIndex keeps track of the current state.

The application function is where we populate content onto the webpage according to the current state with the help of a switch statement.

clearDisplay() and clearControls() are helper functions that remove all the content inside display and controllerWrapper.

clearDisplay() and clearControls() in app.js

addMessage() appends a <p> tag inside display with text

addMessage() in app.js

addButton() appends <button> tag to controllerWrapper with an onclick attribute.

addButton() in app.js

addAudio() creates an <audio> tag inside display.

addAudio() in app.js

Now the setup is complete, let’s add the mediaRecorder setup.

mediaRecorder setup in app.js

Here, we are accessing audio using a navigator object.

When the promise succeeds, it returns a stream of data.

We are initializing MediaRecorder() with stream and assigning it to the mediaRecorder variable.

mediaRecorder.ondataavailable and mediaRecorder.onstop gets executed when we call mediaRecorder.start() and mediaRecorder.stop() methods respectively.

In mediaRecorder.ondataavailable, we are simply pushing the data (audio data) to the variable chunks.

In mediaRecorder.onstop, we are creating a Blob with the collected chunks, creating an object URL of that blob, and assigning that URL to the audio tag as an src.

As all the setup is done, let’s get the application working.

onclick functions in app.js

record(), stopRecording() and downloadAudio() are the functions we’ve passed as onclick attribute values to buttons.

In record() and stopRecording(), we change stateIndex to the index of the next state, call mediaRecorder.start() and mediaRecorder.stop() respectively, and populate the webpage according to the new state.

In downloadAudio() , we download the recorded audio as audio.ogg .

And thus, we have an audio recorder in the browser!!

A live demo of this project is here.

The code for this blog is on Github.

Link to my other articles:

Create Your First Ever Working React App

Take pictures in browser with JavaScript