Audio recording with MediaStreamRecorder.js

This article describes audio recording in web application using MediaStreamRecorder.js.\
(The JavaScript library works on Firefox and Chrome, unfortunately it did not work on Safari including iOS.)

🐯 Sample Code

Sample code is as follows:

<button class="btn btn-primary" id="start-recording" onclick="startRecording()">Recording Startbutton>
<button class="btn btn-default" id="stop-recording" onclick="stopRecording()">Stopbutton>
<div id="record-audio">div>

<script src="//cdn.webrtc-experiment.com/commits.js">script>
<script src="//cdn.WebRTC-Experiment.com/MediaStreamRecorder.js">script>
<script src="//cdn.WebRTC-Experiment.com/gumadapter.js">script>
<script>

  function captureUserMedia(mediaConstraints, successCallback, errorCallback) {
    navigator.mediaDevices.getUserMedia(mediaConstraints).then(successCallback).catch(errorCallback);
  }

  var mediaConstraints = {
    audio: true
  };

  function startRecording(idx) {
    $('#start-recording').disabled = true;
    audiosContainer = document.getElementById('audios-container');
    captureUserMedia(mediaConstraints, onMediaSuccess, onMediaError);
  };

  function stopRecording() {
    $('#stop-recording').disabled = true;
    mediaRecorder.stop();
    mediaRecorder.stream.stop();
    $('.start-recording').disabled = false;
  };

  var mediaRecorder;

  function onMediaSuccess(stream) {
    mediaRecorder = new MediaStreamRecorder(stream);
    mediaRecorder.stream = stream;
    mediaRecorder.mimeType = 'audio/wav';
    mediaRecorder.audioChannels = 1;
    mediaRecorder.ondataavailable = function(blob) {
      $('#record-audio').html("<audio controls=''><source src=" + URL.createObjectURL(blob) + ">source>audio>
    };

    var timeInterval = 360 * 1000;

    mediaRecorder.start(timeInterval);

    $('#stop-recording').disabled = false;
  }

  function onMediaError(e) {
    console.error('media error', e);
  }

  function bytesToSize(bytes) {
    var k = 1000;
    var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
    if (bytes === 0) return '0 Bytes';
    var i = parseInt(Math.floor(Math.log(bytes) / Math.log(k)), 10);
    return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i];
  }

  function getTimeLength(milliseconds) {
    var data = new Date(milliseconds);
    return data.getUTCHours() + " hours, " + data.getUTCMinutes() + " minutes and " + data.getUTCSeconds() + " second(s)";
  }

  window.onbeforeunload = function() {
    $('#start-recording').disabled = false;
  };

script>

🐹 Demo

The above code works like this:

Recording Start

Stop

🖥 Recommended VPS Service

VULTR provides high performance cloud compute environment for you. Vultr has 15 data-centers strategically placed around the globe, you can use a VPS with 512 MB memory for just $ 2.5 / month ($ 0.004 / hour). In addition, Vultr is up to 4 times faster than the competition, so please check it => Check Benchmark Results!!