浏览器 实时监听音量 实时语音识别 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)}