Build a Voice Recorder Through Microphone and Download it as MP3 File Using WebRTC MediaRecorder API in Vanilla Javascript Full Project For Beginners

 

 

Welcome folks today in this blog post we will be building a voice recorder through microphone using webrtc mediarecorder api in javascript. All the full source code of the application is shown below.

 

 

 

Get Started

 

 

 

In order to get started you need to make a index.html file and copy paste the following code

 

 

index.html

 

 

<div class="wrapper">
  <div class="audio-wrapper">
    <audio src="" controls class="js-audio audio"></audio>
  </div>

  <div class="toolbar">
    <button class="js-start button button--start">Start</button>
    <button class="js-stop button button--stop">Stop</button>
  </div>
</div>

 

 

style.css

 

 

body {
     background: #fff;
}
 .wrapper {
     padding: 2rem;
}
 .audio-wrapper {
     margin: 0 0 2rem 0;
}
 .audio {
     width: 100%;
}
 .audio::-webkit-media-controls-panel {
     background: white;
}
 .toolbar {
     text-align: center;
}
 .button {
     transition: all 0.4s ease-in-out;
     position: inline-block;
     padding: 0.6rem 1rem;
     background: #fff;
     border: 1px solid #e5e5e5;
     border-radius: 0;
     outline: none;
     text-transform: uppercase;
     color: #b5b4b9;
}
 .button--start:hover {
     background: #6abb5c;
     border-color: #5ab34b;
     color: #fff;
}
 .button--stop:hover {
     background: #4fabe4;
     border-color: #39a0e1;
     color: #fff;
}

 

 

 

script.js

 

 

"use strict";

// We'll save all chunks of audio in this array.
const chunks = []; // We will set this to our MediaRecorder instance later.

let recorder = null; // We'll save some html elements here once the page has loaded.

let audioElement = null;
let startButton = null;
let stopButton = null;
/**
 * Save a new chunk of audio.
 * @param  {MediaRecorderEvent} event 
 */

const saveChunkToRecording = event => {
  chunks.push(event.data);
};
/**
 * Save the recording as a data-url.
 * @return {[type]}       [description]
 */


const saveRecording = () => {
  const blob = new Blob(chunks, {
    type: 'audio/mp4; codecs=opus'
  });
  const url = URL.createObjectURL(blob);
  audioElement.setAttribute('src', url);
};
/**
 * Start recording.
 */


const startRecording = () => {
  recorder.start();
};
/**
 * Stop recording.
 */


const stopRecording = () => {
  recorder.stop();
}; // Wait until everything has loaded


(function () {
  audioElement = document.querySelector('.js-audio');
  startButton = document.querySelector('.js-start');
  stopButton = document.querySelector('.js-stop'); // We'll get the user's audio input here.

  navigator.mediaDevices.getUserMedia({
    audio: true // We are only interested in the audio

  }).then(stream => {
    // Create a new MediaRecorder instance, and provide the audio-stream.
    recorder = new MediaRecorder(stream); // Set the recorder's eventhandlers

    recorder.ondataavailable = saveChunkToRecording;
    recorder.onstop = saveRecording;
  }); // Add event listeners to the start and stop button

  startButton.addEventListener('mouseup', startRecording);
  stopButton.addEventListener('mouseup', stopRecording);
})();

Leave a Reply