vue3+vosk-browser离线语音识别功能

简介：

Vosk-Browser 是指将 Vosk 语音识别工具 应用于浏览器环境中。Vosk 是一个离线开源的语音识别库，支持多种语言和平台，包括通过 WebAssembly (Wasm) 在浏览器中运行。

如何在浏览器中使用 Vosk？

Vosk 提供了 JavaScript/WebAssembly 版本，可以直接在网页中实现离线语音识别，无需依赖云端服务。
1,安装vosk-browser

npm i vosk-browser

2，在官网下载一个模型 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，收不到声音测试一下电脑音频输入是否好使