使用 Web Speech API 构建基于浏览器的语音转文字应用

Source: Dev.to

为什么选择基于浏览器？

隐私是主要卖点。音频永远不会离开用户的设备。没有上传、没有存储、没有 GDPR 的麻烦。对于一个简单的转录工具来说，这是一大优势。

Web Speech API 基础

API 出奇地简单：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US';

recognition.onresult = (event) => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('');
  console.log(transcript);
};

recognition.start();

就这么简单。现在你已经拥有实时语音转文字功能。

没有人提醒你的坑

1. 浏览器支持不一致

Chrome 使用 Google 的服务器（讽刺的是，并非完全本地）。Safari 使用设备本地处理。Firefox 的支持有限。务必检查：

if (!('SpeechRecognition' in window || 'webkitSpeechRecognition' in window)) {
  // Show fallback UI
}

2. 会随机停止监听

API 有在沉默后自动停止的习惯。你需要重新启动它：

recognition.onend = () => {
  if (shouldKeepListening) {
    recognition.start();
  }
};

3. 没有标点符号

API 返回的只是原始单词，没有句号、逗号或大小写。你需要自行处理：

function addAutoPunctuation(text) {
  // Add period after pause patterns
  // Capitalize after periods
  // Handle common patterns like "question mark" → "?"
}

4. 语言切换需手动

你需要自行构建语言选择器，并相应地设置 recognition.lang。API 支持 100 多种语言，但不会自动检测。

何时不该使用 Web Speech API

对于超出基本口述的需求，你会遇到瓶颈：

• 音频文件转录 — API 只处理实时麦克风输入
• 说话人识别 — 不支持
• 时间戳 — 不提供
• 准确性要求 — 企业级场景需要 Whisper、AssemblyAI 或 Deepgram

我最终构建了一个混合方案：免费层使用 Web Speech API 进行实时口述，专业层使用 Whisper 处理文件上传并提供更高准确度。

本地语言 SEO 加分

一个意外的收获：我为不同语言构建了本地脚本 UI 的页面。印地语页面实际上是用印地语编写的（हिंदी में वॉइस टू टेक्स्ट），而不仅仅是英文的 “Hindi Voice to Text”。

结果：在本地语言搜索中排名上升，竞争远低于英文关键词。

试一试

我已将其实现于 voicetotextonline.com — 免费使用，基础转录无需注册。

如果你正在构建类似的东西，欢迎在评论中提问，我会尽力回答。