FireRedASR Pro前端交互开发微信小程序实时语音识别功能实现你有没有想过在微信小程序里实现像智能音箱那样的实时对话功能用户按住说话文字就实时显示在屏幕上。这听起来很酷但一想到要处理音频采集、编码、网络传输和实时识别是不是觉得头大别担心今天我们就来聊聊怎么在微信小程序里用FireRedASR Pro这个强大的语音识别服务一步步把实时语音转文字的功能做出来。整个过程就像搭积木我们把录音、上传、识别、展示这几个模块拼起来就行。我会把每一步的代码和关键点都讲清楚保证你看完就能动手实践。1. 场景与价值为什么要在小程序里做实时语音识别现在很多服务都搬到了手机上微信小程序因为不用下载安装用起来特别方便。但打字输入始终是个麻烦事尤其是在移动场景下——比如开车时想发个指令或者双手提着东西没法打字。这时候语音输入就成了刚需。想象几个实际场景在线教育小程序里学生可以直接语音提问智能客服小程序用户用说的就能查询信息甚至是一些工具类小程序像语音备忘录、会议记录都能靠这个功能提升体验。核心就一点让交互更自然让用户更省事。FireRedASR Pro作为后端识别服务提供了高准确率和低延迟的识别能力。我们前端要做的就是当好一个“搬运工”和“翻译官”把用户手机麦克风的声音“搬”到云端服务器再把服务器返回的文字“翻译”展示给用户。听起来简单但里面有几个关键环节要打通。2. 核心流程与准备工作在开始写代码之前我们先理清整个功能是怎么跑起来的。用户按下按钮开始说话到屏幕上出现文字大致经历了四步录音采集小程序调用API开始录制用户的语音。数据处理把录制的原始音频数据转换成后端服务能听懂的格式通常是PCM或WAV。实时传输通过WebSocket连接把处理好的音频数据一小块一小块地、持续不断地发送给FireRedASR Pro服务。结果展示服务一边识别一边把识别出的文字片段传回来前端再把这些片段流畅地拼接、显示出来。为了让这个流程跑通我们需要做点准备工作后端服务你需要有一个已经部署好的FireRedASR Pro服务并且知道它的WebSocket连接地址比如ws://your-server-address:port/asr。这部分今天不深究我们聚焦前端。小程序权限在微信小程序里用麦克风得先获得用户授权。这需要在app.json里声明录音权限并在代码中动态请求。项目结构一个简单的小程序页面就够了主要包含一个录音按钮、一个显示识别结果的区域。理清了思路我们就从第一步——录音开始。3. 小程序端音频采集与处理微信小程序给我们提供了非常友好的录音API让我们能轻松地获取到麦克风的原始数据。3.1 初始化录音管理器我们首先要在页面的JavaScript文件里创建并初始化录音管理器。// pages/voice-asr/voice-asr.js Page({ data: { isRecording: false, // 是否正在录音 recognizedText: , // 识别出的完整文本 interimText: , // 实时返回的中间结果 socketConnected: false, // WebSocket连接状态 }, onLoad: function() { // 1. 获取录音管理器实例 this.recorderManager wx.getRecorderManager(); // 2. 监听录音开始事件 this.recorderManager.onStart(() { console.log(录音开始); this.setData({ isRecording: true }); }); // 3. 监听录音结束事件这里我们会拿到录音文件 this.recorderManager.onStop((res) { console.log(录音结束, res); this.setData({ isRecording: false }); // 录音结束后通常我们就不处理了因为实时流已经在onFrameRecorded中发送了。 // 这里可以处理一些收尾逻辑比如发送结束标记给后端。 if (this.socketTask this.data.socketConnected) { this.socketTask.send({ type: end // 假设协议中定义结束信号 }); } }); // 4. 监听错误事件 this.recorderManager.onError((res) { console.error(录音错误:, res); wx.showToast({ title: 录音失败, icon: none }); }); }, })3.2 配置录音参数并开始录音录音的参数配置很重要它决定了音频数据的格式和质量必须和后端服务的要求匹配。FireRedASR Pro通常支持像PCM这样的原始格式。// 在页面JS中继续添加方法 startRecording: function() { // 首先请求用户授权 wx.authorize({ scope: scope.record, success: () { // 授权成功开始录音 this.recorderManager.start({ duration: 60000, // 最长录音1分钟实际可更长或无限 sampleRate: 16000, // 采样率常用16000Hz numberOfChannels: 1, // 单声道 encodeBitRate: 16000, // 编码码率 format: pcm, // 重点使用PCM格式这是无损原始数据后端识别需要 frameSize: 1280, // 指定帧大小每帧数据会触发onFrameRecorded }); // 开始录音后建立WebSocket连接 this.connectWebSocket(); }, fail: (err) { console.log(授权失败, err); wx.showModal({ title: 提示, content: 需要麦克风权限才能使用语音功能, showCancel: false }); } }); }, stopRecording: function() { if (this.data.isRecording) { this.recorderManager.stop(); // 停止录音会触发onStop } // 关闭WebSocket连接 if (this.socketTask) { this.socketTask.close(); this.setData({ socketConnected: false }); } },这里的关键是format: pcm和frameSize。PCM是未经压缩的原始音频数据最适合语音识别。frameSize定义了每次onFrameRecorded回调会收到多少字节的数据这个数据块就是我们实时发送给后端的“一小块”音频。3.3 实时获取音频帧数据为了实现“实时”识别我们不能等一整段录音结束再发送而是要在录音过程中一有数据就立刻发送。这就需要监听onFrameRecorded事件。// 在onLoad的初始化部分继续添加监听 onLoad: function() { // ... 之前的初始化代码 ... // 5. 监听音频帧数据实时流的关键 this.recorderManager.onFrameRecorded((res) { const { frameBuffer } res; // 这里就是实时的PCM音频数据帧 // 将ArrayBuffer数据转换为Base64便于通过WebSocket发送 const base64Data wx.arrayBufferToBase64(frameBuffer); // 如果WebSocket已连接就发送这一帧数据 if (this.socketTask this.data.socketConnected) { this.socketTask.send({ type: audio, data: base64Data }); } }); }好了音频数据我们已经能抓到手了并且切成了小块。下一步就是建立一条“高速公路”把这些数据块快速送到FireRedASR Pro服务器。4. 建立实时通信WebSocket连接HTTP协议一问一答的模式不适合实时流传输WebSocket才是正解。它就像在客户端和服务器之间搭了一座双向的桥数据可以随时来回跑。4.1 连接WebSocket服务器我们在开始录音时调用connectWebSocket方法来建立连接。connectWebSocket: function() { // 替换成你实际的FireRedASR Pro WebSocket服务地址 const wsUrl wss://your-fireredasr-server.com/asr; // 生产环境建议用wss // const wsUrl ws://localhost:8000/asr; // 开发环境 this.socketTask wx.connectSocket({ url: wsUrl, header: { content-type: application/json }, // 可以传递一些初始化参数例如语言、模型等 protocols: [protocol1] // 根据后端要求设置子协议 }); // 监听连接打开事件 this.socketTask.onOpen(() { console.log(WebSocket连接已打开); this.setData({ socketConnected: true }); // 连接成功后可以发送一些初始化配置信息 this.socketTask.send({ type: config, data: { sampleRate: 16000, format: pcm, language: zh-CN // 中文普通话 } }); }); // 监听收到服务器消息事件这里是接收识别结果的关键 this.socketTask.onMessage((res) { const message JSON.parse(res.data); this.handleServerMessage(message); }); // 监听连接关闭事件 this.socketTask.onClose(() { console.log(WebSocket连接已关闭); this.setData({ socketConnected: false }); }); // 监听错误事件 this.socketTask.onError((err) { console.error(WebSocket连接错误:, err); wx.showToast({ title: 连接失败, icon: none }); }); },4.2 处理服务器返回的识别结果服务器会通过WebSocket源源不断地把识别结果推回来。这些结果通常分两种中间结果和最终结果。中间结果是还在识别过程中的、可能变化的文本用于实现“边说边出字”的效果最终结果是一段话识别结束后的稳定文本。handleServerMessage: function(message) { switch (message.type) { case partial: // 中间识别结果 console.log(中间结果:, message.text); this.setData({ interimText: message.text }); break; case final: // 最终识别结果 console.log(最终结果:, message.text); // 将最终结果追加到完整文本中 const newText this.data.recognizedText message.text ; this.setData({ recognizedText: newText, interimText: // 清空中间结果 }); break; case error: console.error(识别错误:, message.msg); wx.showToast({ title: 识别错误: ${message.msg}, icon: none }); break; default: console.log(收到未知消息类型:, message); } }通信链路打通了数据能送过去结果也能收回来。最后一步就是设计一个友好的界面让用户能方便地操作并清晰地看到识别结果。5. 前端界面与交互设计界面不需要太复杂核心就是一个录音按钮和一个显示区域。但交互细节会影响用户体验。5.1 WXML页面布局!-- pages/voice-asr/voice-asr.wxml -- view classcontainer !-- 结果显示区域 -- view classresult-box text classfinal-text{{recognizedText}}/text text classinterim-text wx:if{{interimText}}{{interimText}}/text text classplaceholder wx:if{{!recognizedText !interimText}} 识别结果将显示在这里... /text /view !-- 状态提示 -- view classstatus text wx:if{{isRecording}} classrecording● 正在聆听.../text text wx:if{{socketConnected !isRecording}} classconnected连接就绪/text text wx:if{{!socketConnected}} classdisconnected未连接/text /view !-- 录音按钮 -- view classbutton-container button classrecord-btn {{isRecording ? active : }} bind:touchstartstartRecording bind:touchendstopRecording bind:touchcancelstopRecording hover-classbtn-hover disabled{{!socketConnected}} {{isRecording ? 松开 结束 : 按住 说话}} /button text classbutton-tip长按按钮开始录音松开结束/text /view !-- 清空按钮 -- button classclear-btn bindtapclearText sizemini清空文本/button /view5.2 WXSS样式设计/* pages/voice-asr/voice-asr.wxss */ .container { padding: 30rpx; display: flex; flex-direction: column; height: 100vh; box-sizing: border-box; } .result-box { flex: 1; background-color: #f9f9f9; border-radius: 16rpx; padding: 32rpx; margin-bottom: 40rpx; border: 2rpx solid #eee; overflow-y: auto; min-height: 300rpx; } .final-text { font-size: 36rpx; line-height: 1.6; color: #333; } .interim-text { font-size: 36rpx; line-height: 1.6; color: #888; /* 用灰色区分中间结果 */ font-style: italic; } .placeholder { font-size: 32rpx; color: #ccc; text-align: center; line-height: 300rpx; } .status { text-align: center; margin-bottom: 40rpx; font-size: 28rpx; } .recording { color: #e64340; /* 红色表示正在录音 */ animation: blink 1s infinite; } keyframes blink { 50% { opacity: 0.5; } } .connected { color: #09bb07; } /* 绿色表示连接正常 */ .disconnected { color: #999; } .button-container { display: flex; flex-direction: column; align-items: center; } .record-btn { width: 200rpx; height: 200rpx; border-radius: 50%; background-color: #07c160; color: white; font-size: 34rpx; border: none; display: flex; align-items: center; justify-content: center; transition: all 0.1s; } .record-btn.active { background-color: #e64340; transform: scale(1.05); } .record-btn[disabled] { background-color: #ddd !important; color: #999 !important; } .btn-hover { opacity: 0.8; } .button-tip { margin-top: 20rpx; color: #666; font-size: 24rpx; } .clear-btn { align-self: center; margin-top: 40rpx; color: #666; background-color: transparent; border: 1rpx solid #ddd; }5.3 补充页面交互逻辑最后我们在JS文件中补上清空文本的功能。// 在Page的方法中补充 clearText: function() { this.setData({ recognizedText: , interimText: }); },6. 总结与优化建议把上面这些代码块组合起来一个具备基础实时语音识别功能的小程序页面就完成了。用户长按按钮说话屏幕上就会实时显示出识别出的文字松开按钮后这段话的最终结果会被固定下来并开始新的一段。实际用起来你会发现这个基础版本已经能跑通核心流程但真要放到产品里还有不少可以打磨的地方。比如网络稳定性很重要WebSocket断了得能自动重连并且最好能给用户个提示。音频处理方面如果后端服务对音频数据有特殊要求比如需要添加WAV头可能需要在发送前做一次转换。UI/UX上可以加上音量波动动画让用户知道麦克风在工作识别结果也可以做得更美观比如支持分段、高亮关键词等。另外错误处理要做得更细致。除了网络错误还有用户可能突然来电、切换到其他App等情况这些都会打断录音我们的代码需要能妥善处理这些中断并给用户友好的反馈。总的来说在微信小程序里集成FireRedASR Pro实现实时语音识别技术路径是清晰的。核心就是利用好小程序提供的录音和WebSocket这两个API做好数据格式的对接和实时通信的管理。剩下的就是根据你的具体业务场景在体验和稳定性上多做优化了。希望这篇内容能帮你顺利起步做出好用又有趣的语音交互功能。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。