Vue 开发 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 是阿里巴巴达摩院开源的语音识别工具包实时语音转写以 WebSocket 服务形式提供。以下基于仓库自带的 Vue 演示走通建立连接与取回转写结果的全流程。面向需要把实时转写嵌入自有页面的开发者。先看懂 2pass 实时转写的分工客户端与服务端各管什么服务端是funasr-wss-server-2pass进程流式 ASR、VAD、标点、ITN 模型都跑在里面客户端是 web-pages 下的 Web 演示采集麦克风、编码、分块发送、渲染文字2pass 模式意味着一轮对话有两段结果流式模型先给出快但粗的结果句尾再由离线模型精修后重发。前端靠返回消息里的mode字段区分这两类文本后面的渲染逻辑就建立在这个区分上。启动 WebSocket 转写服务服务端模型是预置的 ONNX 权重不需要训练环境。克隆仓库后用仓库提供的脚本拉起服务git clone https://gitcode.com/GitHub_Trending/fun/FunASR sh FunASR/runtime/run_server_2pass.sh脚本会加载模型目录和 TLS 证书默认监听 10095 端口。因为带了证书对外地址是wss://主机名:10095。页面里的地址输入框可以直接改成自己的地址各字段的完整定义在 WebSocket 协议文档。建立 WebSocket 连接并发出首包配置连接地址必须以ws://或wss://开头演示代码在new WebSocket之前会做这个校验。页面跑在 HTTPS 上时只能用 wss公网部署要留意这一点。onopen回调里先发送一条 JSON 配置消息之后才允许发音频speechSokt new WebSocket(Uri); speechSokt.onopen function () { speechSokt.send(JSON.stringify({ mode: 2pass, wav_name: h5, chunk_size: [5, 10, 5], is_speaking: true })); };chunk_size直接决定延迟档位[5, 10, 5]表示 600ms 一帧前后各带 300ms 的上下文。需要热词或逆文本归一化时在同一条消息里追加hotwords、itn字段即可。连接与状态处理都封装在 wsconnecter.js换成自己的msgHandle、stateHandle回调就能复用。分块推送 PCM 音频并以结束消息收尾演示用 Recorder 采集设备原始采样率的音频重采样成 16k、16bit PCM。采样点先攒在缓冲区攒够一个块才发送while (sampleBuf.length 960) { sendBuf sampleBuf.slice(0, 960); sampleBuf sampleBuf.slice(960); speechSokt.send(sendBuf); }960 个采样点是 60ms 的音频与模型帧率对齐发得太碎只会增加消息开销。点击停止时先把缓冲区里的剩余采样点发完再发送{is_speaking: false}标记句尾。此后服务端完成精修末条结果会带is_final: true。文件转写模式走同一套切分逻辑只是数据源换成文件字节wav_format为 PCM 时记得附带audio_fs字段。在 Vue 组件里渲染实时结果与精修结果演示前端基于 Vue 2.6 与 Ant Design Vue 1.7 搭建Web 演示源码 可直接对照。onmessage收到的 JSON 有四个字段需要处理text本段识别文本mode2pass-online是流式结果2pass-offline是精修结果is_final该句识别是否收尾timestamp字级时间戳供字幕对齐使用处理策略只有一条流式结果立即追加到编辑区精修结果到达时替换对应原句。演示中的handleWithTimestamp会把字级时间戳和文本逐词对齐输出秒: 文本的行格式做字幕功能可以直接借用。构建并上线 Web 演示在 web-pages 目录下执行npm install安装依赖。本地联调跑npm run dev它会读取frontend-config-dev.json里的接口配置正式上线跑npm run example产物输出到dist目录交给任意静态服务器即可。页面与服务端同域部署时可以直接沿用演示的地址推导逻辑把当前 URL 的协议换成 wss、端口替换为服务端口省去手动填写。收个尾上面串完了 FunASR 实时语音转写前端的主链路模型在服务端前端只做连接管理、音频分块与结果渲染协议字段两边严格对齐就不会出大问题。更多字段细节看 WebSocket 协议文档服务端部署与调优看 实时服务部署指南。【免费下载链接】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），仅供参考
Vue 开发 FunASR 实时语音转写前端：完整接入指南
Vue 开发 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 是阿里巴巴达摩院开源的语音识别工具包实时语音转写以 WebSocket 服务形式提供。以下基于仓库自带的 Vue 演示走通建立连接与取回转写结果的全流程。面向需要把实时转写嵌入自有页面的开发者。先看懂 2pass 实时转写的分工客户端与服务端各管什么服务端是funasr-wss-server-2pass进程流式 ASR、VAD、标点、ITN 模型都跑在里面客户端是 web-pages 下的 Web 演示采集麦克风、编码、分块发送、渲染文字2pass 模式意味着一轮对话有两段结果流式模型先给出快但粗的结果句尾再由离线模型精修后重发。前端靠返回消息里的mode字段区分这两类文本后面的渲染逻辑就建立在这个区分上。启动 WebSocket 转写服务服务端模型是预置的 ONNX 权重不需要训练环境。克隆仓库后用仓库提供的脚本拉起服务git clone https://gitcode.com/GitHub_Trending/fun/FunASR sh FunASR/runtime/run_server_2pass.sh脚本会加载模型目录和 TLS 证书默认监听 10095 端口。因为带了证书对外地址是wss://主机名:10095。页面里的地址输入框可以直接改成自己的地址各字段的完整定义在 WebSocket 协议文档。建立 WebSocket 连接并发出首包配置连接地址必须以ws://或wss://开头演示代码在new WebSocket之前会做这个校验。页面跑在 HTTPS 上时只能用 wss公网部署要留意这一点。onopen回调里先发送一条 JSON 配置消息之后才允许发音频speechSokt new WebSocket(Uri); speechSokt.onopen function () { speechSokt.send(JSON.stringify({ mode: 2pass, wav_name: h5, chunk_size: [5, 10, 5], is_speaking: true })); };chunk_size直接决定延迟档位[5, 10, 5]表示 600ms 一帧前后各带 300ms 的上下文。需要热词或逆文本归一化时在同一条消息里追加hotwords、itn字段即可。连接与状态处理都封装在 wsconnecter.js换成自己的msgHandle、stateHandle回调就能复用。分块推送 PCM 音频并以结束消息收尾演示用 Recorder 采集设备原始采样率的音频重采样成 16k、16bit PCM。采样点先攒在缓冲区攒够一个块才发送while (sampleBuf.length 960) { sendBuf sampleBuf.slice(0, 960); sampleBuf sampleBuf.slice(960); speechSokt.send(sendBuf); }960 个采样点是 60ms 的音频与模型帧率对齐发得太碎只会增加消息开销。点击停止时先把缓冲区里的剩余采样点发完再发送{is_speaking: false}标记句尾。此后服务端完成精修末条结果会带is_final: true。文件转写模式走同一套切分逻辑只是数据源换成文件字节wav_format为 PCM 时记得附带audio_fs字段。在 Vue 组件里渲染实时结果与精修结果演示前端基于 Vue 2.6 与 Ant Design Vue 1.7 搭建Web 演示源码 可直接对照。onmessage收到的 JSON 有四个字段需要处理text本段识别文本mode2pass-online是流式结果2pass-offline是精修结果is_final该句识别是否收尾timestamp字级时间戳供字幕对齐使用处理策略只有一条流式结果立即追加到编辑区精修结果到达时替换对应原句。演示中的handleWithTimestamp会把字级时间戳和文本逐词对齐输出秒: 文本的行格式做字幕功能可以直接借用。构建并上线 Web 演示在 web-pages 目录下执行npm install安装依赖。本地联调跑npm run dev它会读取frontend-config-dev.json里的接口配置正式上线跑npm run example产物输出到dist目录交给任意静态服务器即可。页面与服务端同域部署时可以直接沿用演示的地址推导逻辑把当前 URL 的协议换成 wss、端口替换为服务端口省去手动填写。收个尾上面串完了 FunASR 实时语音转写前端的主链路模型在服务端前端只做连接管理、音频分块与结果渲染协议字段两边严格对齐就不会出大问题。更多字段细节看 WebSocket 协议文档服务端部署与调优看 实时服务部署指南。【免费下载链接】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），仅供参考
