简介这是一份基于 Web Speech API 构建的简易 AI 聊天机器人演示代码面向前端开发者和语音交互初学者演示如何借助浏览器原生语音识别与合成能力配合 API.ai 自然语言处理平台实现“语音输入—语义理解—语音回复”的完整闭环。工程共包含 13 个文件除核心的 JavaScript 逻辑与 HTML/CSS 界面外还提供 package.json、Procfile 等部署配置以及操作演示视频mov和说明文档md压缩包整体约 7.22MB结构精简适合快速上手研究。目前已有 162 人学习下载。通过学习这份资源读者可以直观理解 SpeechRecognition 与 SpeechSynthesis 接口的调用方式掌握将前端语音模块接入第三方 NLP 服务的流程同时还能借鉴 index.js 中的服务端组织和环境变量配置方法为后续开发更完整的语音助手打下基础。注意该演示依赖实验性 API需在 Chrome、Opera 等 Blink 内核浏览器中运行。1. 一个敢说话的页面Web Speech API 把「听」和「说」都放进浏览器你打开一个网页点一下按钮对着麦克风说「今天天气怎么样」页面沉默两秒然后用语音回你一句「今天适合带伞」。这不是某个 App 的专属能力而是浏览器原生 API 就能做到的事。标题里的「带有 Web Speech API 的 简单AI聊天机器人演示_JavaScript_代码_下载」本质上是一个几乎不含后端依赖的前端 demoSpeechRecognition 负责把你说的声音变成文字SpeechSynthesis 负责把机器人的回答变成声音中间那道「回答逻辑」可以用最短的 JavaScript 规则函数实现也可以换成真的大模型 API。这个项目适合两类人一类是刚学完 JavaScript 基础、想找一个不太难但「有反馈感」的练手作品另一类是已经在做 Web 开发、想快速给官网或工具页加一个语音入口的工程师。它的常见形态就是一个 index.html 加一段 script能在 HBuilder、VS Code 或纯文本编辑器里打开保存。接下来的内容会从接口原理讲到完整代码再到本地运行和接入 AI 的三步改造保证你照着敲完还能顺手改出自己的版本。2. 认识 Web Speech API 两个核心接口SpeechRecognition 与 SpeechSynthesis2.1 语音识别 SpeechRecognition识别结果和事件怎么接Web Speech API 不是一个单独的 JS 对象它分为「识别」和「合成」两半对应两个构造器SpeechRecognition与SpeechSynthesis。先看识别。在 Chrome 里它带webkit前缀所以稳妥写法是const SpeechRecognition window.SpeechRecognition || window.webkitSpeechRecognition; const rec new SpeechRecognition(); rec.lang zh-CN; rec.continuous true; rec.interimResults true; rec.maxAlternatives 1;这里四个参数决定了体验的底层形态。lang是识别语言zh-CN对应普通话识别粤语可以用zh-HK但 demo 阶段建议锁zh-CN因为不同语言包在非 Chrome 浏览器上支持差异很大。continuous表示是否持续识别如果设成false每次说完一句话识别就自动停止适合「点按说话」的交互做免按键对话建议true但要配合后面讲的自动重启逻辑。interimResults控制是否回调临时结果设true时onresult事件会频繁触发你能拿到用户说到一半的字用于实时显示在字幕区域。maxAlternatives是候选文本数量1 就够多了反而让逻辑判断变复杂。事件方面只需要盯三个onresult取识别文本onerror处理权限和网络错误onend处理识别结束。最容易被新手忽略的是onendcontinuous: true不代表识别永不停止它在长时间无语音、浏览器切后台、或者内部异常时仍然会触发onend此时如果不重启实例页面会变成「聋子」。常见做法是在onend里判断是否被人为停止不是的话直接rec.start()重连let stopByUser true; rec.onresult (event) { let finalText ; for (let i event.resultIndex; i event.results.length; i) { if (event.results[i].isFinal) finalText event.results[i][0].transcript; } if (finalText) handleUserSay(finalText); }; rec.onerror (e) console.log(识别错误, e.error); rec.onend () { if (!stopByUser) rec.start(); }; function startListening() { stopByUser false; rec.start(); } function stopListening() { stopByUser true; rec.stop(); }这套模式是从 Cloud Speech-to-Text 那套长连接思路简化来的识别引擎不知道你什么时候说完所以由「静音超时」或错误中断来触发onend再由应用层决定要不要无缝重连。真机上如果出现「一连就断、断了又连」的抖动多半是麦克风权限弹窗打断了识别不是代码问题。2.2 语音合成 SpeechSynthesis让机器人开口说话识别听懂了接下来得「说」。语音合成就简单得多不需要前缀判断构造一个SpeechSynthesisUtterance实例再扔给speechSynthesis.speak()即可function speak(text) { window.speechSynthesis.cancel(); // 避免上一句话还没讲完两句声音叠在一起 const utter new SpeechSynthesisUtterance(text); utter.lang zh-CN; utter.rate 1.0; utter.pitch 1.0; utter.volume 1.0; window.speechSynthesis.speak(utter); }和识别不同合成有一个「音色库」的概念speechSynthesis.getVoices()返回当前系统可用的声音列表。Windows 上通常有 Microsoft Xiaoxiao、Microsoft Yunxi 这类中文神经语音macOS 上是 Tingting、Meijia 等ChromeOS 或 Android 的 TTS 引擎则由系统决定。可以这样选一个中文女声function pickChineseVoice() { const voices window.speechSynthesis.getVoices(); return voices.find(v v.lang.includes(zh) v.name.includes(Xiaoxiao)) || voices.find(v v.lang.startsWith(zh)); }一个坑是getVoices()在页面刚加载时可能返回空数组语音列表的加载是异步的需要监听voiceschanged事件再刷新或者干脆只在首次调用speak()的时候动态选择。Rate 建议 0.9~1.1超过 1.3 中文会明显「赶」Pitch 对中文女声的影响没有英文大保持默认 1 即可。2.3 为什么用浏览器原生 Web Speech API 而不是下载安装包标题里带了「代码下载」很多人会误以为要找一个SpeechRecognition.js或者speech-api.min.js之类的文件。实际上 Web Speech API 是浏览器内置能力也就是所谓「javascript api 下载」这个热搜词的答案不需要下载window.SpeechRecognition在支持的浏览器里天然存在。你下载的是自己写的业务代码不是 API 本身。选择一个原生方案而不是第三方语音 SDK核心考量是部署成本。如果只是做一个聊天机器人演示引入阿里云或讯飞的语音识别 SDK意味着要处理鉴权 token、WebSocket 长连接、音频流格式转换、以及一个必须由后端签发的临时密钥代码量直接翻三倍。而浏览器原生 API 把「麦克风采集 → 音频编码 → 网络传输 → 语音识别」这条链路全部封装在浏览器内核里前端只关心文本进出。代价是它的识别准确率上限受制于 Chrome 的语音服务且只能在有网络的 Chrome 系浏览器里稳定工作Firefox 对SpeechRecognition的支持落后Safari 仅部分支持。能力SpeechRecognition识别SpeechSynthesis合成主要浏览器Chrome / Edge 完整支持Chrome / Edge / Safari / Firefox 均支持需要网络一般需要依赖在线识别服务部分系统语音可离线中文支持较好zh-CN依赖系统安装的中文语音包文件大小0浏览器内置0浏览器内置所以如果你的使用场景是「局域网内离线使用」原生 API 的识别模块大概率不合格需要换离线引擎但作为演示、原型、个人工具它是最短路径。3. 用 JavaScript 写一个能对话的聊天机器人最小闭环代码3.1 单文件 index.html 结构一个演示项目不必拆成多人协作的工程结构单文件 HTML 反而更容易下载、双击打开和分享。下面是一个完整的实现骨架包含界面按钮、识别区域、回复区域以及前面说过的两个核心 API 的联动。!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title语音聊天机器人演示/title style body { font-family: system-ui; max-width: 720px; margin: 40px auto; padding: 0 16px; } #log, #interim { padding: 12px; border-radius: 8px; margin-top: 12px; } #log { background: #f3f4f6; min-height: 120px; white-space: pre-wrap; } #interim { color: #6b7280; font-style: italic; } button { padding: 8px 20px; font-size: 16px; } /style /head body h2语音 AI 聊天机器人/h2 button idstartBtn开始说话/button button idstopBtn停止/button div idinterim识别中的文字会显示在这里/div div idlog/div script // ---- 语音识别初始化 ---- const rec new (window.SpeechRecognition || window.webkitSpeechRecognition)(); rec.lang zh-CN; rec.continuous true; rec.interimResults true; const interimDiv document.getElementById(interim); const logDiv document.getElementById(log); rec.onresult (e) { let interim ; let final ; for (let i e.resultIndex; i e.results.length; i) { const item e.results[i][0].transcript; if (e.results[i].isFinal) final item; else interim item; } interimDiv.textContent interim ? 正在听 interim : ; if (final.trim()) { logDiv.textContent 你说 final \n; handleUserSay(final.trim()); } }; rec.onerror (e) console.log(识别错误, e.error); rec.onend () { if (window.keepListening) rec.start(); }; // ---- 回答逻辑先做关键词规则后面再替换成 AI 接口 ---- function getReply(text) { if (text.includes(你好)) return 你好呀我是用网页语音接口做的机器人。; if (text.includes(名字)) return 我叫小听耳朵的听。; if (text.includes(天气)) return 我暂时没接天气接口但你可以试试问我的名字。; if (text.includes(函数) || text.includes(javascript)) { return 你是在说 JavaScript 吧函数可以用 function 关键字声明也可以写箭头函数。; } return 这个问题我还没学会不过把这段代码里的 getReply 换成 AI 接口就能回答你了。; } function handleUserSay(text) { const reply getReply(text); logDiv.textContent 机器人 reply \n; speak(reply); } // ---- 语音合成 ---- function speak(text) { speechSynthesis.cancel(); const utter new SpeechSynthesisUtterance(text); utter.lang zh-CN; utter.rate 1.0; const voices speechSynthesis.getVoices(); const zh voices.find(v v.lang.startsWith(zh)); if (zh) utter.voice zh; speechSynthesis.speak(utter); } // ---- 按钮事件 ---- document.getElementById(startBtn).onclick () { window.keepListening true; rec.start(); logDiv.textContent 已开始监听\n; }; document.getElementById(stopBtn).onclick () { window.keepListening false; rec.stop(); }; /script /body /html把这段代码保存成index.html用 Chrome 打开点「开始说话」授权麦克风然后说「你好」。你会先看到interim区域出现「正在听你好」语音识别到断句后它把「你好」传给getReply机器人返回文本紧接着speak方法让浏览器开口回答。这就是一个完整的「语音输入 → 文本逻辑 → 语音输出」闭环。3.2 把识别结果交给回答逻辑关键词规则怎么设计getReply是整个 demo 里最值得扩展的地方。第一种写法是includes关键词匹配适合做演示因为你不需要网络请求打开页面就能跑。它的缺点是用户问「今天杭州下雨吗」会被「天气」命中却拿不到真正答案用户一旦问两次就会觉得假。更好的做法是用new URLSearchParams去拼一个官方天气 API但前端直接调这类接口会遇到 CORS 问题demo 里保留规则匹配就好。如果你想把演示做得更像「聊天机器人」可以把规则从单关键词改成意图数组让扩展更容易const rules [ { keys: [你好, 您好, 嗨], reply: 你好我是语音助手。 }, { keys: [会什么, 功能, 能做什么], reply: 我可以听懂你说的话并用语音回复。 }, { keys: [再见, 拜拜], reply: 再见期待下次聊天。 }, ]; function getReply(text) { for (const rule of rules) { if (rule.keys.some(k text.includes(k))) return rule.reply; } return 我还没理解这句话换个说法试试; }这种二维数组结构的好处是后续要接后端 AI 时可以直接在getReply外面包一层async先查本地规则本地没命中再去请求 AI 接口。常见做法是「规则兜底 AI 兜底」双层结构目的有两个一是节省 token二是当 AI 接口不稳定时用户至少能得到一个有意义的回应而不是页面白屏。3.3 合成回话中英文混说与音色选择speak函数里有个细节值得展开。speechSynthesis.getVoices()返回的数组在首次加载时可能为空直接find会返回undefined此时utter.voice不赋值浏览器会用默认语音中文文本一般也能读只是音色不可控。想让音色稳定可以监听voiceschanged事件并缓存let zhVoice null; function loadVoices() { const voices speechSynthesis.getVoices(); zhVoice voices.find(v v.lang.includes(zh) v.name.includes(Xiaoxiao)) || voices.find(v v.lang.startsWith(zh)) || null; } loadVoices(); speechSynthesis.onvoiceschanged loadVoices; function speak(text) { speechSynthesis.cancel(); const utter new SpeechSynthesisUtterance(text); utter.lang zh-CN; if (zhVoice) utter.voice zhVoice; speechSynthesis.speak(utter); }如果你发现机器人回话里有英文单词比如「JavaScript」而当前选中了一个纯中文语音包它读英文会很生硬。一个讨巧的做法是强制设置第二个 utterance把英文单词从文本里拆出来用英文语音包读中文部分用一个中文语音包读。但 demo 阶段不建议做这么复杂直接选一个能中英混读的神经语音例如 Windows 的 Xiaoxiao 在大多数版本里读英文已经足够自然。4. 在本地跑通演示代码HBuilder、HTTP 服务与常见报错4.1 file:// 打开不行为什么识别接口静默失败把 index.html 直接拖进 Chrome 标签页地址栏显示file:///C:/...这时候点「开始说话」你会发现什么反应都没有控制台可能只有一个not-allowed或干脆没有报错。原因是 SpeechRecognition 在 Chrome 里的实现依赖 Google 的远程识别服务而file://协议下该服务的可用性在不同系统上表现不一致macOS 上经常静默失败Windows 上报network错误的概率更高。所以本地调试的底线是别用file://。这不是代码问题是运行环境问题。你需要做的第一件事就是在本机启动一个 HTTP 服务让页面通过http://localhost:端口访问。麦克风权限和语音识别服务在 localhost 下被视为安全上下文也不需要额外配置 HTTPS 证书。4.2 用 python 和 HBuilder 启动本地服务有 Node.js 的话npx serve .是最省事的方案装了 Python 3 的话在项目目录打开终端直接跑cd your-project-dir python -m http.server 8080然后访问http://localhost:8080。8080可以改成任何未被占用的端口比如8000、3000。这个命令起了一个极简静态文件服务器作用只是把当前目录通过 HTTP 暴露出来不涉及后端逻辑。看到终端打印Serving HTTP on :: port 8080就说明好了。如果提示端口被占用换一个端口或者先查出占用进程不要硬跑。更贴近前端日常的是用 HBuilder 跑。这款 IDE 的热搜关键词是「hbuilder配置html、css、javascript」其实它的核心操作特别简单新建项目时选「基本 HTML 项目」把上面的代码粘贴到index.html然后右键项目名选「运行」→「运行到浏览器」→ Chrome。HBuilder 会自动开一个带域名的本地服务地址页面就能被正常识别。有一点要提醒HBuilder 内置预览窗口可能不是 Chrome 内核语音识别对内核敏感务必选择外部 Chrome 打开。4.3 常见报错对照与参数调整报错信息原因处理方式not-allowed用户拒绝了麦克风权限或浏览器已禁止该站点使用麦克风点击地址栏左侧的站点权限图标把麦克风从「询问」改为「允许」然后刷新页面no-speech识别服务启动后没有检测到语音确认麦克风不是静音状态离麦克风近一点检查是不是有另一个程序占用了麦克风network识别请求无法到达语音服务先确认能访问外网排除公司代理拦截检查是否用了file://打开aborted调用了stop()或页面触发停止这是正常事件配合keepListening判断是否需要重新start()audio-capture找不到可用的录音设备确认系统麦克风驱动正常笔记本需要检查物理开关no-speech还有一个容易踩的坑continuous: true时如果用户长时间不说话Chrome 会先触发no-speech错误再触发onend。你需要在onerror里判断e.error no-speech时也自动重启识别否则这个 demo 在安静环境下用两分钟就「死」了。具体做法是把onend里的重启逻辑复制到onerror里加一个setTimeout延迟 200 毫秒再start()避免和onend回调抢时间。5. 把它从演示变产品接入 AI 接口的 3 个进阶技巧5.1 用 fetch 把识别文本送给后端 AI 接口规则匹配的机器人只能撑住演示真正要叫「AI 聊天机器人」通常是把getReply换成一次fetch请求。注意这里说的接入方式是「前端 fetch 后端接口」不是在前端代码里直接写大模型 API Key。把 Key 放在前端意味着任何人打开开发者工具就能拿走你的密钥并刷爆额度常见做法是自建一个极薄的后端转发层。async function getReply(text) { const resp await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ message: text }) }); const data await resp.json(); return data.reply; }/api/chat指向你自己的后端这个后端把message拼进 prompt调用大模型接口再把返回文本发给浏览器。改造后的handleUserSay也要改成异步先显示「正在思考…」拿到 reply 后再渲染和朗读。一个容易被忽略的体验点请求 AI 接口的耗时通常超过一秒这段时间用户的麦克风还在监听用户可能会对着机器人喊「喂」识别结果又触发第二次请求。处理方式是说话时暂停识别、拿到回复并播报完后再恢复监听这比cancel()强制打断更自然。5.2 三个立竿见影的口语化小改动第一个改动是给speak加上朗读状态回调。utter.onstart和utter.onend可以用来控制「说话中」标志这个标志决定onresult接收到新文本时要不要忽略。原理很简单机器人说话时用户如果插嘴那句插话会先被识别引擎听到触发新的请求造成「机器人和自己吵架」。在utter.onstart里停止识别在utter.onend里恢复能直接消除一半的体验问题。第二个改动是清理 UI 上的internal逻辑。把临时识别结果从interimDiv拿出来单独渲染并在getReply返回空字符串时不要调用speak避免空音频打断当前合成。很多 demo 卡在「偶尔不回复」上最后定位到的是speechSynthesis.speak收到了换行符或空字符串加一句if (!text.trim()) return;能省掉大量排查时间。第三个改动对想继续深挖的人最有价值把getReply的规则表和 AI 返回结果串成一个 prompt。也就是让规则表不直接返回 final 答案而是返回一个系统提示词引导 AI 用口语化风格回答。这样即使 AI 接口偶尔抽风getReply的兜底依然生效项目的鲁棒性从「纯 AI」变成「规则 AI 双保险」。做完这三步这个 Web Speech API 演示就不只是单机玩具而是一个有完整交互节奏的语音 Agent 雏形。本文还有配套的精品资源点击获取