Created
May 15, 2018 22:01
-
-
Save collinsnji/feda51239cbfb6fc9e58f04258aa6187 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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