SenseVoice-Small语音识别模型在Vue3项目中的集成指南-开发者社区

SenseVoice-Small语音识别模型在Vue3项目中的集成指南

语音识别技术正在快速改变我们与设备交互的方式，从智能助手到实时转录，声音成为了新的输入界面。SenseVoice-Small作为一个轻量级的语音识别模型，非常适合在前端项目中集成，为你的Vue3应用增添语音交互能力。

今天咱们就来手把手教你，如何在Vue3项目中完整集成SenseVoice-Small模型，实现浏览器端的语音识别功能。不需要复杂的后端服务，一切都在前端完成。

1. 环境准备与项目搭建

首先确保你已经有一个Vue3项目。如果还没有，可以通过Vite快速创建一个：

npm create vite@latest my-voice-app -- --template vue cd my-voice-app npm install

接下来安装必要的依赖：

npm install onnxruntime-web

ONNX Runtime Web是运行ONNX模型的关键，它提供了在浏览器中执行机器学习模型的能力。SenseVoice-Small模型通常以ONNX格式提供，这样我们就可以直接在浏览器中加载和运行它。

2. 获取并准备SenseVoice-Small模型

SenseVoice-Small的ONNX模型文件通常包含几个部分：主模型文件（.onnx）和相关的词汇表文件。你可以从官方渠道获取这些文件后，将它们放在项目的public/models目录下。

如果你的项目需要从远程加载模型，确保服务器配置了正确的CORS策略允许前端访问这些模型文件。

3. 前端音频采集实现

在Vue3中，我们可以使用Web Audio API来捕获用户的麦克风输入。创建一个VoiceRecorder组件来处理音频采集：

