Vosk-Browser

2025-07-28语音转文字40 次浏览

综合介绍

Vosk-Browser 是一个JavaScript库，它允许开发者在网页浏览器中直接运行高效的语音识别功能。这个库的核心优势在于它将强大的Vosk语音识别引擎通过WebAssembly技术移植到了浏览器环境中，从而实现了完全离线的语音处理。这意味着用户的语音数据无需发送到云端服务器，直接在本地设备上就能完成识别，这不仅大大提升了响应速度，也有效保护了用户隐私。Vosk-Browser支持超过20种语言和方言，并且能够进行实时、连续的语音转写。由于其轻量化的设计，开发者可以轻松地将其集成到各类网页应用中，为用户提供诸如语音命令、实时字幕、语音笔记等互动功能，并且这一切都无需依赖网络连接。

功能列表

完全离线识别：借助WebAssembly技术，在用户的浏览器中直接运行语音识别，无需将音频数据发送到服务器。
多语言支持：支持超过20种语言和方言，包括英语、中文、德语、法语、西班牙语、俄语等。
实时流式处理：提供流式API，可以对音频流进行低延迟的实时识别，获得即时反馈。
Web Worker 支持：专门为在Web Worker上下文中运行而编译，避免阻塞浏览器主线程，确保用户界面流畅。
轻量级模型：提供小巧的语言模型（约50MB），方便在网页应用中快速加载和部署。
自定义词汇表：允许在使用时快速配置词汇表，以提高特定场景下的识别准确率。
支持扬声器识别：除了语音识别，还具备区分不同说话者的能力。

使用帮助

Vosk-Browser将强大的Vosk语音识别引擎带到了浏览器端，让网页应用也能拥有离线、实时的语音转文字能力。以下是详细的使用说明，旨在帮助你快速上手。

安装

你可以通过两种主要方式将Vosk-Browser集成到你的项目中：

1. 使用NPM包管理器 (推荐)

如果你的项目使用Node.js环境和NPM，这是最常见的集成方式。

在你的项目根目录下打开终端，然后运行以下命令：

npm i vosk-browser

安装完成后，你就可以在你的JavaScript或TypeScript文件中通过import语句来引入和使用这个库。

2. 使用CDN链接

对于简单的静态网页或者快速原型开发，你可以直接在HTML文件中通过<script>标签引入。这种方式会将Vosk对象挂载到全局的window对象上。

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

核心使用流程

核心流程包括三个步骤：创建模型、创建识别器实例、处理音频流。

1. 下载和准备语言模型

Vosk需要一个语言模型文件来进行识别。这些模型是针对特定语言训练的，你需要从Vosk官方网站下载你需要的语言模型。这些模型通常是.zip或.tar.gz格式的压缩包，你需要将其解压并放置在你的项目服务器可以访问到的路径下。

2. 编写代码

以下是一个基本的使用示例，它演示了如何从用户的麦克风获取音频，并将其转换为文字。

