FunASR HTML5 客户端接入指南wss 语音识别服务与网页端实时/离线转写实战【免费下载链接】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本文围绕 FunASR 的 HTML5 客户端访问界面展开介绍如何通过 WebSocketwss协议部署 Python/C 语音识别服务并使用 FunASR 内置的网页客户端完成麦克风实时识别与离线文件转写。读完本篇后你将能够独立启动 FunASR wss 服务端与 HTML5 静态服务h5Server.py在浏览器含手机端中完成 2pass、online、offline 三种识别模式的接入测试并理解客户端音频采集、分块发送与服务端协议交互的完整链路。两种客户端接入方式概述FunASR 的服务端部署采用 WebSocket 协议客户端支持 HTML5 网页访问可同时支持麦克风输入与文件输入。接入服务共有两种方式方式一html 客户端直连。手动下载 FunASR 仓库中的客户端静态目录 runtime/html5/static 至本地直接打开其中的index.html网页在页面上输入 wss 服务地址与端口号即可使用。方式二html5 服务端托管。启动h5Server.pyHTML5 服务由它自动将客户端静态页面分发到本地/远端支持手机等设备通过局域网或公网地址访问。两种方式最终连接的都是同一个 FunASR wss ASR 服务区别仅在于静态页面index.html及配套 JS的分发方式。语音识别服务启动FunASR 支持 Python 版本与 C 版本两种服务部署二者定位不同Python 版本直接部署 Python pipeline支持流式实时语音识别模型、离线语音识别模型、流式离线一体化纠错2pass模型并可输出带标点的文字。单个 server支持单个 client 连接适合功能验证与快速调试。C 版本基于 funasr-runtime-sdk支持一键部署当前 0.1.0 版本支持离线文件转写。单个 server可支撑上百路 client 并发请求适合生产环境服务化。Python 版本服务启动安装依赖环境pip3 install -U modelscope funasr flask # 中国大陆用户如果遇到网络问题可以通过下面指令安装 # pip3 install -U modelscope funasr -i https://mirror.sjtu.edu.cn/pypi/web/simple git clone https://gitcode.com/GitHub_Trending/fun/FunASR.git cd FunASR启动 ASR 服务wss 方式cd funasr/runtime/python/websocket python funasr_wss_server.py --port 10095该服务的完整实现在 funasr_wss_server.py更多参数配置与客户端示例可参考 runtime/python/websocket 目录下的 README 与funasr_wss_client.py。从源码的参数定义funasr_wss_server.py可以看到服务默认加载一套覆盖 VAD 流式 ASR 离线 ASR 标点的完整模型组合参数默认值说明--port10095wss 服务监听端口--asr_modeliic/speech_paraformer-large-contextual_asr_nat-zh-cn-16k-common-vocab84042pass 模式的离线 ASR 模型ModelScope 模型 ID--asr_model_onlineiic/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-online流式 online ASR 模型--vad_modeliic/speech_fsmn_vad_zh-cn-16k-common-pytorchFSMN 语音活动检测模型--punc_modeliic/punc_ct-transformer_zh-cn-common-vad_realtime-vocab272727CT-Transformer 标点恢复模型--ngpu/--device1/cudaGPU 数量与设备devicecpu时可用纯 CPU 推理--certfile/--keyfile../../ssl_key/server.crt/server.keywss 所需的 SSL 证书与私钥默认指向 runtime/ssl_key--worker_threadsmax(4, CPU核数)线程池大小将阻塞式推理移出事件循环--concurrent_vad/--concurrent_asr_online/--concurrent_asr_offline/--concurrent_punc4/4/2/1各模块最大并发 generate() 调用数--save_offline_segments关闭调试开关将 2pass 离线阶段送入 ASR 的音频片段存为 wav便于排查 VAD 切分问题其中并发控制参数表明该服务内部通过ThreadPoolExecutor与分模块并发上限来避免阻塞事件循环虽然文档定位是“单 server 单 client”但底层实现已具备一定的多连接调度能力。关于 SSL 证书wss 协议要求服务端提供证书仓库内置了 runtime/html5/ssl_key 下的server.crt/server.key。若需自行生成证书可参考 ssl_key/readme.md 中的 openssl 命令### 1) Generate a private key openssl genrsa -des3 -out server.key 2048 ### 2) Generate a csr file openssl req -new -key server.key -out server.csr ### 3) Remove pass cp server.key server.key.org openssl rsa -in server.key.org -out server.key ### 4) Generated a crt file, valid for 1 year openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt该文档同时提醒自行生成的自签证书可能因浏览器安全策略不被所有浏览器接受生产环境建议使用正规机构签发的证书。启动 HTML5 服务可选如果需要使用前文“方式二”访问可以启动 HTML5 静态服务h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE] [--keyfile KEYFILE]示例如下。注意 IP 地址的设置如果从其他设备例如手机端访问需要将 IP 地址设为真实公网/局域网可达 IPcd funasr/runtime/html5 python h5Server.py --host 0.0.0.0 --port 1337启动后在浏览器中访问https://127.0.0.1:1337/static/index.html即可进入客户端页面。从源码 h5Server.py 看该服务实现非常轻量基于 Flask 构建static_folderstatic、static_url_path/static即把 runtime/html5/static 目录整体作为静态资源根目录对外分发h5Server.py访问根路径/时 302 重定向到/static/index.html四个命令行参数均有默认值--host默认0.0.0.0--port默认1337--certfile默认./ssl_key/server.crt--keyfile默认./ssl_key/server.keyh5Server.py最终以ssl_context(certfile, keyfile)启动因此该服务本身就是一个 HTTPS 服务h5Server.py。这一点很关键只有页面本身通过 https 加载时浏览器才允许调用麦克风和发起 wss 连接。C 版本服务启动由于 C 依赖环境较多官方建议采用 Docker 部署支持一键启动服务curl -O https://isv-data.oss-cn-hangzhou.aliyuncs.com/ics/MaaS/ASR/shell/funasr-runtime-deploy-offline-cpu-zh.sh; sudo bash funasr-runtime-deploy-offline-cpu-zh.sh install --workspace /root/funasr-runtime-resources该脚本在仓库中的对应版本为 funasr-runtime-deploy-offline-cpu-zh.sh。详细参数配置与解析请参考 C SDK 教程 runtime/docs/SDK_tutorial_zh.md 以及 runtime/docs 目录下的其他 SDK 文档。客户端测试方式一静态客户端直连手动下载 runtime/html5/static 目录到本地计算机打开index.html网页输入 wss 地址与端口号例如wss://127.0.0.1:10095/即可使用。方式二通过 HTML5 服务端访问启动h5Server.py后通过https://127.0.0.1:1337/static/index.html访问。IP 地址需要与 html5 server 保持一致如果是本地机器可以用127.0.0.1手机等设备则填写服务器的局域网/公网 IP。进入页面后同样输入 wss 地址与端口号即可。页面加载后客户端会做一些便捷处理从 main.js 可见页面会自动把当前访问的https://前缀转换为wss://并把端口替换为默认的10095填入输入框方便“本机部署、本机访问”的常见场景。客户端功能与协议交互细节结合 runtime/html5/static 下的前端源码可以完整理解这个网页客户端的能力边界与协议细节页面能力index.htmlASR 服务器地址输入框必填下方提供“点此处手工授权”链接用于 iOS 等场景下先手工访问一次 wss 地址完成证书授权录音模式麦克风默认或文件ASR 模型模式麦克风模式下可选2pass默认流式 离线一体化纠错、online纯流式、offline离线ITN 开关逆文本标准化默认关闭热词设置一行一个关键字空格隔开权重如阿里巴巴 20识别结果显示区与录音回放播放器。音频采集与分块发送main.js麦克风模式使用Recorder({type:pcm, bitRate:16, sampleRate:16000})采集 16kHz 16bit PCM 数据recProcess回调中会将录音缓冲区按chunk_size960采样即 60ms 16k切块通过 WebSocket 逐块发送文件模式下客户端读取文件字节流wav 文件还会解析文件头获取采样率main.js同样以 960 字节为块发送收到is_finaltrue的响应后自动停止连接并播放原音频以便人工核对。WebSocket 控制消息协议wsconnecter.js连接建立成功onOpen后客户端会先发送一条 JSON 配置消息关键字段包括var request { chunk_size: [5, 10, 5], // 流式模型 chunk 配置 wav_name: h5, is_speaking: true, // 会话开始 chunk_interval: 10, itn: getUseITN(), // ITN 开关 mode: getAsrMode() // 2pass / online / offline文件模式强制 offline }; // 文件模式附加字段 request.wav_format file_ext; // 如 PCMwav 文件 request.audio_fs file_sample_rate; // wav 文件采样率 // 热词附加字段 request.hotwords JSON.stringify({阿里巴巴: 20, hello world: 40});停止识别时客户端发送is_speaking: false的 JSON 消息通知服务端结束会话main.js。服务端返回的消息为 JSON 格式包含text识别文本、mode、is_final、timestamp字段客户端会区分2pass-offline/offline结果累计到 offline_text 并按时间戳展示与流式增量结果main.js。连接地址格式wsconnecter.js要求输入以wss://或ws://开头否则弹出“请检查wss地址正确性”的提示wsconnecter.js。由于 wss 依赖 TLS本地自签证书场景下部分浏览器尤其是 iOS Safari需要先用页面上“点此处手工授权”链接访问一次 wss 地址、手动信任证书后再连接。总结与适用边界Python wss 服务funasr_wss_server.py功能完整支持 2pass/online/offline 三种模式、标点、ITN、热词适合开发验证与单机体验其官方定位是单 client 服务。HTML5 客户端是纯前端实现index.html 5 个 JS 文件基于录音库 pcm 编码无构建依赖直连或经 h5Server.py 托管均可使用且支持手机端浏览器访问。C 版 funasr-runtime-sdk 面向生产部署通过 Docker 一键安装可承载上百路并发请求是网页端体验与规模化服务之间的选择。常见问题连不上 wss 时优先检查证书是否被浏览器信任、端口是否放行、--host是否设为0.0.0.0、手机访问时 IP 是否为可达的局域网/公网地址。致谢本项目由 FunASR 社区维护HTML5 demo 由 AiHealthx 贡献。【免费下载链接】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），仅供参考 FunASR HTML5 客户端接入指南：wss 语音识别服务与网页端实时/离线转写实战
FunASR HTML5 客户端接入指南wss 语音识别服务与网页端实时/离线转写实战【免费下载链接】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本文围绕 FunASR 的 HTML5 客户端访问界面展开介绍如何通过 WebSocketwss协议部署 Python/C 语音识别服务并使用 FunASR 内置的网页客户端完成麦克风实时识别与离线文件转写。读完本篇后你将能够独立启动 FunASR wss 服务端与 HTML5 静态服务h5Server.py在浏览器含手机端中完成 2pass、online、offline 三种识别模式的接入测试并理解客户端音频采集、分块发送与服务端协议交互的完整链路。两种客户端接入方式概述FunASR 的服务端部署采用 WebSocket 协议客户端支持 HTML5 网页访问可同时支持麦克风输入与文件输入。接入服务共有两种方式方式一html 客户端直连。手动下载 FunASR 仓库中的客户端静态目录 runtime/html5/static 至本地直接打开其中的index.html网页在页面上输入 wss 服务地址与端口号即可使用。方式二html5 服务端托管。启动h5Server.pyHTML5 服务由它自动将客户端静态页面分发到本地/远端支持手机等设备通过局域网或公网地址访问。两种方式最终连接的都是同一个 FunASR wss ASR 服务区别仅在于静态页面index.html及配套 JS的分发方式。语音识别服务启动FunASR 支持 Python 版本与 C 版本两种服务部署二者定位不同Python 版本直接部署 Python pipeline支持流式实时语音识别模型、离线语音识别模型、流式离线一体化纠错2pass模型并可输出带标点的文字。单个 server支持单个 client 连接适合功能验证与快速调试。C 版本基于 funasr-runtime-sdk支持一键部署当前 0.1.0 版本支持离线文件转写。单个 server可支撑上百路 client 并发请求适合生产环境服务化。Python 版本服务启动安装依赖环境pip3 install -U modelscope funasr flask # 中国大陆用户如果遇到网络问题可以通过下面指令安装 # pip3 install -U modelscope funasr -i https://mirror.sjtu.edu.cn/pypi/web/simple git clone https://gitcode.com/GitHub_Trending/fun/FunASR.git cd FunASR启动 ASR 服务wss 方式cd funasr/runtime/python/websocket python funasr_wss_server.py --port 10095该服务的完整实现在 funasr_wss_server.py更多参数配置与客户端示例可参考 runtime/python/websocket 目录下的 README 与funasr_wss_client.py。从源码的参数定义funasr_wss_server.py可以看到服务默认加载一套覆盖 VAD 流式 ASR 离线 ASR 标点的完整模型组合参数默认值说明--port10095wss 服务监听端口--asr_modeliic/speech_paraformer-large-contextual_asr_nat-zh-cn-16k-common-vocab84042pass 模式的离线 ASR 模型ModelScope 模型 ID--asr_model_onlineiic/speech_paraformer-large_asr_nat-zh-cn-16k-common-vocab8404-online流式 online ASR 模型--vad_modeliic/speech_fsmn_vad_zh-cn-16k-common-pytorchFSMN 语音活动检测模型--punc_modeliic/punc_ct-transformer_zh-cn-common-vad_realtime-vocab272727CT-Transformer 标点恢复模型--ngpu/--device1/cudaGPU 数量与设备devicecpu时可用纯 CPU 推理--certfile/--keyfile../../ssl_key/server.crt/server.keywss 所需的 SSL 证书与私钥默认指向 runtime/ssl_key--worker_threadsmax(4, CPU核数)线程池大小将阻塞式推理移出事件循环--concurrent_vad/--concurrent_asr_online/--concurrent_asr_offline/--concurrent_punc4/4/2/1各模块最大并发 generate() 调用数--save_offline_segments关闭调试开关将 2pass 离线阶段送入 ASR 的音频片段存为 wav便于排查 VAD 切分问题其中并发控制参数表明该服务内部通过ThreadPoolExecutor与分模块并发上限来避免阻塞事件循环虽然文档定位是“单 server 单 client”但底层实现已具备一定的多连接调度能力。关于 SSL 证书wss 协议要求服务端提供证书仓库内置了 runtime/html5/ssl_key 下的server.crt/server.key。若需自行生成证书可参考 ssl_key/readme.md 中的 openssl 命令### 1) Generate a private key openssl genrsa -des3 -out server.key 2048 ### 2) Generate a csr file openssl req -new -key server.key -out server.csr ### 3) Remove pass cp server.key server.key.org openssl rsa -in server.key.org -out server.key ### 4) Generated a crt file, valid for 1 year openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt该文档同时提醒自行生成的自签证书可能因浏览器安全策略不被所有浏览器接受生产环境建议使用正规机构签发的证书。启动 HTML5 服务可选如果需要使用前文“方式二”访问可以启动 HTML5 静态服务h5Server.py [-h] [--host HOST] [--port PORT] [--certfile CERTFILE] [--keyfile KEYFILE]示例如下。注意 IP 地址的设置如果从其他设备例如手机端访问需要将 IP 地址设为真实公网/局域网可达 IPcd funasr/runtime/html5 python h5Server.py --host 0.0.0.0 --port 1337启动后在浏览器中访问https://127.0.0.1:1337/static/index.html即可进入客户端页面。从源码 h5Server.py 看该服务实现非常轻量基于 Flask 构建static_folderstatic、static_url_path/static即把 runtime/html5/static 目录整体作为静态资源根目录对外分发h5Server.py访问根路径/时 302 重定向到/static/index.html四个命令行参数均有默认值--host默认0.0.0.0--port默认1337--certfile默认./ssl_key/server.crt--keyfile默认./ssl_key/server.keyh5Server.py最终以ssl_context(certfile, keyfile)启动因此该服务本身就是一个 HTTPS 服务h5Server.py。这一点很关键只有页面本身通过 https 加载时浏览器才允许调用麦克风和发起 wss 连接。C 版本服务启动由于 C 依赖环境较多官方建议采用 Docker 部署支持一键启动服务curl -O https://isv-data.oss-cn-hangzhou.aliyuncs.com/ics/MaaS/ASR/shell/funasr-runtime-deploy-offline-cpu-zh.sh; sudo bash funasr-runtime-deploy-offline-cpu-zh.sh install --workspace /root/funasr-runtime-resources该脚本在仓库中的对应版本为 funasr-runtime-deploy-offline-cpu-zh.sh。详细参数配置与解析请参考 C SDK 教程 runtime/docs/SDK_tutorial_zh.md 以及 runtime/docs 目录下的其他 SDK 文档。客户端测试方式一静态客户端直连手动下载 runtime/html5/static 目录到本地计算机打开index.html网页输入 wss 地址与端口号例如wss://127.0.0.1:10095/即可使用。方式二通过 HTML5 服务端访问启动h5Server.py后通过https://127.0.0.1:1337/static/index.html访问。IP 地址需要与 html5 server 保持一致如果是本地机器可以用127.0.0.1手机等设备则填写服务器的局域网/公网 IP。进入页面后同样输入 wss 地址与端口号即可。页面加载后客户端会做一些便捷处理从 main.js 可见页面会自动把当前访问的https://前缀转换为wss://并把端口替换为默认的10095填入输入框方便“本机部署、本机访问”的常见场景。客户端功能与协议交互细节结合 runtime/html5/static 下的前端源码可以完整理解这个网页客户端的能力边界与协议细节页面能力index.htmlASR 服务器地址输入框必填下方提供“点此处手工授权”链接用于 iOS 等场景下先手工访问一次 wss 地址完成证书授权录音模式麦克风默认或文件ASR 模型模式麦克风模式下可选2pass默认流式 离线一体化纠错、online纯流式、offline离线ITN 开关逆文本标准化默认关闭热词设置一行一个关键字空格隔开权重如阿里巴巴 20识别结果显示区与录音回放播放器。音频采集与分块发送main.js麦克风模式使用Recorder({type:pcm, bitRate:16, sampleRate:16000})采集 16kHz 16bit PCM 数据recProcess回调中会将录音缓冲区按chunk_size960采样即 60ms 16k切块通过 WebSocket 逐块发送文件模式下客户端读取文件字节流wav 文件还会解析文件头获取采样率main.js同样以 960 字节为块发送收到is_finaltrue的响应后自动停止连接并播放原音频以便人工核对。WebSocket 控制消息协议wsconnecter.js连接建立成功onOpen后客户端会先发送一条 JSON 配置消息关键字段包括var request { chunk_size: [5, 10, 5], // 流式模型 chunk 配置 wav_name: h5, is_speaking: true, // 会话开始 chunk_interval: 10, itn: getUseITN(), // ITN 开关 mode: getAsrMode() // 2pass / online / offline文件模式强制 offline }; // 文件模式附加字段 request.wav_format file_ext; // 如 PCMwav 文件 request.audio_fs file_sample_rate; // wav 文件采样率 // 热词附加字段 request.hotwords JSON.stringify({阿里巴巴: 20, hello world: 40});停止识别时客户端发送is_speaking: false的 JSON 消息通知服务端结束会话main.js。服务端返回的消息为 JSON 格式包含text识别文本、mode、is_final、timestamp字段客户端会区分2pass-offline/offline结果累计到 offline_text 并按时间戳展示与流式增量结果main.js。连接地址格式wsconnecter.js要求输入以wss://或ws://开头否则弹出“请检查wss地址正确性”的提示wsconnecter.js。由于 wss 依赖 TLS本地自签证书场景下部分浏览器尤其是 iOS Safari需要先用页面上“点此处手工授权”链接访问一次 wss 地址、手动信任证书后再连接。总结与适用边界Python wss 服务funasr_wss_server.py功能完整支持 2pass/online/offline 三种模式、标点、ITN、热词适合开发验证与单机体验其官方定位是单 client 服务。HTML5 客户端是纯前端实现index.html 5 个 JS 文件基于录音库 pcm 编码无构建依赖直连或经 h5Server.py 托管均可使用且支持手机端浏览器访问。C 版 funasr-runtime-sdk 面向生产部署通过 Docker 一键安装可承载上百路并发请求是网页端体验与规模化服务之间的选择。常见问题连不上 wss 时优先检查证书是否被浏览器信任、端口是否放行、--host是否设为0.0.0.0、手机访问时 IP 是否为可达的局域网/公网地址。致谢本项目由 FunASR 社区维护HTML5 demo 由 AiHealthx 贡献。【免费下载链接】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），仅供参考