【亲测免费】 Vosk-Browser：浏览器端的语音识别利器

2026-01-22 04:40:12作者：袁立春Spencer

项目介绍

Vosk-Browser 是一个基于 WebAssembly 的浏览器端语音识别库，它封装了 Vosk 的 WebAssembly 构建版本，使得开发者能够在浏览器环境中轻松实现语音识别功能。该项目继承了 Denis Treskunov 的工作，并在此基础上进行了更新和优化，提供了一个更加易用的浏览器库。

项目技术分析

技术栈

WebAssembly：Vosk-Browser 的核心技术是 WebAssembly，它允许在浏览器中高效运行 C/C++ 代码，从而实现高性能的语音识别。
Vosk：Vosk 是一个开源的语音识别工具包，支持多种语言和平台。Vosk-Browser 通过 WebAssembly 将 Vosk 移植到浏览器环境中。
Web Workers：为了不影响主线程的性能，Vosk-Browser 将 Vosk 编译为 Web Worker 上下文，确保语音识别任务在后台线程中运行。

安装与使用

Vosk-Browser 可以通过 npm 安装，也可以通过 CDN 直接引入到网页中。安装后，开发者可以轻松加载语音识别模型，并通过简单的 API 调用实现语音输入的实时识别。

$ npm i vosk-browser

或者通过 CDN 引入：

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

示例代码

以下是一个简单的示例，展示了如何使用 Vosk-Browser 加载模型并开始语音识别：

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

    const recognizer = new model.KaldiRecognizer();
    recognizer.on("result", (message) => {
        console.log(`Result: ${message.result.text}`);
    });
    recognizer.on("partialresult", (message) => {
        console.log(`Partial result: ${message.result.partial}`);
    });
    
    const mediaStream = await navigator.mediaDevices.getUserMedia({
        video: false,
        audio: {
            echoCancellation: true,
            noiseSuppression: true,
            channelCount: 1,
            sampleRate: 16000
        },
    });
    
    const audioContext = new AudioContext();
    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);
}

window.onload = init;