浏览器 实时监听音量 实时语音识别 vue js

一、需求

最近前端需要实现实时语音识别的功能， 但如果24小时不停识别会消耗很多资源，所以我写了一段代码来监听音量， 当音量大于阈值开启录音， 当音量连续小于阈值3秒停止录音， 由于是命令识别，我加了一个条件，若已经录音10秒也会自动停止录音。

二、代码

  let isDoing = false;  // 是否正在录音
  let doingTime = 0;      // 本次录音时长
  let doingNone = 0;      // 录音无声时长

  let maxTime = 10;     // 自定义最大录音时长
  let stopTime = 3;     // 自定义连续3秒无声断开
  let startVolume = 80; // 自定义达到80音量开始录音


  // 获取麦克风流并创建音频上下文
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const audioContext = new AudioContext();
  const analyser = audioContext.createAnalyser();
  const microphone = audioContext.createMediaStreamSource(stream);

  // 连接分析节点
  microphone.connect(analyser);
  analyser.fftSize = 256;
  const bufferLength = analyser.frequencyBinCount;
  const dataArray = new Uint8Array(bufferLength);

  // 实时计算音量
  function getVolume() {
    analyser.getByteFrequencyData(dataArray);
    let sum = 0;
    for (let i = 0; i < bufferLength; i++) {
      sum += dataArray[i];
    }
    const avgVolume = sum / bufferLength;
    return avgVolume.toFixed(2);
  }
  try {
  setInterval(() => {
    console.log(`开始检测`);
    let volume = getVolume(); // 开始检测
    if (volume > startVolume) {
      doingNone = 0;
      if (isDoing) {
        doingTime = doingTime + 1;
        if (doingTime > maxTime) {
          //todo 超过10秒结束录音
        }
      }else {
        doingTime = 0;
        //todo 调用开始录音方法
      }
    }else if(isDoing) {
      doingNone = doingNone + 1;
      if (doingNone > stopTime) {
        //todo 超过3秒无声音结束录音
      }
    }
  }, 1000)
  } catch (error) {
    console.error('麦克风访问错误:', error)
  }