admin管理员组

文章数量:1022752

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 = []

// 
// 
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        demo.innerHTML += "demo"
        // 
        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
    })

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/docs/getting-started-with-pre-recorded-audio
// https://www.tutorialspoint/how-to-record-and-play-audio-in-javascript
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        demo.innerHTML += "demo"
        // https://developer.mozilla./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
    })
  • javascript
  • audio
  • mediarecorder
Share Improve this question asked Nov 19, 2024 at 10:08 marcomarco 3124 silver badges13 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 2

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/docs/getting-started-with-pre-recorded-audio
    // https://www.tutorialspoint/how-to-record-and-play-audio-in-javascript
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        demo.innerHTML += "demo"
        // https://developer.mozilla./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>

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

media_recorder.start(200);

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 = []

// 
// 
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        demo.innerHTML += "demo"
        // 
        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
    })

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/docs/getting-started-with-pre-recorded-audio
// https://www.tutorialspoint/how-to-record-and-play-audio-in-javascript
navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
        demo.innerHTML += "demo"
        // https://developer.mozilla./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
    })
  • javascript
  • audio
  • mediarecorder
Share Improve this question asked Nov 19, 2024 at 10:08 marcomarco 3124 silver badges13 bronze badges
Add a comment  | 

2 Answers 2

Reset to default 2

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/docs/getting-started-with-pre-recorded-audio
    // https://www.tutorialspoint/how-to-record-and-play-audio-in-javascript
    navigator.mediaDevices.getUserMedia({ audio: true })
      .then(stream => {
        demo.innerHTML += "demo"
        // https://developer.mozilla./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>

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

media_recorder.start(200);

本文标签： audiojavascript MediaRecorder does not record on stopStack Overflow

版权声明：本文标题：audio - javascript MediaRecorder does not record on stop - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745568865a2156613.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。