I tried to download the recorded audio file using javascript, which is
- Check if getUserMedia is supported --> okay
- Hit play button and trigger Play() function --> okay
- Hit stop button and trigger Stop() function --> okay
- Stop() would trigger Download()
recordedBlobs
seems fine by checking the log (size !=0),
but var blob = new Blob(recordedBlobs, {type: "audio/webm; codecs=opus"});
would return a empty blob.
Also something weird: I found that console.log(recordedBlobs.length)
is 0 ?! I'm kinda new to javascript, is this normal?
I feel really confused :( Any suggestions would be appreciated, thanks in advance.
Below is my code.
<script>
let mediaRecorder;
let recordedBlobs;
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
console.log("getUserMedia supported.");
navigator.mediaDevices
.getUserMedia(
{audio: true, video: false}
)
// Success callback
.then(function (stream) {
mediaRecorder = new MediaRecorder(stream);
})
// Error callback
.catch(function (err) {
console.log("The following getUserMedia error occurred: " + err);
});
} else {
console.log("getUserMedia not supported on your browser!");
}
function handleDataAvailable(event) {
console.log('handleDataAvailable', event);
if (event.data && event.data.size > 0) {
recordedBlobs.push(event.data);
}
}
function Play() {
console.log("play");
recordedBlobs = [];
mediaRecorder.ondataavailable = handleDataAvailable;
mediaRecorder.start();
console.log(mediaRecorder.state);
}
function Stop() {
console.log("stop");
mediaRecorder.stop();
downloadVideo();
}
function downloadVideo() {
console.log('recorded blob:', recordedBlobs);
var blob = new Blob(recordedBlobs, {type: "audio/webm; codecs=opus"});
console.log('new blob:', blob);
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = 'test.webm';
document.body.appendChild(a);
a.click();
setTimeout(() => {
document.body.removeChild(a);
window.URL.revokeObjectURL(url);
}, 100);
}
</script>