// 确保页面加载完成后再执行初始化
window.onload = async () => {
let recognizer; // 将识别器声明在外部，方便控制
// 获取页面上的按钮和显示区域
const startBtn = document.getElementById('start-btn');
const resultDiv = document.getElementById('result');
try {
// 步骤 1: 创建模型实例
// 这里的路径 'model.tar.gz' 应该指向你下载并放置在服务器上的模型文件
// Vosk.createModel 会自动下载并解压模型
console.log('正在加载模型...');
const model = await Vosk.createModel('path/to/your/model.tar.gz');
console.log('模型加载完成。');
// 创建识别器实例，使用模型的 KaldiRecognizer
recognizer = new model.KaldiRecognizer();
// 步骤 2: 设置识别器事件监听
// 当有最终识别结果时触发
recognizer.on("result", (message) => {
const resultText = message.result.text;
console.log(`最终结果: ${resultText}`);
if (resultText) {
resultDiv.innerHTML += `<p>${resultText}</p>`;
}
});
// 当有部分（中间）识别结果时触发
recognizer.on("partialresult", (message) => {
const partialText = message.result.partial;
console.log(`中间结果: ${partialText}`);
});
// 步骤 3: 获取麦克风音频流并处理
// 请求用户授权使用麦克风
const mediaStream = await navigator.mediaDevices.getUserMedia({
video: false,
audio: {
echoCancellation: true,
noiseSuppression: true,
channelCount: 1,       // 单声道
sampleRate: 16000      // 采样率，必须为16000
},
});
// 创建音频处理上下文
const audioContext = new AudioContext();
// 使用 ScriptProcessorNode 处理音频数据
// 缓冲区大小为4096，1个输入通道，1个输出通道
const recognizerNode = audioContext.createScriptProcessor(4096, 1, 1);
// 核心处理逻辑：每当缓冲区填满数据时，就送入识别器
recognizerNode.onaudioprocess = (event) => {
try {
// 将音频输入缓冲区的数据传递给识别器
recognizer.acceptWaveform(event.inputBuffer);
} catch (error) {
console.error('acceptWaveform failed', error);
}
};
// 连接音频流节点
const source = audioContext.createMediaStreamSource(mediaStream);
source.connect(recognizerNode);
// 注意：为了让ScriptProcessorNode持续工作，它需要连接到一个目标节点
recognizerNode.connect(audioContext.destination);
console.log('可以开始说话了...');
startBtn.disabled = false;
startBtn.textContent = '点击停止识别';
} catch (error) {
console.error('初始化失败:', error);
resultDiv.textContent = '错误: ' + error.message;
}
};

在这个例子中，recognizer.acceptWaveform(event.inputBuffer) 是核心，它持续地将麦克风捕获的音频片段送入Vosk引擎进行处理。result事件提供了完整的句子识别结果，而partialresult事件则在你说话的过程中提供实时的、不确定的中间结果，这对于实现实时字幕等功能非常有用。

应用场景

网页语音助手为网站添加语音命令功能，允许用户通过说话来导航页面、填写表单或执行搜索，提升网站的可访问性和用户体验。
在线教育和会议为在线视频播放器或直播平台提供实时字幕生成功能，帮助听力障碍人士或在嘈杂环境中的用户理解内容。
内容创作工具开发在线的语音笔记或文章撰写工具，用户可以通过口述快速记录想法和草稿，然后进行编辑和整理。
交互式游戏和应用在网页游戏或互动故事中，加入语音控制元素，让玩家可以通过声音与游戏角色或环境进行互动，创造更具沉浸感的体验。

QA

Vosk-Browser和云端语音识别API有什么区别？最主要的区别在于Vosk-Browser是完全离线运行的。它在用户的浏览器内部完成所有识别工作，不依赖网络连接，也不会将用户的语音数据发送到任何服务器。这带来了低延迟和强隐私保护的优点。而云端API（如Google Speech-to-Text）需要将音频发送到服务器处理，虽然通常更强大，但有网络延迟和数据隐私方面的考量。
它支持哪些浏览器？Vosk-Browser依赖WebAssembly和Web Audio API。因此，它支持所有主流的现代浏览器，如Chrome、Firefox、Safari和Edge的较新版本。它无法在不支持这些技术的旧版浏览器（如Internet Explorer）上运行。
识别的准确率如何？准确率取决于几个因素，主要是语言模型的质量和音频的清晰度。Vosk提供了不同大小的模型，通常体积越大的模型准确率越高。同时，确保使用清晰、无噪音的麦克风输入，并将采样率设置为16000Hz，可以获得最佳效果。
为什么要在Web Worker中运行？语音识别是一个计算密集型任务。如果直接在浏览器的主线程中运行，可能会导致页面卡顿或无响应，严重影响用户体验。Vosk-Browser被设计为在Web Worker中运行，这意味着识别任务在一个独立的后台线程中进行，不会影响主线程的渲染和交互，保证了网站的流畅性。