HTML怎么做语音识别_html Web Speech语音识别API【经验分享】-html教程-PHP中文网

SpeechRecognition 通过 JavaScript 调用 Web Speech API 实现，需兼容性检测并用用户手势启动；interimresults 和 continuous 决定识别模式；lang 必须设为 'zh-CN' 且在 start() 前配置。

html怎么做语音识别_html web speech语音识别api【经验分享】

SpeechRecognition 在现代浏览器中是可行的，但必须明确：它不是“HTML 做语音识别”，而是通过 JavaScript 调用 Web Speech API 实现；HTML 本身不提供语音识别能力，只负责承载触发按钮、显示区域等 UI 元素。

怎么创建并启动 `SpeechRecognition` 实例

核心是获取兼容性实例，不能直接写 new SpeechRecognition()，因为 Chrome/Edge 用 webkitSpeechRecognition，Firefox 等可能不支持或行为不同。

实操建议：

先做特性检测：'speechRecognition' in window || 'webkitSpeechRecognition' in window
取构造函数：const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
必须在用户手势（如 click）后调用 start()，否则 Chrome 会静默失败（无报错，但不弹权限框）
首次调用 start() 时浏览器才会请求麦克风权限；拒绝后再次调用不会重试，需引导用户手动开启

`interimresults` 和 `continuous` 参数怎么选

这两个布尔值决定识别行为，直接影响用户体验和结果结构。

常见错误现象：开了 interimresults = true 却只读 event.results[0][0].transcript，漏掉后续临时结果；或设了 continuous = false 却期望长语音自动分段识别。

使用建议：

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

interimresults = true：适合需要实时反馈的场景（如语音输入框），每次音频片段都会触发 onresult，event.results 是一个类数组，最新结果在末尾，要用 event.results[event.results.length - 1] 取最新项
continuous = true：识别完一句不会自动停，继续监听，适合会议记录、语音笔记；但需注意内存占用和用户预期——它不会“自动切句”，只是持续收音，断句仍由引擎决定
两者都为 false（默认）：说一句、识别一句、自动停止，适合命令式交互（如“打开设置”）

为什么 `onresult` 拿不到中文？

根本原因不是 API 问题，而是 lang 配置没生效或浏览器不支持该语言模型。

关键点：

lang 必须在 start() 前设置，且格式严格，中文必须用 'zh-CN'（大小写敏感，不能写 zh-cn 或 zh）
Chrome 当前仅支持部分语言的本地识别模型；zh-CN 支持，但若系统语言非中文、或 Chrome 版本较旧（
Firefox 对 lang 支持有限，实际常忽略该参数，优先用系统语言；Safari 完全不支持 SpeechRecognition
调试技巧：打印 event.results[0].isFinal 和 event.results[0][0].confidence，低置信度常伴随乱码或英文词