Vosk-Browser：在浏览器中运行的语音识别工具

vosk-browser 是一个在浏览器中运行的语音识别工具，基于 WebAssembly 技术构建，使用 Vosk 语音识别库。它支持在浏览器中直接处理麦克风输入或音频文件，提供离线语音转文字功能，无需依赖云端服务器。该工具支持英语、德语、法语、西班牙语等13种语言，适合需要在浏览器中实现语音识别的开发者。vosk-browser 通过 WebWorker 运行，优化了性能，避免阻塞浏览器主线程。用户可以通过简单的 JavaScript 代码加载模型并启动语音识别，适用于聊天机器人、智能家居或字幕生成等场景。项目由 Ciaran O’Reilly 开发，托管在 GitHub 上，拥有超过450个星标，社区活跃度较高。

功能列表

• 离线语音识别：无需网络连接，在浏览器中处理语音输入，保护用户隐私。
• 多语言支持：支持英语、德语、法语、西班牙语等13种语言，模型可扩展。
• 麦克风和音频文件输入：可处理实时麦克风输入或上传的音频文件。
• WebAssembly 优化：通过 WebAssembly 和 WebWorker 运行，确保高效且不阻塞浏览器。
• 简单集成：通过 CDN 或 npm 安装，支持快速嵌入网页。
• 实时结果输出：提供实时和部分识别结果，适合动态交互场景。
• 模型加载灵活：支持加载不同语言模型，模型以压缩格式存储，体积较小。

使用帮助

安装流程

vosk-browser 的使用非常简单，开发者可以通过以下方式将其集成到网页中：

1. 通过 CDN 引入：
   在 HTML 文件中添加以下代码，将 vosk-browser 库加载到页面：

   <script type="application/javascript" src="https://cdn.jsdelivr.net/npm/vosk-browser@0.0.5/dist/vosk.js"></script>
   

   加载后，Vosk 全局变量即可在 JavaScript 中使用。当前最新版本为 0.0.8，建议检查 npm 或 jsDelivr 获取最新版本。

2. 通过 npm 安装：
   如果使用模块化开发，可以通过 npm 安装：

   npm install vosk-browser
   

   然后在 JavaScript 文件中导入：

   import * as Vosk from 'vosk-browser';
   

3. 下载语言模型：
   vosk-browser 需要加载语言模型文件（格式为 .tar.gz），例如 vosk-model-small-en-us-0.15.tar.gz。这些模型可以从官方提供的链接（如 https://ccoreilly.github.io/vosk-browser/models/）下载。模型文件包含语音识别所需的配置文件和数据，例如 mfcc.conf 和 model.conf。对于高精度模型，需使用 mfcc_hires.conf。将模型文件放在与脚本相同的路径下，或指定模型的 URL。

使用步骤

以下是使用 vosk-browser 实现语音识别的详细步骤：

1. 加载模型：
   使用 Vosk.Model 构造函数加载模型。假设模型文件为 model.tar.gz，代码如下：

   async function loadModel() {
   const model = await Vosk.createModel('model.tar.gz');
   return model;
   }
   

   模型加载可能需要几秒，具体取决于文件大小和网络速度。建议使用小型模型（如 50MB）以提高加载速度。

2. 初始化识别器：
   创建识别器并指定采样率（通常与音频上下文一致，例如 16000Hz）：

   async function startRecognition(model) {
   const ctx = new AudioContext();
   const recognizer = await Vosk.createRecognizer(model, ctx.sampleRate);
   return { recognizer, ctx };
   }
   

3. 捕获麦克风输入：
   使用浏览器的 navigator.mediaDevices.getUserMedia 获取麦克风输入：

   async function setupMic(ctx) {
   const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
   const micNode = ctx.createMediaStreamSource(stream);
   return micNode;
   }
   

4. 处理识别结果：
   监听 result 和 partialResult 事件，获取完整或部分的识别结果：

   recognizer.addEventListener('result', (ev) => {
   console.log('完整结果:', ev.detail.text);
   });
   recognizer.addEventListener('partialResult', (ev) => {
   console.log('部分结果:', ev.detail.text);
   });
   

5. 传输音频数据：
   将麦克风音频数据传输到识别器：

   async function connectAudio(ctx, micNode, recognizer) {
   const transferer = await Vosk.createTransferer(ctx, 128 * 150);
   transferer.port.onmessage = (ev) => recognizer.acceptWaveform(ev.data);
   micNode.connect(transferer);
   }
   

6. 启动识别：
   组合上述步骤，启动语音识别：

   async function start() {
   const model = await loadModel();
   const { recognizer, ctx } = await startRecognition(model);
   const micNode = await setupMic(ctx);
   await connectAudio(ctx, micNode, recognizer);
   }
   document.getElementById('startButton').onclick = start;
   

特色功能操作

• 实时识别：通过 partialResult 事件，开发者可以在用户说话时实时获取部分识别结果，适合聊天机器人或实时字幕场景。
• 多语言切换：只需更换模型文件（例如 vosk-model-fr-0.22.tar.gz 切换到法语），即可支持其他语言，无需修改代码。
• 离线运行：所有处理都在浏览器本地完成，无需服务器支持，适合隐私敏感场景。
• 事件管理：支持动态添加或移除事件监听器。例如，移除结果监听器：

  recognizer.removeEventListener('result', callbackFunction);
  

  这在动态界面（如 Vue.js 应用）中非常有用。

注意事项

• 模型选择：小型模型适合快速加载，但精度较低；大型模型（如带 rescore 的模型）精度更高，但需要更多内存。
• 浏览器兼容性：确保浏览器支持 WebAssembly 和 Web Audio API（如 Chrome、Firefox）。
• 性能优化：使用 WebWorker 避免阻塞主线程，但需注意模型加载时间可能较长，建议预加载模型。

应用场景

1. 聊天机器人
   开发者可以将 vosk-browser 集成到网页聊天机器人中，通过麦克风输入实现语音交互，适合在线客服或虚拟助手。
2. 字幕生成
   上传音频文件后，vosk-browser 可生成字幕，适用于视频内容创作者或教育平台。
3. 智能家居控制
   在浏览器中实现语音命令识别，控制智能设备，例如开关灯光或调整温度。
4. 语言学习工具
   学生可以通过麦克风练习发音，vosk-browser 实时反馈发音文本，帮助改进口语。

QA

1. vosk-browser 是否需要网络连接？
   不需要。vosk-browser 支持完全离线运行，模型和处理都在本地完成，适合无网络环境。
2. 支持哪些语言？
   当前支持英语、德语、法语、西班牙语等13种语言，未来可通过新模型扩展更多语言。
3. 如何提高识别精度？
   使用高精度模型（如带 rescore 的模型）并确保麦克风质量良好。调整模型的 model.conf 文件中的解码参数也可优化效果。
4. 为什么识别结果延迟？
   延迟可能由模型加载时间或硬件性能引起。建议使用小型模型或优化浏览器性能。