<template> <div> <button @click="isRecording ? stopRecording() : startRecording()"> {{ isRecording ? '停止录音' : '开始录音' }} </button> <p>{{ statusText }}</p> </div> </template> <script setup> import { ref } from 'vue' const isRecording = ref(false) const statusText = ref('准备就绪') let mediaRecorder = null let audioChunks = ref([]) const startRecording = async () => { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }) mediaRecorder = new MediaRecorder(stream) audioChunks.value = [] mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { audioChunks.value.push(event.data) } } mediaRecorder.onstop = () => { processAudio() } mediaRecorder.start() isRecording.value = true statusText.value = '录音中...' } catch (error) { console.error('无法访问麦克风:', error) statusText.value = '麦克风访问失败' } } const stopRecording = () => { if (mediaRecorder && isRecording.value) { mediaRecorder.stop() mediaRecorder.stream.getTracks().forEach(track => track.stop()) isRecording.value = false statusText.value = '处理中...' } } const processAudio = async () => { // 这里将实现音频处理和识别 statusText.value = '音频处理中' } </script>

这个组件提供了基本的录音功能，用户点击按钮开始录音，再次点击停止并处理音频。

4. 配置ONNX Runtime Web环境

ONNX Runtime Web需要一些配置才能在前端正常工作。在项目入口文件（如main.js）中添加以下配置：

import { env } from 'onnxruntime-web' // 配置ONNX Runtime Web env.wasm.numThreads = 2 env.wasm.proxy = true env.wasm.wasmPaths = '/node_modules/onnxruntime-web/dist/'

这些配置确保了ONNX Runtime能够正确加载WebAssembly后端，这是在前端运行ONNX模型所必需的。

5. 加载和运行SenseVoice-Small模型

现在我们来创建模型加载和推理的核心逻辑。新建一个useVoiceRecognition.js组合式函数：

import { ref } from 'vue' import { InferenceSession } from 'onnxruntime-web' export function useVoiceRecognition() { const modelSession = ref(null) const isLoading = ref(false) const error = ref(null) const loadModel = async () => { isLoading.value = true try { // 加载ONNX模型 modelSession.value = await InferenceSession.create('/models/sensevoice-small.onnx') error.value = null } catch (e) { error.value = `模型加载失败: ${e.message}` console.error('模型加载错误:', e) } finally { isLoading.value = false } } const processAudio = async (audioBuffer) => { if (!modelSession.value) { await loadModel() } try { // 音频预处理：将音频转换为模型需要的输入格式 const processedData = preprocessAudio(audioBuffer) // 准备模型输入 const inputTensor = new Ort.Tensor('float32', processedData, [1, processedData.length]) // 运行模型推理 const outputs = await modelSession.value.run({ input: inputTensor }) // 后处理：将模型输出转换为文本 const recognizedText = postProcessOutput(outputs) return recognizedText } catch (e) { console.error('识别错误:', e) throw new Error(`语音识别失败: ${e.message}`) } } const preprocessAudio = (audioBuffer) => { // 实际的音频预处理逻辑 // 包括重采样、归一化、特征提取等步骤 // 这里需要根据SenseVoice-Small模型的具体要求实现 return preprocessedData } const postProcessOutput = (modelOutput) => { // 将模型输出转换为文本 // 通常涉及beam search解码和词汇表映射 return recognizedText } return { loadModel, processAudio, isLoading, error } }

6. 完整集成示例

现在我们将所有部分整合到一个完整的Vue组件中：

<template> <div class="voice-recognition-container"> <h2>语音识别演示</h2> <button @click="toggleRecording" :disabled="isLoading" :class="{ 'recording': isRecording }" > {{ buttonText }} </button> <div v-if="isLoading" class="status">模型加载中...</div> <div v-if="error" class="error">{{ error }}</div> <div v-if="recognizedText" class="result"> <h3>识别结果:</h3> <p>{{ recognizedText }}</p> </div> <div v-if="isRecording" class="visualizer"> <!-- 这里可以添加音频可视化组件 --> </div> </div> </template> <script setup> import { ref, computed, onMounted } from 'vue' import { useVoiceRecognition } from '../composables/useVoiceRecognition' const { loadModel, processAudio, isLoading, error } = useVoiceRecognition() const isRecording = ref(false) const recognizedText = ref('') let mediaStream = null let audioContext = null const buttonText = computed(() => { if (isLoading.value) return '加载中...' return isRecording.value ? '停止录音' : '开始录音' }) onMounted(async () => { await loadModel() }) const toggleRecording = async () => { if (isRecording.value) { stopRecording() } else { await startRecording() } } const startRecording = async () => { try { mediaStream = await navigator.mediaDevices.getUserMedia({ audio: true }) audioContext = new AudioContext() const source = audioContext.createMediaStreamSource(mediaStream) // 设置音频处理节点 const processor = audioContext.createScriptProcessor(1024, 1, 1) source.connect(processor) processor.connect(audioContext.destination) processor.onaudioprocess = (event) => { // 实时处理音频数据 const audioData = event.inputBuffer.getChannelData(0) // 这里可以添加实时可视化逻辑 } isRecording.value = true } catch (err) { console.error('录音启动失败:', err) error.value = '无法访问麦克风' } } const stopRecording = async () => { if (mediaStream) { mediaStream.getTracks().forEach(track => track.stop()) } isRecording.value = false try { // 处理最后一段音频 recognizedText.value = await processAudio() } catch (err) { error.value = err.message } } </script> <style scoped> .voice-recognition-container { max-width: 600px; margin: 0 auto; padding: 20px; text-align: center; } button { padding: 15px 30px; font-size: 18px; background-color: #4CAF50; color: white; border: none; border-radius: 5px; cursor: pointer; margin: 20px 0; } button.recording { background-color: #f44336; animation: pulse 1.5s infinite; } @keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.7; } 100% { opacity: 1; } } .error { color: #f44336; margin: 10px 0; } .result { margin-top: 20px; padding: 15px; background-color: #f5f5f5; border-radius: 5px; } </style>

7. 性能优化和实践建议

在实际项目中，你可能还需要考虑以下优化措施：

内存管理：语音识别可能占用较多内存，确保及时清理不再使用的音频数据和模型中间结果。

实时处理优化：对于实时语音识别，可以考虑使用Web Worker将模型推理放在后台线程，避免阻塞UI。

// 创建Web Worker进行处理 const recognitionWorker = new Worker('/src/workers/voice-recognition.js') recognitionWorker.onmessage = (event) => { recognizedText.value = event.data } // 将音频数据发送到Worker处理 recognitionWorker.postMessage(audioData)

模型量化：如果性能要求较高，可以考虑使用量化版本的模型，减小模型大小并提高推理速度。

降噪处理：在音频预处理阶段添加降噪算法，可以提高识别准确率。

超时处理：添加录音超时机制，避免长时间占用麦克风。