I am currently using the MediaRecorder functionality to capture audio and I would like to display a progress bar showing the recording process.
Here is the code snippet from my recorder template:
<p id="countdowntimer">Current Status: Beginning in<span id="countdown">10</span> seconds</p>
<progress ref="seekbar" value="0" max="1" id="progressbar"></progress>
Here is the function I am using:
mounted() {
let timeleft = 10;
const timeToStop = 20000;
const timeToStart = 1000;
const downloadTimer = setInterval(() => {
timeleft -= 1;
document.getElementById('countdown').textContent = timeleft;
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById('countdowntimer').textContent = 'Current Status: Recording';
const that = this;
navigator.getUserMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia;
navigator.getUserMedia({ audio: true, video: false }, (stream) => {
that.stream = stream;
that.audioRecorder = new MediaRecorder(stream, {
mimeType: 'audio/webm;codecs=opus',
audioBitsPerSecond: 96000,
});
that.audioRecorder.ondataavailable = (event) => {
that.recordingData.push(event.data);
};
that.audioRecorder.onstop = () => {
const blob = new Blob(that.recordingData, { type: 'audio/ogg' });
that.dataUrl = window.URL.createObjectURL(blob);
// document.getElementById('audio').src = window.URL.createObjectURL(blob);
};
that.audioRecorder.start();
console.log('Media recorder started');
setTimeout(() => {
that.audioRecorder.stop();
document.getElementById('countdowntimer').textContent = 'Current Status: Stopped';
console.log('Stopped');
}, timeToStop);
}, (error) => {
console.log(JSON.stringify(error));
});
}
}, timeToStart);
}
I am now trying to update the progress bar accordingly:
const progressbar = document.getElementById('progressbar');
progressbar.value = some value;
My main objective is to dynamically increase the progress bar based on the recording progress. How can I achieve this?