CODEWITHSUNDEEP
javascripthtmlhtml5-audio
JavaScripter
JavaScripter

Reputation: 33

Audio Recording in Java Script

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!

Upvotes: 2

Views: 823

Answers (1)

ManuelMB
ManuelMB

Reputation: 1375

<!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>

Upvotes: 1

Related Questions