Skip to content

Instantly share code, notes, and snippets.

@collinsnji
Created May 15, 2018 22:01
Show Gist options
  • Save collinsnji/feda51239cbfb6fc9e58f04258aa6187 to your computer and use it in GitHub Desktop.
Save collinsnji/feda51239cbfb6fc9e58f04258aa6187 to your computer and use it in GitHub Desktop.
// somewhere in your frontend
// <button id="start">Start</button>
// <button id="stop">Stop</button>
if (navigator.mediaDevices) {
let accessLevel = { audio: true };
let voiceInputData = [];
// use a button or use an even to trigger listening
let record = document.getElementById('start');
let stopRecord = document.getElementById('stop');
navigator.mediaDevices.getUserMedia(accessLevel)
.then(function (stream) {
let mediaRecorder = new MediaRecorder(stream);
// could be done programmatically using background event listeners or triggers
record.addEventListener('click', () => {
mediaRecorder.start();
/* debug > get current state */
console.log(mediaRecorder.state);
/* push data to dataArray when available */
mediaRecorder.ondataavailable = (e) => {
voiceInputData.push(e.data);
}
});
stopRecord.addEventListener('click', () => {
mediaRecorder.stop();
console.log(mediaRecorder.state);
});
mediaRecorder.onstop = () => {
// create blob from recorded data
let blob = new Blob(voiceInputData, { 'type': 'audio/wav; codecs=opus' });
// encode to base64
let reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = () => {
let base64Audio = reader.result.split(',')[1];
/* debug > print out the current base64 string */
console.log(base64Audio);
// return base64Audio or send backend
}
}
}).catch(error => {
console.log(error.message);
});
} else {
console.log('not supported')
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment