The WebRTC advances by leaps and bounds. Using only the browser, you are able to record, although in not all of them, the Audio from the microphone of the visitor. Obviously this process needs the approval of the user, which means that this feature can be really useful for systems like online language evalutions etc.
In this article we'll show you how to record the Audio received by the Microphone using the Recorder.js library in the browser.
How does the recording process works?
To record audio in the browser, you will need obviously access to the microphone with the getUserMedia API and the AudioContext API, so be sure that your browser supports these APIs. With Recorder.js, the recording process is pretty simple. All that you need to do is to request the microphone, once the user allows the access to the microphone, a stream object is received in the success callback of the initialization. This stream needs to be handled with the createMediaStreamSource method from an instance of the AudioContext API. The previous variables should be stored globally or at least accesible in the scope for the rest of functions.
The Recorder.js class expects as first argument the handled stream as first argument namely the input. With this instance of Recorder.js you can trigger the record method that starts to recording the received Audio and it will run indefinitely until the stop method from the same instance of recorder is triggered. At the same time you will need to stop the getUserMedia API too by stopping the first (or all) the audio track instances from the previously created Audio Stream
As last step, export the Audio Blob from the recorder audio using the exportWAV method of the recorder instance. The exportWAV method can export the audio in wav and mp3 format when the second parameter is specified with the correct mimetype. Don't forget to use the clear method of the recorder to start with a new one later. With the generated blob you will be able to upload it as an audio file to the server, in the same browser or just to play it in the same document.
How to record Audio with Recorder.js
To make the explanation so simple as possible, we'll just write a HTML document that implements all the previously described process. It consists of 2 buttons namely Start and Play that triggers the recording process with Recorder.js. When the user stops the recording, it will append an Audio Track to an UL list with a downloadable audio file with like "2017-07-14T10:43:28.456Z.wav":
Note
You won't anything but the recorder.js script that can be downloaded from the official repository at Github here.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Live input record and playback</title>
<style type='text/css'>
ul {
list-style: none;
}
#recordingslist audio {
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Recorder.js export example</h1>
<p>Make sure you are using a recent version of Google Chrome.</p>
<p>Also before you enable microphone input either plug in headphones or turn the volume down if you want to avoid ear splitting
feedback!
</p>
<!-- Draw the action buttons -->
<button id="start-btn">Start recording</button>
<button id="stop-btn" disabled>Stop recording</button>
<!-- List item to store the recording files so they can be played in the browser -->
<h2>Stored Recordings</h2>
<ul id="recordingslist"></ul>
<script>
// Expose globally your audio_context, the recorder instance and audio_stream
var audio_context;
var recorder;
var audio_stream;
/**
* Patch the APIs for every browser that supports them and check
* if getUserMedia is supported on the browser.
*
*/
function Initialize() {
try {
// Monkeypatch for AudioContext, getUserMedia and URL
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
// Store the instance of AudioContext globally
audio_context = new AudioContext;
console.log('Audio context is ready !');
console.log('navigator.getUserMedia ' + (navigator.getUserMedia ? 'available.' : 'not present!'));
} catch (e) {
alert('No web audio support in this browser!');
}
}
/**
* Starts the recording process by requesting the access to the microphone.
* Then, if granted proceed to initialize the library and store the stream.
*
* It only stops when the method stopRecording is triggered.
*/
function startRecording() {
// Access the Microphone using the navigator.getUserMedia method to obtain a stream
navigator.getUserMedia({ audio: true }, function (stream) {
// Expose the stream to be accessible globally
audio_stream = stream;
// Create the MediaStreamSource for the Recorder library
var input = audio_context.createMediaStreamSource(stream);
console.log('Media stream succesfully created');
// Initialize the Recorder Library
recorder = new Recorder(input);
console.log('Recorder initialised');
// Start recording !
recorder && recorder.record();
console.log('Recording...');
// Disable Record button and enable stop button !
document.getElementById("start-btn").disabled = true;
document.getElementById("stop-btn").disabled = false;
}, function (e) {
console.error('No live audio input: ' + e);
});
}
/**
* Stops the recording process. The method expects a callback as first
* argument (function) executed once the AudioBlob is generated and it
* receives the same Blob as first argument. The second argument is
* optional and specifies the format to export the blob either wav or mp3
*/
function stopRecording(callback, AudioFormat) {
// Stop the recorder instance
recorder && recorder.stop();
console.log('Stopped recording.');
// Stop the getUserMedia Audio Stream !
audio_stream.getAudioTracks()[0].stop();
// Disable Stop button and enable Record button !
document.getElementById("start-btn").disabled = false;
document.getElementById("stop-btn").disabled = true;
// Use the Recorder Library to export the recorder Audio as a .wav file
// The callback providen in the stop recording method receives the blob
if(typeof(callback) == "function"){
/**
* Export the AudioBLOB using the exportWAV method.
* Note that this method exports too with mp3 if
* you provide the second argument of the function
*/
recorder && recorder.exportWAV(function (blob) {
callback(blob);
// create WAV download link using audio data blob
// createDownloadLink();
// Clear the Recorder to start again !
recorder.clear();
}, (AudioFormat || "audio/wav"));
}
}
// Initialize everything once the window loads
window.onload = function(){
// Prepare and check if requirements are filled
Initialize();
// Handle on start recording button
document.getElementById("start-btn").addEventListener("click", function(){
startRecording();
}, false);
// Handle on stop recording button
document.getElementById("stop-btn").addEventListener("click", function(){
// Use wav format
var _AudioFormat = "audio/wav";
// You can use mp3 to using the correct mimetype
//var AudioFormat = "audio/mpeg";
stopRecording(function(AudioBLOB){
// Note:
// Use the AudioBLOB for whatever you need, to download
// directly in the browser, to upload to the server, you name it !
// In this case we are going to add an Audio item to the list so you
// can play every stored Audio
var url = URL.createObjectURL(AudioBLOB);
var li = document.createElement('li');
var au = document.createElement('audio');
var hf = document.createElement('a');
au.controls = true;
au.src = url;
hf.href = url;
// Important:
// Change the format of the file according to the mimetype
// e.g for audio/wav the extension is .wav
// for audio/mpeg (mp3) the extension is .mp3
hf.download = new Date().toISOString() + '.wav';
hf.innerHTML = hf.download;
li.appendChild(au);
li.appendChild(hf);
recordingslist.appendChild(li);
}, _AudioFormat);
}, false);
};
</script>
<!-- Include the recorder.js library from a local copy -->
<script src="recorder.js"></script>
</body>
</html>If you don't know how to download a Blob as a file in the browser, you can read this article that explains how to achieve it easily.
Happy coding !
