如何在 JavaScript 中录制和播放音频？

JavaScript 是一种非常灵活的语言，它提供了许多 API 支持来做许多有用的事情。这里一件重要的事情是在网页中录制音频或视频也是使用 JavaScript 完成的。在这种情况下，它会要求用户对浏览器进行麦克风访问并通过麦克风记录音频并将音频数据块以二进制值的形式保存在数组中，当我们播放音频时，然后检索卡盘数据并开始播放。视频也会发生同样的事情，当我们进行视频会议时，这实际上发生在服务器中，唯一的问题是我们在同一页面上播放视频，而在视频会议的情况下，视频将在另一端播放。

整个过程使用 API 进行，即MediaRecorder API。此 API 提供录制音频或视频等媒体的功能。它是使用MediaRecorder()构造函数创建的。

这里我们使用 JavaScript 的一个属性，即mediaDevices属性，用于访问连接的输入媒体设备，如麦克风、网络摄像头等。该属性使用 getUserMedia()方法获取访问麦克风、网络摄像头等的权限。此方法向导航器对象返回一个承诺。

承诺如下：

如果是真的：

• resolve ：如果获得所有权限并且麦克风或摄像头工作正常，则它返回一个MediaStream对象。这是主要的记录数据。

如果为假：

• NotAllowedError：如果用户拒绝录制权限。
• NotFoundError：如果没有媒体轨道。
• NotReadableError：如果未找到输入设备或硬件不工作。
• 过度约束错误：如果约束音频设置被阻止。
• AbortError：如果找到通用的未知原因。
• TypeError: If audio: false在 Javascript 代码中声明。

例子：

  

  
  
    let audioIN = { audio: true };
    //  audio is true, for recording
  
    // Access the permission for use
    // the microphone
    navigator.mediaDevices.getUserMedia(audioIN)
  
      // 'then()' method returns a Promise
      .then(function (mediaStreamObj) {
  
        // Connect the media stream to the
        // first audio element
        let audio = document.querySelector('audio');
        //returns the recorded audio via 'audio' tag
  
        // 'srcObject' is a property which 
        // takes the media object
        // This is supported in the newer browsers
        if ("srcObject" in audio) {
          audio.srcObject = mediaStreamObj;
        }
        else {   // Old version
          audio.src = window.URL
            .createObjectURL(mediaStreamObj);
        }
  
        // It will play the audio
        audio.onloadedmetadata = function (ev) {
  
          // Play the audio in the 2nd audio
          // element what is being recorded
          audio.play();
        };
  
        // Start record
        let start = document.getElementById('btnStart');
  
        // Stop record
        let stop = document.getElementById('btnStop');
  
        // 2nd audio tag for play the audio
        let playAudio = document.getElementById('adioPlay');
  
        // This is the main thing to recorde 
        // the audio 'MediaRecorder' API
        let mediaRecorder = new MediaRecorder(mediaStreamObj);
        // Pass the audio stream 
  
        // Start event
        start.addEventListener('click', function (ev) {
          mediaRecorder.start();
          // console.log(mediaRecorder.state);
        })
  
        // Stop event
        stop.addEventListener('click', function (ev) {
          mediaRecorder.stop();
          // console.log(mediaRecorder.state);
        });
  
        // If audio data available then push 
        // it to the chunk array
        mediaRecorder.ondataavailable = function (ev) {
          dataArray.push(ev.data);
        }
  
        // Chunk array to store the audio data 
        let dataArray = [];
  
        // Convert the audio data in to blob 
        // after stopping the recording
        mediaRecorder.onstop = function (ev) {
  
          // blob of type mp3
          let audioData = new Blob(dataArray, 
                    { 'type': 'audio/mp3;' });
            
          // After fill up the chunk 
          // array make it empty
          dataArray = [];
  
          // Creating audio url with reference 
          // of created blob named 'audioData'
          let audioSrc = window.URL
              .createObjectURL(audioData);
  
          // Pass the audio url to the 2nd video tag
          playAudio.src = audioSrc;
        }
      })
  
      // If any error occurs then handles the error 
      .catch(function (err) {
        console.log(err.name, err.message);
      });
  

  

  
    Record and Play Audio in JavaScript
  
  
  
    START RECORDING
                
    STOP RECORDING
    
  
  
  
  
  
  
  
  

  

输出：