五分钟搭一个 FunASR 实时语音转写前端组件，从录音到出字

五分钟搭一个 FunASR 实时语音转写前端组件从录音到出字【免费下载链接】FunASROpen-source speech recognition toolkit for training, inference, streaming ASR, VAD, punctuation, speaker diarization pipelines, and OpenAI-compatible/MCP serving.项目地址: https://gitcode.com/GitHub_Trending/fun/FunASRFunASR 是开源语音识别工具包其 runtime 包的 WebSocket 服务让浏览器能直接做实时语音转写。本文以仓库内的客户端示例为参照讲清一个 Vue 实时转写页面怎么从零搭起来以及按下录音键之后链路里发生了什么。 什么场景适合做浏览器转写组件直播字幕、会议字幕投屏、网页表单的语音输入本质都一样用户开口几百毫秒内出字。浏览器语音转写组件不用装任何东西直接嵌进现有 H5 页面。仓库里已经有一个完整的浏览器端示例从录音到结果展示都覆盖了照它抄就行。⏱️ 五分钟跑起来git clone https://gitcode.com/GitHub_Trending/fun/FunASR cd FunASR/web-pages npm install npm run devweb-pages 是官网工程Vue 2.6 Ant Design Vue。dev 起来后访问/static/online/index.html这个路由就是实时转写体验页静态文件从 runtime 示例拷来。Vue 侧的实时听写板块在 web-pages/src/views/home/sstx.vue画了 VAD → 流式识别 → 标点 → ITN 的完整流程。 一条音频是怎么变成文字的这条链路是一个 WebSocket 实时识别服务源码在 runtime/html5/static/核心只有 main.js 和 wsconnecter.js 两个文件。拆四步看。先录 16kHz PCM麦克风原始信号通常是 44.1k/48k而服务端的流式识别只吃 16kHz 16bit 单声道 PCM。所以第一步不是上传是重采样Recorder 以 sampleRate:16000 录音onProcess 每吐出一块就过一遍 Recorder.SampleData 重采样到 16k追加进 sampleBuf。这一步省了直接发 48k 数据服务端识别出来的是快进音。切 60ms 小块连续上行960 个采样点在 16k 下正好 60mswhile (sampleBuf.length chunk_size) { sendBuf sampleBuf.slice(0, chunk_size); sampleBuf sampleBuf.slice(chunk_size, sampleBuf.length); wsconnecter.wsSend(sendBuf); }服务端流式模型按 chunk 推进chunk_size [5,10,5] 是帧数chunk_interval 声明上行节奏客户端只需保证连续、不丢、不重。先送 JSON 声明再发连续二进制连接建立后不能直接开始转写要先发一条 JSON 告诉服务端这个会话怎么处理var request { chunk_size: [5, 10, 5], is_speaking: true, // 声明接下来是连续音频流 chunk_interval: 10, mode: getAsrMode() // online / 2pass / offline }; speechSokt.send(JSON.stringify(request));同一条连接靠这一条 JSON 切换实时、2pass、离线文件转写三种服务模式。停止时先送完 sampleBuf 里剩余音频再发 is_speaking:false服务端才知道流结束了。增量结果回流界面更新服务端逐块推回 JSON字段有 text、mode、is_final、timestamp。main.js 的 getJsonMessage 做分支var rectxt JSON.parse(jsonMsg.data)[text]; if (asrmodel 2pass-offline || asrmodel offline) { offline_text offline_text rectxt; rec_text offline_text; // 最终结果覆盖界面 } else { rec_text rec_text rectxt; // 流式增量追加 }2pass 的含义是online 先出快字句尾再用离线高精度模型修正覆盖这就是回调里必须区分两个分支的原因。⚠️ 三个容易翻车的点上行节奏与分片帧率现象是按下开始很久不出字。原因是 wsSend 只在 readyState1 时真正发送连接还没 OPEN 时发的数据被静默丢弃另外 960 采样点60ms 的前提是 16k采样率没对上节奏就乱。解法上行前校验 readyState没收到首条 JSON 别开录。断线与状态复位现象是断网重连后上一句的字混进新一句。原因是 onclose 只触发状态回调sampleBuf 和已累积文本不会自动清空重连后若不重发 is_speaking:true 的 JSON服务端也不会进入流式状态。解法断开即进入已断开态重置缓冲与结果重连成功才允许开新会话。覆盖还是追加现象是界面文字越变越长又突然闪烁变短。原因是 2pass 的离线最终结果是整体覆盖回调里若再追加一遍就重复了。解法按 mode 字段分支online 走增量追加2pass-offline 以 offline_text 为准。 界面打磨清单状态文案连接中/聆听中/识别中/已断开四态聆听时显示已录时长示例直接展示 bufferDuration/1000。波形onProcess 的第二个参数 powerLevel 就是当前块音量画条简易波形不需要自己搭 AnalyserNode。错误态连接失败把地址和端口明确摆出来参考 main.js 的 alert 写法空白页会让用户怀疑是麦克风的问题。字级时间戳服务端会带 timestamp 字段handleWithTimestamp 里就是做词对齐的逻辑可做点词定位式字幕。音频回放stop 时 rec.stop 拿到 blob经 pcm2wav 播放方便人工核对识别结果。✅ 上线前核对构建npm run example生产产物落在dist目录vue-cli 默认输出目录。协议HTTPS 页面只能用 wss示例是靠替换当前 URL 的端口推断 wss 地址服务默认端口 10095生产环境把地址统一配置别硬编码。并发压测开多个标签页同时转写在线服务包本身支持多路连接重点看首字延迟和页面内存。长文件链路offline 模式按 960 采样点分片上传验证 is_final:true 的等待时间和关连接行为。实时链路的完整示例就在 runtime/html5/static/ 那几个文件里服务端的协议与部署见 runtime/docs/SDK_advanced_guide_online.md。从这个起点出发Vue 语音识别前端的剩余工作量基本只剩状态管理和界面。【免费下载链接】FunASROpen-source speech recognition toolkit for training, inference, streaming ASR, VAD, punctuation, speaker diarization pipelines, and OpenAI-compatible/MCP serving.项目地址: https://gitcode.com/GitHub_Trending/fun/FunASR创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考