vue3+vosk-browser离线语音识别功能
简介：
Vosk-Browser 是指将 Vosk 语音识别工具 应用于浏览器环境中。Vosk 是一个离线开源的语音识别库，支持多种语言和平台，包括通过 WebAssembly (Wasm) 在浏览器中运行。
如何在浏览器中使用 Vosk？
Vosk 提供了 JavaScript/WebAssembly 版本，可以直接在网页中实现离线语音识别，无需依赖云端服务。
1,安装vosk-browser
npm i vosk-browser2，在官网下载一个模型 https://alphacephei.com/vosk/models 本地用small，准确率不是100%
放在public下
3，在页面使用
<template> <div class=\"bg\"> <button @click=\"startRecording\">开始录音</button> <button @click=\"stopRecording\">停止录音</button> </div></template><script setup lang=\"ts\">import { ref, onMounted, onUnmounted } from \'vue\';import { createModel } from \'vosk-browser\';const isListening = ref(false);const error = ref(null);let recognition = null;let model = null;// 采样率let mySampleRate = 16000// 初始化模型const initModel = async () => { try { model = await createModel(\"/vosk-model-small-cn-0.22.zip\"); console.log(\"模型加载成功！\"); // startRecording() } catch (error) { error.value = `模型加载失败: ${err.message}`; console.error(\"模型加载错误:\", err); }};// 开始录音const startRecording = async () => { try { // 1. 获取音频流（确保采样率匹配） const mediaStream = await navigator.mediaDevices.getUserMedia({ video: false, audio: { echoCancellation: true, noiseSuppression: true, channelCount: 1, sampleRate: mySampleRate }, }); console.log(\'音频流获取成功\', mediaStream.getAudioTracks()[0].label); // 2. 创建识别器（ const recognizer = new model.KaldiRecognizer(mySampleRate); console.log(\'识别器创建成功\', recognizer); // 3. 设置事件监听 recognizer.on(\"result\", (message) => { console.log(\'识别结果:\', message.result?.text || \'无文本\'); }); recognizer.on(\"partialresult\", (message) => { // if (message.result?.partial) { // console.log(\'临时结果:\', message.result?.partial || \'无文本\'); // } }); recognizer.on(\"error\", (err) => { console.error(\'识别器错误:\', err); }); // 4. 创建音频上下文（确保采样率匹配） const audioContext = new AudioContext({ sampleRate: mySampleRate }); console.log(\'创建音频上下文（确保采样率匹配）\', audioContext) // 5. 设置音频处理节点 const recognizerNode = audioContext.createScriptProcessor(4096, 1, 1) console.log(\'设置音频处理节点\', recognizerNode) recognizerNode.onaudioprocess = (event) => { try { // 1. 增强音频信号（应用增益） const channelData = event.inputBuffer.getChannelData(0); const boostedData = new Float32Array(channelData.length); // 应用5倍增益（根据实际情况调整） const gainMultiplier = 5.0; for (let i = 0; i < channelData.length; i++) { boostedData[i] = Math.min(1.0, Math.max(-1.0, channelData[i] * gainMultiplier)); } // 2. 调试输出 const maxVolume = Math.max(...Array.from(boostedData).map(Math.abs)); // console.log(\'增强后音频峰值:\', maxVolume.toFixed(4)); // 3. 提交处理 if (maxVolume > 0.01) { // 有效音量阈值 if (recognizer.acceptWaveformFloat) { // 使用底层API确保兼容性 recognizer.acceptWaveformFloat(boostedData, mySampleRate); } else { // 标准处理方式 recognizer.acceptWaveform(event.inputBuffer); } } } catch (error) { console.error(\'音频处理错误:\', error); } } const source = audioContext.createMediaStreamSource(mediaStream); source.connect(recognizerNode); recognizerNode.connect(audioContext.destination); console.log(\"语音识别已启动\"); // 返回停止方法 return () => { mediaStream.getTracks().forEach(track => track.stop()); recognizerNode.disconnect(); audioContext.close(); }; } catch (err) { console.error(\'初始化失败:\', { error: err.message, stack: err.stack }); error.value = `麦克风访问失败: ${err.message}`; }};// 停止录音const stopRecording = () => { if (recognition) { recognition.stop(); isListening.value = false; }};onMounted(() => { initModel();})onUnmounted(() => { if (recognition) recognition.stop(); console.log(\'卸载\')});</script>
备注：
1，目前只用星愿浏览器测试过，火狐提示不能固定采样率，目前设置的采样率是16000，不是很理解这个值
查了一下是这个原因，也尝试按搜的方法获取采样率，获取的值是48000，识别结果无法使用
2，收不到声音测试一下电脑音频输入是否好使
