浏览器端语音识别实战：基于WebSocket与麦克风的FunASR替代方案

1次阅读

没有评论

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

在开发语音交互应用时，FunASR 作为流行的语音识别方案，常因浏览器兼容性问题导致功能失效。当前主要痛点集中在：

部分浏览器版本限制 WebSocket 协议版本
移动端浏览器对麦克风权限管理严格
企业防火墙可能拦截 WebSocket 连接

当检测到环境不支持时，降级方案需要保证核心功能可用性，这就引出了我们的技术选型问题。

目前主流的浏览器端语音识别方案主要有三类：

Web Speech API
优点：原生支持，无需额外依赖
缺点：识别精度有限，不支持中文场景优化
第三方 SDK
优点：开箱即用，功能完善
缺点：存在隐私合规风险，商业使用需授权
自定义 WebSocket 方案
优点：完全可控，可深度优化
缺点：开发成本较高

综合评估后，我们选择自定义 WebSocket 方案作为替代方案，主要考虑因素包括：

可对接私有化部署的语音识别引擎
支持音频预处理优化
便于实施 AB 测试

使用 MediaDevices 接口获取音频流时，需要注意现代浏览器的安全策略：

async function initMicrophone() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ 
      audio: {
        sampleRate: 16000,
        channelCount: 1
      }
    });
    const audioContext = new AudioContext();
    const sourceNode = audioContext.createMediaStreamSource(stream);
    // 后续处理节点...
  } catch (err) {console.error('麦克风获取失败:', err);
  }
}

音频数据传输需要解决的关键问题：

分包大小 ：推荐每 500ms 发送一个数据包
编码格式 ：优先选择 Opus 编码，节省带宽
心跳机制 ：保持长连接稳定

典型的数据包结构示例：

{
  seq: 123,       // 序列号
  timestamp: Date.now(),
  isFinal: false, // 是否结束帧
  audio: ArrayBuffer
}

建议的服务端处理流程：

建立 WebSocket 连接池
音频数据队列消费
使用 gRPC 调用语音识别引擎
结果异步回传

以下是核心模块的 ES6 实现：

class SpeechRecognizer {constructor(url) {this.ws = new WebSocket(url);
    this.audioContext = null;
    this.processor = null;

    this.ws.onmessage = (event) => {const result = JSON.parse(event.data);
      this.onResult(result);
    };
  }

  async start() {const stream = await navigator.mediaDevices.getUserMedia(...);
    this.audioContext = new AudioContext();

    this.processor = this.audioContext.createScriptProcessor(4096, 1, 1);
    this.processor.onaudioprocess = (e) => {const audioData = e.inputBuffer.getChannelData(0);
      this.ws.send(this.encodeAudio(audioData));
    };

    // 连接音频处理链路
    const source = this.audioContext.createMediaStreamSource(stream);
    source.connect(this.processor);
    this.processor.connect(this.audioContext.destination);
  }

  stop() {this.processor?.disconnect();
    this.audioContext?.close();
    this.ws.close();}
}

实测数据对比（Chrome 118 环境）：