前端接入腾讯云 ASR 实时语音识别实践
在数字人交互、智能客服或语音助手的 Web 开发中，实时语音识别（ASR） 是最基础也是最核心的入口。市面上方案众多，本文深入剖析如何在前端（H5/Web）直接接入腾讯云的一句话识别 SDK。
1. 为什么选择纯前端接入？
通常 ASR 接入有两种模式：
- 后端代理：前端录音传给后端，后端调用腾讯云 API。安全，但延迟高。
- 前端直连：浏览器直接录音并通过 WebSocket 直连腾讯云。速度最快，交互体验最好。
本方案采用前端直连。这种方案最大的挑战在于：如何在前端安全且正确地生成鉴权签名，以及如何处理复杂的音频流事件。
2. 核心依赖与准备
代码中引入了两个关键文件：
<script src="./public/cryptojs.js"></script>
<script src="./public/speechrecognizer.js"></script>
speechrecognizer.js：腾讯云官方的 Web Audio SDK，负责采集麦克风音频、分片、并通过 WebSocket 发送。cryptojs.js：加密库。因为是前端直连，我们需要在前端进行 HMAC-SHA1 签名计算（注意：生产环境建议由后端生成签名接口，前端获取，避免 SecretKey 泄露。但在开发测试阶段，前端自签非常方便）。
3. 攻克第一关：鉴权签名（Signature）
这是大多数开发者遇到的第一个'拦路虎'。腾讯云 ASR 需要对请求进行鉴权。很多教程只告诉你'用 HMAC-SHA1'，但没告诉你数据格式转换的坑。
源码深度解析
看看这段看似不起眼的工具函数：
// 坑点所在：CryptoJS 生成的是 WordArray，需要转成 Uint8Array 再转 String，最后 Base64
function toUint8Array(wordArray) {
const words = wordArray.words;
const sigBytes = wordArray.sigBytes;
const u8 = new Uint8Array(sigBytes);
for (let i = 0; i < sigBytes; i++) {
u8[i] = (words[i >>> 2] >>> (24 - (i % ) * )) & ;
}
u8;
}
() {
dataString = ;
( i = ; i < fileData.; i++) {
dataString += .(fileData[i]);
}
dataString;
}
