主页 / coding / 问题 / 79202956
Accepted
marco
Asked: 2024-11-19 18:08:03 +0800 CST

javascript MediaRecorder 停止时不录制

  • 772

我想使用 javascript 录制一些音频。我找到了一些解释，但对我来说不起作用。据我了解，下面的代码stop应该触发addEventListener('dataavailable' ...。但据我所知，此代码从未执行过。有人能告诉我我必须更改什么才能eventlistener执行吗？

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
    })
javascript

2 个回答

  1. Best Answer

    我认为不必要的清除audioChunks导致了这个问题。这是我的尝试；希望它能有所帮助。我还实现了一个音频控制来显示它正在工作，尽管由于 Stack Overflow 上的安全原因它不起作用，你应该在自己的本地主机上尝试

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

    • 2

  2. 您必须在 media_recorder 中输入收集音频数据的毫秒数，例如

    媒体记录器.启动（200）；

    • -1

相关问题