浏览器通过原生JS实现录音功能

一. AudioContext介绍

• AudioContext接口表示由链接在一起的音频模块构建的音频处理图，每个模块由一个AudioNode表示。音频上下文控制它包含的节点的创建和音频处理或解码的执行。在做任何其他操作之前，您需要创建一个AudioContext对象，因为所有事情都是在上下文中发生的。建议创建一个AudioContext对象并复用它，而不是每次初始化一个新的AudioContext对象，并且可以对多个不同的音频源和管道同时使用一个AudioContext对象。详情
• AudioContext 兼容写法

if (!window.AudioContext) {
   
   window.AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
}

二. getUserMedia介绍

• Navigator.getUserMedia()方法提醒用户需要使用音频（0或者1）和（0或者1）视频输入设备，比如相机，屏幕共享，或者麦克风。如果用户给予许可，successCallback回调就会被调用，MediaStream对象作为回调函数的参数。如果用户拒绝许可或者没有媒体可用，errorCallback就会被调用，类似的，PermissionDeniedError 或者NotFoundError对象作为它的参数。注意，有可能以上两个回调函数都不被调用，因为不要求用户一定作出选择（允许或者拒绝）。详情
• Navigator.getUserMedia 兼容写法

// 老版浏览器可能根本没有实现mediaDevices, 为其设置一个空对象
if (!navigator.mediaDevices) {
   
  navigator.mediaDevices = {
   };
}
if (!navigator.mediaDevices.getUserMedia) {
   
  navigator.mediaDevices.getUserMedia = function (constraints) {
   
    let getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
    // 浏览器不支持
    if (!getUserMedia) {
   
      return Promise.reject(new Error('您的浏览器暂不支持 getUserMedia !'));
    }
    // 包装老版 getUserMedia
    return new Promise((resolve, reject) => getUserMedia.call(navigator, constraints, resolve, reject));
  }
}

三. MediaRecorder介绍

• MediaDevices 接口提供访问连接媒体输入的设备，如照相机和麦克风，以及屏幕共享等。它可以使你取得任何硬件资源的媒体数据。详情

四. 录音执行流程