浏览器 实时监听音量 实时语音识别 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)
  }
相关推荐
灵犀学长3 分钟前
解锁HTML5页面生命周期API:前端开发的新视角
前端·html·html5
源码云商11 分钟前
基于 SpringBoot + Vue 的 IT 技术交流和分享平台的设计与实现
vue.js·spring boot·后端
江号软件分享12 分钟前
轻松解决Office版本冲突问题:卸载是关键
前端
致博软件F2BPM19 分钟前
Element Plus和Ant Design Vue深度对比分析与选型指南
前端·javascript·vue.js
慧一居士1 小时前
flex 布局完整功能介绍和示例演示
前端
DoraBigHead1 小时前
小哆啦解题记——两数失踪事件
前端·算法·面试
一斤代码7 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子7 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年7 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子7 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架