浏览器端语音识别实战：当STT遇到FunASR与WebSocket的兼容性问题

1次阅读

没有评论

共计 1773 个字符，预计需要花费 5 分钟才能阅读完成。

语音识别（Speech-to-Text, STT）在现代 Web 应用中越来越常见，但浏览器兼容性问题常常让开发者头疼。特别是当使用 FunASR 这类基于 WebSocket 的语音识别引擎时，问题更加突出。主要痛点包括：

WebSocket 支持不完整：某些老旧浏览器或特殊环境（如企业内网）可能禁用 WebSocket
麦克风权限问题：用户可能拒绝麦克风访问，或浏览器不支持getUserMedia API
音频格式兼容性：不同浏览器对音频编码的支持存在差异

当检测到浏览器不支持 FunASR 所需环境时，我们需要备选方案。以下是几种常见替代方案的对比：

Web Audio API + 后端 HTTP 接口
优点：兼容性最好，几乎所有现代浏览器都支持
缺点：需要自行处理音频数据分包和缓冲
WebRTC 数据通道
优点：延迟低，适合实时场景
缺点：实现复杂，需要 STUN/TURN 服务器
第三方 SDK 降级
优点：开发简单
缺点：可能增加包体积和授权成本

以下是一个完整的浏览器兼容性检测与自动切换实现：

// 检测浏览器是否支持 WebSocket 和麦克风
function checkBrowserSupport() {
  return !!window.WebSocket && 
         navigator.mediaDevices && 
         navigator.mediaDevices.getUserMedia;
}

// 主入口函数
async function initSpeechRecognition() {if (checkBrowserSupport()) {
    // 使用 FunASR WebSocket 方案
    await initFunASR();} else {
    // 降级到 Web Audio API 方案
    await initWebAudioFallback();
    console.log('当前浏览器不支持 FunASR 语音识别，已切换为 Web Audio API 方案');
  }
}

// Web Audio 降级方案实现
async function initWebAudioFallback() {
  try {const stream = await navigator.mediaDevices.getUserMedia({ audio: true});
    const audioContext = new AudioContext();
    const source = audioContext.createMediaStreamSource(stream);

    // 创建音频处理器
    const processor = audioContext.createScriptProcessor(4096, 1, 1);
    source.connect(processor);
    processor.connect(audioContext.destination);

    processor.onaudioprocess = (e) => {
      // 处理音频数据并发送到 HTTP 接口
      const audioData = e.inputBuffer.getChannelData(0);
      sendAudioChunk(audioData);
    };
  } catch (err) {console.error('无法访问麦克风:', err);
    throw err;
  }
}

在降级方案中，性能优化尤为关键：