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

一、需求

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

二、代码

javascript 复制代码
  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)
  }
相关推荐
Ares-Wang14 分钟前
Vue2 》》Vue3》》 Render函数 h
javascript
葡萄城技术团队25 分钟前
SpreadJS 纯前端表格控件:破解中国式复杂报表技术文档
前端
Humbunklung26 分钟前
C# 压缩解压文件的常用方法
前端·c#·压缩解压
通往曙光的路上31 分钟前
时隔一天第二阶段他来了 html!!!!!!!!!!!
前端·html
爱吃甜品的糯米团子1 小时前
CSS图片背景属性
前端·css
雮尘1 小时前
一文读懂Android Fragment栈管理
android·前端
Aoda1 小时前
浏览器字体设置引发的Bug:从一次调查到前端字体策略的深度思考
前端·css
朝与暮1 小时前
《javascript进阶-类(class):构造函数的语法糖》
前端·javascript
入秋1 小时前
Three.js 实战之电子围栏可根据模型自动生成
前端·前端框架·three.js
用户6120414922131 小时前
jsp+servlet做的咖啡品牌管理后台
java·前端·后端