I know this is a common question, but for some reason, there are several answers (which confuses me)
tl;dr I am trying to set a button that let you record yourself for up to 10 seconds (you can press stop if you want to stop recording before) and then let you play it.
What I have tried till now :
I know there is the library getUserMedia, and I have (tried) created a MediaStream.
I get confused when it comes to the Recording itself and the.Start() and Stop()
here is my code for getting the user`s permission to access the microphone :
const getmiceacesses = function () {
const stream = navigator.mediaDevices
.getUserMedia({ audio: true })
.then(function (stream) {const mediaRecorder = new MediaRecorder(stream);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", (event) => {
audioChunks.push(event.data);
});
});};
const recording = document.querySelector(`.recorder`);
recording.addEventListener(`click`, getmiceacesses);
Thank you guys!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<audio id='audioPlayer'></audio>
<button type="button" class="recorder">Start</button>
<button type="button" class="stopRecorder">Stop</button>
<script>
function playAudio(audioChunks) {
const blob = new Blob(audioChunks,{type:'audio/x-mpeg-3'});
const audioPlayer = document.getElementById('audioPlayer')
audioPlayer.src = URL.createObjectURL(blob);
audioPlayer.controls=true;
audioPlayer.autoplay=true;
}
var mediaRecorder; // Need to be accessible for the stopRecorder function
const audioChunks = []; // Place it here to debug it contents after finsih recording
const getmiceacesses = function () {
const stream = navigator.mediaDevices.getUserMedia({ audio: true })
.then(function (stream) {
mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
setTimeout(stopRecorder, 10000) // To automatically stop the recorder after 10 seconds
mediaRecorder.addEventListener("dataavailable", (event) => {
audioChunks.push(event.data);
playAudio(audioChunks)
console.log('Debugging Breakpoint')
});
})
;};
const stopRecorder = function(){
if(mediaRecorder.state === 'recording'){
mediaRecorder.stop();
}
}
const recording = document.querySelector('.recorder');
recording.addEventListener('click', getmiceacesses);
const stopRecording = document.querySelector('.stopRecorder');
stopRecording.addEventListener('click', stopRecorder);
</script>
</body>
</html>