Introduction
Many browsers now have the power to access video and audio input from the user. However, counting on the browser, it’d be a full dynamic and inline experience, or it might be delegated to a different app on the user’s device. Here we will learn to record audio on the web through javascript.
Add HTML to your code
<div class="form-group">
<div id="audioMediaNotAvailable" style="display: none;">
Microphone not found
</div>
<div id="recording">
<button type="button" id="record" disabled>
<i class="material-icons">mic </i>
</button>
<button type="button" id="pause">
<i class="material-icons">pause </i>
</button>
<button type="button" id="resume">
<i class="material-icons"> play_arrow </i>
</button>
<button type="button" id="stop">
<i class="material-icons">stop</i>
</button>
</div>
<div id="processing">
<div>
<audio id="audio" controls>
</div>
</div>
</div>
Add the following to javascript code to record audio with MediaRecorder
var recordButton, stopButton, pauseButton, resumeButton, recorder, audioFile;
//create variables for button or audio file
window.onload = function() {
recordButton = document.getElementById('record');
stopButton = document.getElementById('stop');
pauseButton = document.getElementById('pause');
resumeButton = document.getElementById('resume');
// get audio stream from user's mic
navigator.mediaDevices.getUserMedia({
audio: true
})
.then(function(stream) {
recordButton.disabled = false;
stopButton.disabled = true;
pauseButton.disabled = true;
resumeButton.disabled = true;
recordButton.addEventListener('click', startRecording);
stopButton.addEventListener('click', stopRecording);
pauseButton.addEventListener('click', pauseRecording);
resumeButton.addEventListener('click', resumeRecording);
var options = {
mimeType: 'audio/webm'
}
recorder = new MediaRecorder(stream, options);
// listen to dataavailable, which gets triggered whenever we have
// an audio blob available
recorder.addEventListener('dataavailable', onRecordingReady);
}, function() {
recordButton.disabled = true;
stopButton.disabled = true;
pauseButton.disabled = true;
resumeButton.disabled = true;
$("#audioMediaNotAvailable").show();
}); // if microphone is not connected
};
function startRecording() {
recordButton.disabled = true;
stopButton.disabled = false;
pauseButton.disabled = false;
resumeButton.disabled = true;
recorder.start();
}
function pauseRecording() {
recordButton.disabled = true;
stopButton.disabled = false;
pauseButton.disabled = true;
resumeButton.disabled = false;
recorder.pause();
}
function resumeRecording() {
recordButton.disabled = false;
stopButton.disabled = false;
pauseButton.disabled = false;
resumeButton.disabled = true;
recorder.resume();
}
function stopRecording() {
recordButton.disabled = false;
stopButton.disabled = true;
pauseButton.disabled = false;
resumeButton.disabled = true;
// Stopping the recorder will eventually trigger the `dataavailable` event and we can complete the recording process
recorder.stop();
$("#recording").hide();
$("#processing").show();
}
function onRecordingReady(e) {
var audio = document.getElementById('audio');
// e.data contains a blob representing the recording
audioFile = e.data;
// var file = new File(e.data,"hello.wav");
audio.src = URL.createObjectURL(e.data);
audio.play();
}