使用 JavaScript 使用麦克风音频进行屏幕录制

本文将介绍如何使用 JavaScript 编写屏幕录制应用程序，其中包括如何录制电脑上的音频并将其存储到本地文件系统中。

第一步：获取麦克风权限

要使用麦克风录制音频，需要获取用户授权。您可以使用 getUserMedia() 方法请求授权。以下示例演示如何获取麦克风权限：

navigator.getUserMedia = navigator.getUserMedia ||
                         navigator.webkitGetUserMedia ||
                         navigator.mozGetUserMedia ||
                         navigator.msGetUserMedia;

if (navigator.getUserMedia) {
  navigator.getUserMedia({audio: true}, successCallback, errorCallback);
} else {
  console.log('getUserMedia not supported on your browser!');
}

function successCallback(stream) {
  // 麦克风权限已授权，可以开始录制
}

function errorCallback(error) {
  console.log('navigator.getUserMedia error: ', error);
}

第二步：创建 MediaRecorder 实例

使用 MediaRecorder 可以在浏览器中录制音频和视频。以下示例演示如何创建 MediaRecorder 实例：

let mediaRecorder = new MediaRecorder(stream, options);

mediaRecorder.ondataavailable = function(event) {
  // 数据可用，存储到本地
};

mediaRecorder.start();

第三步：录制音频

现在，您可以调用 MediaRecorder 的 start() 方法来开始录制音频。然后，当录制完成时，可以调用 stop() 方法并将数据传递给 ondataavailable 事件处理程序。

以下示例演示如何录制音频并将其存储到本地文件系统：

let mediaRecorder = new MediaRecorder(stream, options);
let chunks = [];

mediaRecorder.ondataavailable = function(event) {
  chunks.push(event.data);
};

mediaRecorder.onstop = function() {
  let blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
  let url = URL.createObjectURL(blob);
  let a = document.createElement('a');

  a.href = url;
  a.download = 'my-recording.ogg';
  a.click();
};

mediaRecorder.start();

setTimeout(function() {
  mediaRecorder.stop();
}, 5000);

总结

在本文中，我们介绍了如何使用 JavaScript 在浏览器中录制麦克风音频并将其存储到本地文件系统中。您可以根据自己的需求查看 MediaRecorder 的更多选项和方法。