浏览器 实时监听音量 实时语音识别 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)
  }
相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子2 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina2 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路3 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_3 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js