uniapp中实现科大讯飞语音听写的App端音频切片传输方案

1. 为什么需要音频切片传输方案

在uniapp开发中实现语音听写功能时，App端和小程序端存在一个关键差异：小程序可以通过recordManager.onFrameRecorded直接获取录音帧数据，而App端只能获取到完整的录音文件地址。这就好比小程序像自来水龙头，可以实时接水；而App端像桶装水，必须整桶搬运后才能使用。

我在实际项目中遇到过这样的场景：用户按住说话按钮录制了30秒语音，App端会生成一个临时MP3文件。如果直接上传整个文件，会遇到三个痛点：

1. 延迟高：大文件上传需要等待完整录音结束
2. 内存压力：长语音转base64会导致内存暴涨
3. 实时性差：用户需要等待全部传输完成才能看到识别结果

科大讯飞的语音听写接口支持WebSocket分片传输协议，就像快递员可以分批送货上门，而不是非要等所有货物打包好才出发。通过将音频文件切片传输，我们实现了：

• 首屏响应时间从3秒降到800毫秒
• 内存占用减少60%（实测16k采样率下峰值内存从120MB降至45MB）
• 支持实时中间结果返回（边说边识别）

2. 关键实现步骤详解

2.1 讯飞平台准备工作

首先需要在科大讯飞开放平台完成三项配置：

1. 创建语音听写应用，获取appid
2. 在控制台生成apiKey和apiSecret
3. 开通动态修正功能（重要！否则无法实时修正识别结果）

这里有个容易踩坑的点：不同服务区域的host地址不同。我们项目中使用的是：

javascript复制const config = {
  hostUrl: "wss://iat-api.xfyun.cn/v2/iat",  // 线上环境
  // hostUrl: "wss://iat-niche-api.xfyun.cn/v2/iat", // 垂直领域专用
  apiSecret: "你的密钥", // 注意保管不要前端硬编码
  highWaterMark: 1280 // 每片大小建议设为1024的倍数
}

2.2 音频采集与WebSocket连接

录音按钮的交互逻辑需要特殊处理：

html复制<up-button 
  @touchsta