Build a Voice Recorder app using only JavaScript and HTML

browser-based voice recorder using HTML and JavaScript

Modern browsers provide API to access Mic/Camera input and record them directly in the browser. No external libraries or packages are required to do that. To create Voice Recorder in the browser we will access two JavaScript APIs to get access to the user mic input and record them.

The MediaRecorder API is a JavaScript API that allows you to record audio and video in the browser. It is part of the WebRTC (Web Real-Time Communications) standard, which provides web browsers with support for real-time communication, such as voice and video calls, without the need for plugins or other external software.

The MediaRecorder API provides a way to record audio and video data from a MediaStream object, which represents a stream of audio and/or video data from one or more media sources (such as the device's microphone or camera). The MediaRecorder API allows you to control the recording process, including starting and stopping the recording, and handling the recorded data as it becomes available.

You can learn more about the MediaRecorder API and how to use it on the Mozilla Developer Network website:

MediaRecorder - Web APIs | MDN

Let’s build the Voice Recorder app:

To create a Voice Recorder using JavaScript and HTML, you can use the navigator.mediaDevices.getUserMedia() method to access the device's microphone and the MediaRecorder API to record the audio. Let’s jump to an example.

<!-- HTML for the page -->
<h1>Voice Recorder</h1>
<p>Click the "Start Recording" button to start recording audio from your microphone.</p>

<button id="start-button">Start Recording</button>
<button id="stop-button" disabled>Stop Recording</button>

<p>Recordings:</p>
<ol id="recordings-list"></ol>

// JavaScript for the page
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');
const recordingsList = document.getElementById('recordings-list');

let mediaRecorder;
let audioChunks = [];

// Helper function to add a new recording to the page
function addRecording(blob) {
  // Create a new audio element
  const audio = document.createElement('audio');
  // Set its source to the recorded blob
  audio.src = URL.createObjectURL(blob);
  audio.controls = true;
  // Add it to the page
  recordingsList.appendChild(audio);
}

// Function to handle the "start recording" button click
function startRecording() {
  // Request access to the microphone
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      // Create a new MediaRecorder instance to record the audio
      mediaRecorder = new MediaRecorder(stream);
      // Add an event listener to be notified when a new chunk of audio is available
      mediaRecorder.addEventListener('dataavailable', event => {
        // Push the new chunk of audio to the array
        audioChunks.push(event.data);
      });
      // Add an event listener to be notified when the recording is finished
      mediaRecorder.addEventListener('stop', () => {
        // Create a new blob from the recorded audio
        const audioBlob = new Blob(audioChunks);
        // Add the recorded audio to the page
        addRecording(audioBlob);
      });
      // Start recording the audio
      mediaRecorder.start();
      // Update the UI
      startButton.disabled = true;
      stopButton.disabled = false;
    })
    .catch(error => {
      // Handle any errors that occurred
      console.error(error);
    });
}

// Function to handle the "stop recording" button click
function stopRecording() {
  // Stop the media recorder
  mediaRecorder.stop();
  // Update the UI
  startButton.disabled = false;
  stopButton.disabled = true;
}

// Add event listeners for the start and stop buttons
startButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);

This example creates a simple page with two buttons: “Start Recording” and “Stop Recording”. When the user clicks the “Start Recording” button, the code requests access to the device’s microphone using the navigator.mediaDevices.getUserMedia() method and starts recording audio using the MediaRecorder API. When the user clicks the "Stop Recording" button, the code stops the recording and adds the recorded audio to the page as a new <audio> element.

This is just one way to create a simple voice recorder using JavaScript and HTML. You can modify and extend this example to suit your specific needs and requirements.

Check out my GitHub Profile. Follow me on Twitter, LinkedIn, YouTube, and Facebook.