JavaScript + ONNX Runtime Web 实现浏览器离线唤醒词

发布时间:2026/10/28 16:09:14

JavaScript + ONNX Runtime Web 实现浏览器离线唤醒词 网页里做语音功能很多人的第一反应是调用云端语音识别采集麦克风、上传音频、等待返回文字再判断用户说了什么。但如果需求只是“开始录音”“下一页”“打开面板”或者一个固定唤醒词整套 ASR 链路其实太重了。更合适的做法是关键词识别KWS模型不转写整句话只判断目标短语有没有出现。这类模型足够小可以直接放进网页由 ONNX Runtime Web 在浏览器本地推理麦克风 → 单声道 PCM → 重采样到 16kHz → Mel 特征 → ONNX 模型 → 时序判决 → 触发前端事件模型和运行库加载完成后音频不需要上传到业务服务器。先在线体验再决定是否集成听词控制台已经放了可以直接使用的演示模型打开 Voicute 控制台 并登录在“演示模型”区域选择一个模型点击“在线测试”允许浏览器使用麦克风后就能直接说出页面显示的关键词观察识别分数和触发结果。演示模型旁边同时提供“下载”按钮。下载后可以通过页面给出的推理代码在本地复现不必先训练自己的模型。自己生成的模型也可以先在控制台里用麦克风测试确认实际发音效果后再下载部署。也就是说可以先用现成 Demo 验证“浏览器本地推理”这条链路再考虑自定义关键词和正式集成。为什么值得放到浏览器里做第一是隐私。原始麦克风音频留在当前页面不需要为了一个固定指令持续上传。第二是部署简单。静态站点、内网控制台、PWA、展厅大屏和设备配网页面都可以直接承载推理逻辑不需要另建语音识别服务。第三是响应稳定。没有网络往返触发延迟主要来自音频窗口、模型推理和判决规则。当然它不适合自由对话。如果要把任意一句话转成文字仍然应该使用 ASR。模型输出不能直接当触发结果KWS 模型通常对连续的短音频窗口输出概率。如果只写一句“概率大于 0.7 就触发”很快会遇到三个问题键盘、关门等瞬态声音造成尖峰同一句唤醒词跨多个窗口连续触发多次电视和音乐里的相似发音造成误唤醒。所以完整引擎还需要后处理规则作用连续帧确认过滤单帧尖峰冷却时间防止一次发音重复触发峰值与背景比避免在持续底噪上误判爆发封锁处理电视、音乐等连续高概率片段能量跳变判断人声是否从近期背景中突然出现调参原则不是“五层全开、数值拉满”而是先只开连续帧和冷却时间再根据真实误触类型逐项增加限制。过滤越严格漏检风险也越高。前端代码应该怎么组织业务层最好只接收检测事件不直接处理音频帧和张量constdetectorawaitWakeWordDetector.create({modelUrl:/models/ni-hao-xiao-ting.onnx,threshold:0.72,consecutiveFrames:2,cooldownMs:1800})detector.on(detected,({keyword,score}){console.log(检测到,keyword,score)openControlPanel()})awaitdetector.start()具体库的 API 会不同但结构最好保持清晰检测器负责麦克风、特征、推理和时序状态业务代码只决定检测成功后做什么。浏览器端的几个工程限制除 localhost 外浏览器麦克风通常要求 HTTPS。页面还需要明确的用户授权音频上下文往往也要由点击等用户操作启动。设备输入可能是 44.1kHz 或 48kHz而模型通常要求固定采样率。必须在送入特征提取前重采样否则即使张量形状没报错识别效果也会明显下降。浏览器还可能降低后台标签页的执行频率移动端甚至会挂起页面。需要常年待机的硬件更适合 Android、Linux 或 ESP32-S3浏览器适合用户正在使用的页面。上线前怎样测不要只拿训练样本测试。建议自己建立一个小测试集多个人以不同语速、距离说目标词正常聊天但不说目标词电视、音乐、键盘和房间底噪目标产品实际会遇到的麦克风和设备。正样本统计召回率长时间负样本统计误触发次数两者不要混成一个“准确率”。如果某种口音或自然说法总是叫不醒加入少量经过授权的真人录音重新训练通常比不断降低阈值更有效。什么时候应该选这套方案适合网页唤醒词、语音快捷键、展厅大屏、演示控制、无障碍操作、网页内按词启动录音以及少量固定命令。不适合语音输入法、会议转写、自由对话和开放词表搜索。开源项目 onnx-wakeword 提供了浏览器等平台的参考推理实现。自定义模型可以自行训练也可以通过 听词 Voicute 生成标准 ONNX/TFLite 文件下载后在本地运行不需要推理 AccessKey也不按设备收运行费用。想先验证效果可以直接进入 控制台演示模型点击“在线测试”需要本地调试时再点击“下载”取得模型和集成入口。官网还提供了可被搜索引擎直接访问的完整教程浏览器端离线唤醒词用 ONNX 实现网页本地语音触发。
延伸阅读

更多相关文章

2026/10/25 10:18:59

Visual C++ 6.0 在 Windows 10/11 上的完整安装与兼容性配置指南

简介:本资源为经典开发环境 Microsoft Visual C 6.0 官方兼容安装包,适配 Windows 7/8/10 系统(32位与64位),面向C初学者、高校计算机专业学生及遗留系统维护人员,解决老旧项目编译、教学实验搭建及Win32 A…

2026/10/25 21:32:12

元初混沌体系 第三卷 卫星互联网全域周天拓扑体系:第六十四篇 高轨星座轻量化星上交换拓扑内核

