无需服务器！5分钟实现浏览器端实时语音转文字：基于transformers.js的Whisper模型实战

你还在为语音识别需要昂贵的云服务而烦恼吗？还在担心用户语音数据传输的隐私安全问题吗？本文将带你零成本实现浏览器本地运行的实时语音转文字功能，无需后端服务器，所有处理都在用户设备上完成。读完本文，你将掌握如何使用transformers.js和Whisper模型构建一个安全、高效的语音识别应用。

技术原理概述

transformers.js是一个专为Web平台优化的机器学习库，它允许开发者在浏览器中直接运行预训练模型。而Whisper是由OpenAI开发的通用语音识别模型，能够将多种语言的语音准确地转换为文本。

通过结合这两项技术，我们可以实现完全在客户端运行的语音识别功能。下面是这个方案的核心优势：

传统云服务方案	transformers.js方案
需要后端服务器支持	纯浏览器本地运行
存在数据隐私泄露风险	语音数据永不离开用户设备
受网络延迟影响	无网络也能正常工作
按调用次数收费	完全免费

实现步骤

1. 准备工作

首先，我们需要从项目仓库获取示例代码：

git clone https://gitcode.com/GitHub_Trending/tr/transformers.js
cd transformers.js/examples/webgpu-whisper
npm install

这个示例项目已经包含了所有必要的配置和依赖，相关代码可以在examples/webgpu-whisper/目录中找到。

2. 核心实现原理

下面是实时语音识别的工作流程图：

sequenceDiagram
    participant 用户
    participant 浏览器
    participant Web Audio API
    participant Whisper模型
    participant 结果显示
    
    用户->>浏览器: 授权麦克风访问
    浏览器->>Web Audio API: 获取音频流
    Web Audio API->>Web Audio API: 音频处理与采样
    Web Audio API->>Whisper模型: 音频数据
    Whisper模型->>Whisper模型: 语音识别处理
    Whisper模型->>结果显示: 识别文本
    结果显示->>用户: 实时展示文字

3. 关键代码解析

3.1 初始化Worker

为了避免UI阻塞，我们使用Web Worker在后台线程中处理模型加载和语音识别任务：

// [examples/webgpu-whisper/src/App.jsx](https://gitcode.com/GitHub_Trending/tr/transformers.js/blob/1538e3a1544a93ef323e41c4e3baef6332f4e557/examples/webgpu-whisper/src/App.jsx?utm_source=gitcode_repo_files#L37-L45)
useEffect(() => {
  if (!worker.current) {
    // 创建Worker
    worker.current = new Worker(new URL('./worker.js', import.meta.url), {
      type: 'module'
    });
  }
  // ...
}, []);

3.2 加载Whisper模型

当用户点击"Load model"按钮时，我们会向Worker发送加载模型的请求：

// [examples/webgpu-whisper/src/App.jsx](https://gitcode.com/GitHub_Trending/tr/transformers.js/blob/1538e3a1544a93ef323e41c4e3baef6332f4e557/examples/webgpu-whisper/src/App.jsx?utm_source=gitcode_repo_files#L211-L214)
<button
  onClick={() => {
    worker.current.postMessage({ type: 'load' });
    setStatus('loading');
  }}
>
  Load model
</button>

3.3 获取麦克风权限并录音

获取用户麦克风权限，并使用MediaRecorder API录制音频：

// [examples/webgpu-whisper/src/App.jsx](https://gitcode.com/GitHub_Trending/tr/transformers.js/blob/1538e3a1544a93ef323e41c4e3baef6332f4e557/examples/webgpu-whisper/src/App.jsx?utm_source=gitcode_repo_files#L120-L127)
navigator.mediaDevices.getUserMedia({ audio: true })
  .then(stream => {
    setStream(stream);
    recorderRef.current = new MediaRecorder(stream);
    audioContextRef.current = new AudioContext({ sampleRate: WHISPER_SAMPLING_RATE });
    // ...
  })

3.4 音频处理与识别

将录制的音频数据发送给Worker进行识别：

// [examples/webgpu-whisper/src/App.jsx](https://gitcode.com/GitHub_Trending/tr/transformers.js/blob/1538e3a1544a93ef323e41c4e3baef6332f4e557/examples/webgpu-whisper/src/App.jsx?utm_source=gitcode_repo_files#L171-L180)
fileReader.onloadend = async () => {
  const arrayBuffer = fileReader.result;
  const decoded = await audioContextRef.current.decodeAudioData(arrayBuffer);
  let audio = decoded.getChannelData(0);
  if (audio.length > MAX_SAMPLES) { 
    audio = audio.slice(-MAX_SAMPLES);
  }
  worker.current.postMessage({ type: 'generate', data: { audio, language } });
}

4. 运行应用

启动开发服务器：

npm run dev

打开浏览器访问http://localhost:5173，你将看到如下界面：

1. 点击"Load model"按钮加载Whisper模型
2. 授权麦克风访问
3. 开始说话，实时看到语音转文字的结果

性能优化建议

1. 模型选择：根据需求选择不同大小的Whisper模型，如base、small、medium或large。较小的模型加载更快，但识别准确率可能较低。

2. WebGPU加速：确保浏览器支持WebGPU以获得最佳性能。相关实现可参考src/backends/webgpu/目录下的代码。

3. 音频预处理：适当调整音频采样率和时长，平衡识别效果和性能。

总结

通过transformers.js和Whisper模型，我们可以在浏览器中实现高效、安全的实时语音转文字功能。这个方案不仅保护了用户隐私，还消除了服务器成本和网络延迟问题。

你可以进一步扩展这个示例，比如添加多语言支持、实时翻译功能，或者集成到你的现有Web应用中。完整的代码示例可以在examples/webgpu-whisper/目录中找到。

现在就尝试构建你自己的浏览器端语音识别应用吧！如有任何问题，可以查阅官方文档docs/source/index.md或参考项目中的其他示例。