背景痛点

1. 服务不可用：Web Speech API在国内部分区域无法稳定连接，中文识别服务常返回空结果
2. 延迟问题：实测英文识别延迟约800ms，中文识别因需境外服务器中转，延迟高达2-3秒
3. 功能残缺：缺少中文方言支持，且无法使用离线模式

技术选型对比

• Web Speech API
• 优点：零配置、免费

• 缺点：中文准确率仅82%（实测100条语音样本）

• 百度语音

• 优点：支持方言识别、准确率93%

• 缺点：免费版QPS=2，需企业认证突破限制

• 科大讯飞

• 优点：实时流式识别，延迟仅280ms
• 缺点：SDK体积较大（Web版约1.2MB）

混合方案实现

1. API可用性检测

// 检测Web Speech API可用性
const isSpeechAPIAvailable = () => {
  try {
    return 'webkitSpeechRecognition' in window ||
           'SpeechRecognition' in window;
  } catch (e) {
    console.error('API检测异常:', e);
    return false;
  }
};

2. 动态服务切换

// 百度语音WebSocket连接示例
const initBaiduASR = (token) => {
  const ws = new WebSocket('wss://vop.baidu.com/realtime_asr');

  ws.onopen = () => {
    ws.send(JSON.stringify({
      token: token,
      cuid: 'client_123',
      format: 'wav',
      rate: 16000
    }));
    console.log('已连接百度语音服务');
  };

  // 其他事件处理...
};

性能优化

1. 音频预处理
2. 使用AudioContext降采样到16kHz

3. 通过getUserMedia的echoCancellation参数抑制环境噪声

4. 模型缓存

   // 缓存语音模型到IndexedDB
   const cacheModel = async (modelBlob) => {
     const db = await idb.open('ASR_DB', 1, db => {
       db.createObjectStore('models');
     });
     await db.put('models', modelBlob, 'baidu_mandarin');
   };

避坑指南

1. HTTPS强制要求
2. 所有语音API必须部署在HTTPS域名下

3. 本地开发可用ngrok穿透测试

4. 移动端权限

5. iOS需在用户交互事件中触发麦克风权限请求

6. 安卓Chrome需要crossorigin属性

7. 方言配置

8. 百度API需设置dev_pid参数（如粤语为1637）
9. 讯飞需在控制台单独开通方言包

结语

这套方案已成功应用于某医疗问诊PWA项目，识别准确率从初期的78%提升至91%。读者可尝试移植到Electron应用，通过node-record-lpcm16实现更底层的音频采集。未来可探索WebAssembly加速语音特征提取的可能性。