html5 audio recorder

HTML

First we have the controls. We have a button to record, and stop the recording.

  <button id="recordButton">Record</button>
  <button id="stopButton">Stop</button>

1 2	<button id="recordButton">Record</button> <button id="stopButton">Stop</button>

Then we have a recordingsList list tag to hold all the recordings.

  <p><strong>Recordings:</strong></p>
  <ol id="recordingsList"></ol>

1 2	<p><strong>Recordings:</strong></p> <ol id="recordingsList"></ol>

Recorder.js

We create a new AudioContext, which we use it as a parameter in Recorder class.
We must implement the onAnalysed callback handler.

const audioContext =  new (window.AudioContext || window.webkitAudioContext)();
 
const recorder = new Recorder(audioContext, {
  // An array of 255 Numbers
  // You can use this to visualize the audio stream
  // If you use react, check out react-wave-stream
  onAnalysed: data => {
    
    // console.log(data)
  }
}); 
 
let isRecording = false;
let myBlob = null;
 
navigator.mediaDevices.getUserMedia({audio: true})
  .then(stream => recorder.init(stream))
  .catch(err => console.log('Uh oh... unable to get stream...', err));

const audioContext = new (window.AudioContext || window.webkitAudioContext)();

const recorder = new Recorder(audioContext, {

// An array of 255 Numbers

// You can use this to visualize the audio stream

// If you use react, check out react-wave-stream

onAnalysed: data => {

// console.log(data)

}

});

let isRecording = false;

let myBlob = null;

navigator.mediaDevices.getUserMedia({audio: true})

.then(stream => recorder.init(stream))

.catch(err => console.log('Uh oh... unable to get stream...', err));

Only then we can start to use the recorder

start record handler

function startRecording() {
  recorder.start()
    .then(() => isRecording = true);
}

function startRecording() {

recorder.start()

.then(() => isRecording = true);

}

stop record handler

function stopRecording() {
  recorder.stop()
    .then(({blob, buffer}) => {
      myBlob = blob;
 
      var recordingsList = document.getElementById("recordingsList");
      var url = URL.createObjectURL(myBlob);
        var au = document.createElement('audio');
        au.controls = true;
        au.src = url;
        var li = document.createElement('li'); // create the list item
        li.appendChild(au); //add the new audio element to li
        li.appendChild(document.createTextNode(" "))//add a space in between
    
        //add the li element to the ol
        recordingsList.appendChild(li);

    });
}

function stopRecording() {

recorder.stop()

.then(({blob, buffer}) => {

myBlob = blob;

var recordingsList = document.getElementById("recordingsList");

var url = URL.createObjectURL(myBlob);

var au = document.createElement('audio');

au.controls = true;

au.src = url;

var li = document.createElement('li'); // create the list item

li.appendChild(au); //add the new audio element to li

li.appendChild(document.createTextNode(" "))//add a space in between

//add the li element to the ol

recordingsList.appendChild(li);

});

}

Assign handlers to event listeners.

var recordButton = document.getElementById("recordButton");
var stopButton = document.getElementById("stopButton");
recordButton.addEventListener("click", startRecording);
stopButton.addEventListener("click", stopRecording);

var recordButton = document.getElementById("recordButton");

var stopButton = document.getElementById("stopButton");

recordButton.addEventListener("click", startRecording);

stopButton.addEventListener("click", stopRecording);