Javascript Question posted in
A very good W3school tutorial can be found here.

javascript MediaRecorder does not record on stop

I want to record some audio using javascript. I found some explanations, but it doesn’t work for me. As far as I understood my code below, stop should trigger addEventListener('dataavailable' .... But as far as I can tell, this code is never executed. Could someone tell me what I have to change that the eventlistener is being executed?

var demo = document.getElementById("demo")
const startButton = document.getElementById('start');
const stopButton = document.getElementById('stop');

let media_recorder
let audioChunks = []

// https://developers.deepgram.com/docs/getting-started-with-pre-recorded-audio
// https://www.tutorialspoint.com/how-to-record-and-play-audio-in-javascript
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        demo.innerHTML += "demo"
        // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event
        media_recorder = new MediaRecorder(stream);
        media_recorder.addEventListener('dataavailable', e => {
            audioChunks = []
            audioChunks.push(e.data);
        });

        startButton.addEventListener('click', () => {
            // audioChunks = [];
            media_recorder.start();
            demo.innerHTML += 'Recording started! Speak now.';
        });

        stopButton.onclick = () => {
            media_recorder.stop();
            demo.innerHTML += "stop "
            audioChunks = []
            demo.innerHTML += "Recording stoped!"
        };
    }).catch (err => {
        demo.innerHTML += err
    })
Tags:

2

Answers


  1. 0

    You have to put in media_recorder a number of millisecond after whose collecting audio data, for example

    media_recorder.start(200);

    Login or Signup to reply.
  2. 0

    I think clearing audioChunks unnecessarily caused this issue. Here is my try; I hope it helps. I also implemented an audio control to show it’s working, though it doesn’t work due to security reasons on Stack Overflow you should try in you own local host

    <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Recording Example</title>
</head>

<body>
  <div id="demo"></div>
  <button id="start">Start Recording</button>
  <button id="stop">Stop Recording</button>
  <audio id="audio" controls></audio>

  <script>
    var demo = document.getElementById("demo")
    const startButton = document.getElementById('start');
    const stopButton = document.getElementById('stop');
    const audio = document.getElementById('audio');

    let media_recorder
    let audioChunks = []

    // https://developers.deepgram.com/docs/getting-started-with-pre-recorded-audio
    // https://www.tutorialspoint.com/how-to-record-and-play-audio-in-javascript
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        demo.innerHTML += "demo"
        // https://developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/dataavailable_event
        media_recorder = new MediaRecorder(stream);
        media_recorder.addEventListener('dataavailable', e => {
          audioChunks.push(e.data); //remove audioChunks=[]
        });

        media_recorder.addEventListener('stop', () => {
          const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
          const audioUrl = URL.createObjectURL(audioBlob);
          audio.src = audioUrl;
          demo.innerHTML += "Recording stopped!";
        }); //This part is related to the control for demonstration purposes

        startButton.addEventListener('click', () => {
          audioChunks = []; //added this line
          media_recorder.start();
          demo.innerHTML += 'Recording started! Speak now.';
        });

        stopButton.onclick = () => {
          media_recorder.stop(); //remove audioChunks=[]
          demo.innerHTML += "stop "
          demo.innerHTML += "Recording stoped!"
        };
      }).catch(err => {
        demo.innerHTML += err
      })
  </script>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search