第六十四篇 高轨星座轻量化星上交换拓扑内核承启前置 篇章立论前文第六十三篇完成极端地磁扰动下高轨链路稳态拓扑体系定型,通过静态结界隔离、动态拓扑重构、三层圈层兜底、全域时序补偿四大核心体系,彻底解决高轨星座在极端空间环境下的链路失稳、组网…

2026/10/28 16:07:10

CRPS电源纹波噪声测量全攻略:从原理到实操避免翻车

纹波和噪声的测量,是电源测试里最容易“翻车”的环节之一。我见过太多人拿着示波器探头往输出端一搭,看到屏幕上几十毫伏的毛刺就下结论说电源不合格,结果换个人、换根线、换个接地方式,读数直接差出一个数量级。CRPS电源&#xf…

2026/10/28 16:07:10

cloudflare-os 实战:边缘运行时构建 AI agent 操作系统

1. 从标题到落地:cloudflare-os 到底想解决什么问题第一次看到cloudflare-os这个标题,我脑子里冒出来的第一个念头是:这大概率不是又一个"把 Linux 塞进浏览器"的玩具项目。因为标题里同时挂着 Cloudflare Workers、AI、agent、pnp…

2026/10/28 16:07:09

Ripro9.0免扩展二开版:解密无后门与本地部署实战

简介:这份资源是Ripro9.0免扩展二开版WordPress博客主题的完整源码包,面向使用WordPress搭建资源站、素材站或博客的站长与二次开发者,尤其适合虚拟主机环境、不想额外安装扩展组件的用户。包内不仅包含据称由Ripro8.9二开而来的9.0全解密无后…

2026/10/28 16:07:09

遗传算法与布谷鸟搜索优化特征选择实战

1. 项目概述:当遗传算法遇上特征选择在机器学习项目中,特征选择始终是个令人头疼的问题。去年我在一个医疗诊断项目中发现,当原始数据包含200维特征时,即使使用随机森林这样的算法,模型性能也会因为特征冗余而大打折扣…

2026/10/28 16:07:09

Cloudflare OS 实战:用 Workers 与 AI 搭建边缘全栈应用

1. 从 cloudflare-os 这个标题说起:它到底是什么第一次看到cloudflare-os这个标题,我下意识以为 Cloudflare 又出了什么操作系统。翻了一圈资料才反应过来,这其实是社区里对“把 Cloudflare 全家桶(Workers、Pages、D1、R2、KV、Q…

2026/10/28 16:02:09

MaxKB:大模型知识库管理与RAG技术实践

1. MaxKB:大模型知识库管理的革命性工具在人工智能技术快速发展的今天,大模型知识库已成为企业和个人高效管理信息的核心基础设施。MaxKB作为一款专为大模型设计的知识库管理系统,正在改变我们构建、管理和利用知识的方式。我第一次接触MaxKB…

2026/10/28 14:42:12

全国计算机二级C语言真题PDF高效刷题指南

简介:这份PDF是全国计算机二级C语言考试的试题与答案解析,专为备考二级C语言的考生准备。内容涵盖C语言特点与设计理念、程序基本组成单位、main函数执行流程、函数嵌套调用规则、标识符命名规范、整型实型字符型数据类型、八进制十六进制数合法形式、运…

2026/10/28 15:28:56

requests+BeautifulSoup:爬虫抓取h1标题的入门实战指南

简介:一份以实战为导向的Python爬虫入门资源,面向具备基本编程基础、希望快速掌握网络数据抓取的初学者,可解决从零编写简单爬虫的常见困惑。实例以requests库发送HTTP请求、BeautifulSoup解析HTML文档,完整演示从网页中提取 标题…

2026/10/28 3:32:29

递推最小二乘参数辨识MATLAB编程:二阶系统与渐消记忆实现

简介:这是一篇面向控制系统、信号处理与机器学习等领域学习者的最小二乘参数辨识程序说明文档。资源共包含一个docx格式文档,压缩包大小七十八KB,内容围绕递推最小二乘算法和渐消记忆最小二乘算法展开:先构造一个极点位于单位圆内…

2026/10/28 0:02:13

Python股票自动交易系统源码解析:从行情获取到风控的完整链路

简介:这份资源是面向高校计算机、金融相关专业毕业设计场景的完整项目源码包,主题为基于Python的股票自动交易系统,适合需要完成毕设选题、课程设计或自学金融量化交易开发的学生与开发者参考。压缩包共收录687个文件,整体约14.93…

2026/10/28 0:02:13

视酷酷信IM源码部署指南:Java 17+MySQL 8.0.33实战配置

简介:这是一套2024年亲测可部署的视酷酷信IM即时通讯系统源码,面向具备Java、OC、C#及Vue开发能力的技术人员,解决私有化即时通讯平台快速搭建与二次定制需求,尤其适用于需集成商城、保障数据主权的中小型企业或独立开发者。资源共…

2026/10/28 0:02:13

Python爬取百度迁徙数据:接口解析、批量采集与避坑指南

简介:这份资源是一个用Python爬取百度迁徙数据的脚本压缩包,面向具备Python基础、希望入门网络爬虫与数据解析的开发者,解决按日期获取全国热门城市人口迁徙数据的问题。包内共1个文件,为单个py脚本,压缩包约1KB&#…

还想了解更多?直接咨询顾问

免费诊断 + 免费方案 + 透明报价。

全国咨询热线400-8866-253
免费获取方案
☎咨询二维码 ☎ ↑