实时监测麦克风音量及检测MIC

调用的技术:

Web Audio API(navigator.getUserMedia(),目前推荐使用最新的接口MediaDevices.getUserMedia())

RecordRTC(用来录音,暂时可忽略)

可参考:https://zhuanlan.zhihu.com/p/26536898、https://codepen.io/huooo/pen/LBKPZp

注意:

navigator.mediaDevices.getUserMedia({audio: true}).then((stream) => {});此方法谷歌浏览器不支持,如果要实时获取麦克风音量,可写在navigator.getUserMedia({audio: true}, onSuccess, onError); onSuccess里,onError可检测MIC是否异常。具体代码如下:

let mediaStreamSource = null;
let scriptProcessor = null;
let isRecord = false;

navigator.getUserMedia = navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.mozGetUserMedia || navigator.webkitGetUserMedia;
navigator.getUserMedia({ audio: true, video: true }, (stream) => {
 beginDetect(stream);
}, () => {
  // 异常情况处理,MIC异常
});
// 麦克风音量检测
function beginDetect(stream){
  // 将麦克风的声音输入这个对象
  mediaStreamSource = audioContext.createMediaStreamSource(stream);
  // 创建一个音频分析对象,采样的缓冲区大小为4096,输入和输出都是单声道
  scriptProcessor = audioContext.createScriptProcessor(4096,1,1);
  // 将该分析对象与麦克风音频进行连接
  mediaStreamSource.connect(scriptProcessor);
  // 此举无甚效果,仅仅是因为解决 Chrome 自身的 bug
  scriptProcessor.connect(audioContext.destination);
  // 开始处理音频
  scriptProcessor.onaudioprocess = (e) => {
    if(isRecord) {
      // 获得缓冲区的输入音频,转换为包含了PCM通道数据的32位浮点数组
      const buffer = e.inputBuffer.getChannelData(0);
      // 获取缓冲区中最大的音量值
      const maxVal = Math.max(...buffer);
      // 显示音量值
      const mv = Math.round(maxVal * 100);
    }
  };
};

你可能感兴趣的:(Web,Audio,API)