SpeechRecognition 通过 JavaScript 调用 Web Speech API 实现，需兼容性检测并用用户手势启动；interimresults 和 continuous 决定识别模式；lang 必须设为 'zh-CN' 且在 start() 前配置。
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 却期望长语音自动分段识别。
使用建议：
-
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，低置信度常伴随乱码或英文词
onerror 触发但没具体信息？
Web Speech API 的错误事件非常简陋，event.error 只返回字符串标识符（如 'no-speech'、'aborted'、'not-allowed'），没有堆栈或上下文。
容易踩的坑：
-
'not-allowed'：最常见，表示权限被拒或未在安全上下文（即非https://或localhost）下调用start() -
'no-speech'：用户没说话，或环境噪音太大，引擎判定无效输入 -
'aborted'：代码调用了stop()或abort()，也可能是页面失焦导致自动中断 - 没有网络错误码，也不报语法错误——所有 JS 错误（比如访问
event.results[0][0]但结果为空）得靠 try/catch 自己捕获
真实项目里，onend 比 onerror 更值得监听：它会在识别自然结束、出错、被 stop/abort 后都触发，是统一收口状态管理的位置。
