在人工智能技术飞速发展的今天语音识别已经成为人机交互的重要入口。从智能音箱到会议转写从语音输入到实时翻译语音识别技术正在深刻改变我们的工作和生活方式。本文将分享一个基于讯飞ASTAutomatic Speech Transcription服务的实时语音识别前端系统开发实践涵盖WebSocket通信、音频采集、参数配置、结果解析等核心技术要点。一、项目背景与技术选型1.1 为什么选择AST服务ASTAutomatic Speech Transcription是讯飞开放平台提供的实时语音转写服务支持多种语言和方言的识别具备以下核心优势实时性基于WebSocket全双工通信支持边录边识别多语种支持覆盖中英、日韩、俄法、阿拉伯等数十种语言领域个性化提供法律、金融、医疗等16个垂直领域模型角色分离支持多人对话场景下的说话人区分方言识别支持202种中国方言的识别1.2 技术栈选型本项目采用Vue.js框架开发主要技术栈包括前端框架Vue 2.x Element UI音频处理Recorder.js录音库加密算法CryptoJSHMAC-SHA1签名通信协议WebSocketRFC 6455数据格式JSON Base64编码二、系统架构设计2.1 整体架构系统采用典型的三层架构设计text┌─────────────────────────────────────────────────────┐ │ 用户界面层 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 参数设置 │ │ JSON展示 │ │ 文本展示 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────┘ │ ┌─────────────────────────────────────────────────────┐ │ 业务逻辑层 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 参数管理 │ │ 签名生成 │ │ 消息解析 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────┘ │ ┌─────────────────────────────────────────────────────┐ │ 通信层 │ │ ┌──────────┐ ┌──────────┐ ┌──────────┐ │ │ │ 音频采集 │ │ WebSocket │ │ 录音管理 │ │ │ └──────────┘ └──────────┘ └──────────┘ │ └─────────────────────────────────────────────────────┘2.2 数据流设计整个系统的数据流如下用户配置参数→ 生成签名 → 建立WebSocket连接开始录音→ 音频数据采集 → 帧数据发送服务端识别→ 结果返回 → JSON解析 → 文本展示结束识别→ 发送结束标识 → 关闭连接三、核心功能实现3.1 参数配置模块参数配置是语音识别的关键环节不同场景需要不同的参数组合。javascript// 核心参数配置 params: { lang: autodialect, // 语言类型autodialect(方言) / autominor(多语种) recognized_language: [], // 目标语种列表多语种模式 audio_encode: pcm_s16le, // 音频编码格式 samplerate: 16000, // 采样率16000 / 8000 role_type: 0, // 角色分离0关闭 / 2盲分 feature_ids: , // 声纹ID列表 eng_spk_match: 0, // 严格声纹匹配 pd: , // 领域个性化 eng_punc: 1, // 标点输出1开启 / 0关闭 eng_vad_mdn: 1, // VAD远近场1远场 / 2近场 uuid: // 自定义会话ID }参数说明语言类型autodialect支持202种方言识别autominor支持多语种混合识别音频编码PCM为无损格式Speex和Opus为压缩格式后者更适合网络传输角色分离通过声纹识别技术区分不同说话人适合会议、访谈等场景领域个性化选择特定领域可显著提升识别准确率VAD远近场根据麦克风距离选择近场适合手机等设备远场适合会议系统3.2 WebSocket连接与签名生成讯飞AST服务要求每次请求必须携带签名采用HMAC-SHA1算法。javascriptgenerateSignature(params, accessKeySecret) { // 1. 参数排序 const sortedKeys Object.keys(params).sort() const baseStringParts [] // 2. 构建待签名字符串 for (const key of sortedKeys) { const encodedKey encodeURIComponent(key) const encodedValue encodeURIComponent(params[key]) baseStringParts.push(${encodedKey}${encodedValue}) } const baseString baseStringParts.join() // 3. HMAC-SHA1加密 const signatureSha CryptoJS.HmacSHA1(baseString, accessKeySecret) const signature CryptoJS.enc.Base64.stringify(signatureSha) return signature }签名流程详解参数准备包含appId、accessKeyId、uuid、utc等必要参数参数排序按字典序排列所有参数URL编码对每个参数的key和value进行百分号编码拼接字符串使用连接所有keyvalue对HMAC加密使用AccessKeySecret作为密钥Base64编码得到最终签名关键点UTC时间戳格式必须为YYYY-MM-DDTHH:mm:ss0800服务端会校验时间有效性。3.3 WebSocket连接建立javascriptasync wsInit() { const host office-api-ast-dx.iflyaisol.com const path /ast/communicate/v1 const wsUrl wss://${host}${path}?${urlParams.toString()} wsTask new WebSocket(wsUrl) wsTask.onopen function() { // 连接成功开始录音 recorder.start({ sampleRate: parseInt(this.params.samplerate), frameSize: 1280, // 每帧数据大小 }) } wsTask.onmessage function(event) { // 处理识别结果 this.handleMessage(event.data) } wsTask.onerror function(error) { // 错误处理 } wsTask.onclose function() { // 连接关闭 } }连接参数详解参数说明示例appId应用IDxxxaccessKeyId访问密钥IDxxxuuid会话唯一标识自动生成或用户指定utcUTC时间戳2026-07-01T14:30:000800signatureHMAC-SHA1签名动态计算3.4 音频采集与发送音频采集使用Recorder库通过MediaRecorder API获取麦克风数据。javascript// 初始化录音器 let recorder new Recorder(../../recorder) // 帧数据回调 recorder.onFrameRecorded ({isLastFrame, frameBuffer}) { if (!isLastFrame wsFlag) { // 发送音频数据Int8Array格式 wsTask.send(new Int8Array(frameBuffer)) } else if (isLastFrame wsFlag) { // 发送结束标识 const endMsg { end: true, sessionId: sessionId } wsTask.send(JSON.stringify(endMsg)) } }音频数据格式要求采样率8000Hz或16000Hz编码格式PCM 16bit小端序帧大小建议1280字节/帧数据格式Int8Array有符号8位整数数组发送策略每采集一帧立即发送保证实时性录音结束时发送{end: true}标识发送前检查WebSocket连接状态3.5 结果解析与展示AST服务返回的数据包含丰富的识别信息javascripthandleMessage(message) { const jsonData JSON.parse(message) // 识别结果 if (jsonData.msg_type result jsonData.res_type asr) { const data jsonData.data // 识别完成标识 if (data.ls true) { this.isFinal true this.statusText 识别完成 // 保存最终结果 const finalText this.resultTextTemp || this.resultText const segments this.parseRoleSegments(finalText) this.addTextHistory(finalText, segments) return } // 解析文本片段 if (data.cn data.cn.st) { const st data.cn.st const rt st.rt || [] let segmentText let role null for (const item of rt) { const ws item.ws || [] for (const w of ws) { const cw w.cw || [] for (const word of cw) { if (word.w) { segmentText word.w } if (word.rl ! undefined word.rl 0) { role 角色 word.rl } } } } // 区分临时结果和最终结果 if (st.type 1) { this.resultTextTemp segmentText // 临时结果 } else { this.resultText segmentText // 最终结果 } } } }返回数据结构json{ msg_type: result, res_type: asr, data: { ls: false, cn: { st: { type: 0, // 0最终 / 1临时 rt: [ { ws: [ { cw: [ { w: 今天, rl: 1 // 角色标识 } ] } ] } ] } } } }字段说明字段说明ls是否为最终结果true表示识别完成st.type结果类型0最终 / 1临时ws词序列cw候选词w识别的文字rl角色标签需开启角色分离3.6 角色分离解析当开启角色分离功能后需要解析每个词的角色标签javascriptparseRoleSegments(text) { if (!text) return [] const segments [] const sentences text.split(/[。\n]/).filter(s s.trim()) if (this.params.role_type 2) { // 盲分模式按句子交替分配角色 sentences.forEach((s, index) { segments.push({ role: 角色 (index % 2 1), text: s.trim() }) }) } else { // 无角色分离 if (sentences.length) { segments.push({ role: 发言, text: sentences.join(。) }) } } return segments }角色分离实现原理服务端通过声纹特征区分不同说话人每个词携带rl字段标识说话人ID前端按句子聚合展示不同角色的发言内容支持盲分自动聚类和声纹匹配指定说话人两种模式四、关键问题与解决方案4.1 音频数据格式转换问题录音库输出的是Float32Array但服务端要求Int8Array格式。解决在发送前进行数据转换javascript// Float32Array转Int8Array const int8Array new Int8Array(float32Array.length) for (let i 0; i float32Array.length; i) { // 将浮点数映射到-128~127范围 int8Array[i] Math.max(-128, Math.min(127, Math.round(float32Array[i] * 128))) }4.2 WebSocket重连机制问题网络不稳定可能导致WebSocket断开。解决实现自动重连机制javascriptreconnect() { if (this.reconnectCount 3) { this.$message.error(重连失败请检查网络) return } this.reconnectCount setTimeout(() { this.wsInit() }, 1000 * this.reconnectCount) }4.3 内存泄漏防护问题频繁的音频数据发送可能导致内存泄漏。解决组件销毁时清理资源javascriptbeforeDestroy() { // 关闭WebSocket if (wsTask) { wsTask.close() wsTask null } // 停止录音 if (recorder) { recorder.stop() } // 清除定时器 if (this.timer) { clearInterval(this.timer) } }五、性能优化实践5.1 数据压缩传输对于低带宽场景建议使用Speex或Opus编码javascriptaudio_encode: speex-7 // Speex压缩级别7 audio_encode: opus-wb // Opus宽带编码不同编码格式对比编码格式比特率延迟音质PCM256kbps最低无损Speex-724kbps低良好Opus-WB32kbps低优秀5.2 虚拟滚动优化当识别结果累积较多时使用虚拟滚动减少DOM渲染压力javascript// 使用vue-virtual-scroller组件 RecycleScroller :itemstextHistory :item-size80 key-fieldtime template #default{ item } div classhistory-item div classhistory-time{{ item.time }}/div div{{ item.content }}/div /div /template /RecycleScroller5.3 结果缓存策略避免重复解析相同的识别结果javascript// 使用Map缓存已解析的结果 const resultCache new Map() function parseResult(message) { const hash calculateHash(message) if (resultCache.has(hash)) { return resultCache.get(hash) } const result doParse(message) resultCache.set(hash, result) return result }六、最佳实践与注意事项6.1 参数配置建议根据不同场景推荐参数组合会议转写场景javascript{ lang: autodialect, role_type: 2, // 开启角色分离 pd: com, // 企业领域 eng_vad_mdn: 2, // 近场 eng_punc: 1 // 返回标点 }多语言翻译场景javascript{ lang: autominor, recognized_language: [en, ja, ko], // 目标语种 audio_encode: opus-wb, // 压缩传输 pd: tech // 科技领域 }6.2 错误处理规范全面的错误处理至关重要javascripttry { await this.wsInit() } catch (error) { // 错误分类处理 if (error.message.includes(timeout)) { this.$message.error(连接超时请检查网络) } else if (error.message.includes(signature)) { this.$message.error(签名验证失败请检查密钥) } else { this.$message.error(连接失败: error.message) } }6.3 用户体验优化状态反馈实时显示连接状态、录音状态、识别状态渐进式展示临时结果实时显示最终结果覆盖更新滚动跟随自动滚动到最新结果错误提示友好的错误提示信息七、总结与展望本文详细介绍了基于讯飞AST服务的实时语音识别前端系统开发实践涵盖了参数配置、WebSocket通信、音频采集、结果解析等核心功能。通过合理的技术选型和优化策略实现了一个功能完善、性能优良的语音识别应用。未来优化方向AI智能断句结合NLP技术实现更智能的句子分割情感分析识别说话人的情绪状态实时翻译集成机器翻译API实现同声传译语音合成将识别结果合成为语音播报离线支持实现部分功能的离线化语音识别技术仍在快速发展未来的应用场景将更加丰富。希望本文能为相关开发者提供有价值的参考共同推动语音交互技术的发展。
