Javascript 中的音频录制答案

【问题标题】：Audio Recording in Java ScriptJavascript 中的音频录制
【发布时间】：2021-08-12 08:14:46
【问题描述】：

我知道这是一个常见问题，但出于某种原因，有几个答案（这让我感到困惑）

tl;博士我正在尝试设置一个按钮，让您录制自己长达 10 秒（如果您想停止录制，可以按停止）然后让你玩。

到目前为止我所尝试的：

我知道有库getUserMedia，并且我已经（尝试）创建了一个MediaStream。当涉及到录音本身以及.Start() 和 Stop() 时，我感到困惑

这是我获取用户访问麦克风权限的代码：

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);

谢谢你们！

【问题讨论】：

欢迎来到 StackOverflow！请阅读How do I ask a good question?和How to create a Minimal, Reproducible Example
这能回答你的问题吗？ How to capture audio in javascript?
@TangentiallyPerpendicular 我不明白用法，以及如何使用它。如果有什么方法可以解释代码本身，我想完全理解代码并且他没有提供实际解释：/

标签： javascript html html5-audio

【解决方案1】：

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

【讨论】：

它有效！太感谢了！我可以将它用于我正在发布的项目吗？顺便说一句，你介意解释一下吗:)？
开始按钮调用getmiceacesses函数，该函数创建一个MediaRecorder对象（MediaStream Recording API的MediaRecorder接口提供了轻松录制媒体的功能）并开始录制。 setTimeout 函数在 10 秒后调用 stopRecorder（之前总是可以通过单击停止按钮停止）。当调用 stopRecorder 函数时，我们检查 mediaRecorder 是否正在录制，如果是，我们通过调用 mediaRecorder.stop() 函数停止录制。
当这个函数被调用时，dataavailable EventListener被调用并且Data被添加到audioChunks Array中。
太好了！谢谢！我可以将此代码用于我的项目吗？任何许可证或什么？顺便说一句 - 要检查用户是否拒绝了访问，我可以在开头添加一个 if 语句吗？