JavaScript语音识别主要依靠Web Speech API的SpeechRecognition接口，需检测兼容性、处理权限与事件，适合网页实时转文字；不支持Safari，复杂需求需接入云服务或WebAssembly模型。
JavaScript 实现语音识别主要依靠浏览器原生的 Web Speech API，特别是其中的 SpeechRecognition 接口（目前为 Chrome、Edge 等基于 Chromium 的浏览器支持较好，Firefox 有部分支持但需手动启用，Safari 尚未支持）。它无需后端、不依赖第三方 SDK，适合网页端实时语音转文字场景。
检查浏览器兼容性并初始化识别器
不是所有浏览器都支持，使用前必须检测并优雅降级：
- 用
window.SpeechRecognition || window.webkitSpeechRecognition判断是否可用 - 若不可用，提示用户换浏览器或改用其他输入方式
- 创建实例时建议用
new (window.SpeechRecognition || window.webkitSpeechRecognition)() - 设置关键属性：如
recognition.continuous = false（单次识别），recognition.interimResults = true（返回中间结果）
监听识别事件并处理文本结果
语音识别是异步事件驱动的，核心事件有：
-
onstart：麦克风开启，可更新 UI 状态（如显示“正在听…”） -
onresult：收到识别结果，event.results是SpeechRecognitionResultList，每项含多个SpeechRecognitionAlternative -
onend：识别结束（可能因超时、出错或用户停止），可在此自动重启识别（设continuous = true时需手动调用recognition.start()） -
.onerror：捕获错误（如no-speech、aborted、not-allowed），尤其注意权限被拒时要引导用户授权
示例提取最终文本：const transcript = event.results[0][0].transcript;const isFinal = event.results[0].isFinal;
请求麦克风权限与用户交互设计
首次调用 recognition.start() 会触发浏览器权限弹窗，但不能提前预判是否被拒绝：
立即学习“Java免费学习笔记（深入）”；
- 避免自动启动识别，应由用户显式点击按钮触发（符合 Chrome 的 autoplay 和权限策略）
- 按钮文案建议明确，如“点击说话”，并实时反馈状态（禁用中 / 正在听 / 识别中 / 完成）
- 权限被拒后，
onerror中的event.error === 'not-allowed'可用于提示用户去地址栏手动开启麦克风 - 移动端需注意：部分 Android 浏览器要求 HTTPS，且某些 WebView 完全不支持
基础可用代码片段（可直接测试）
复制到 HTML 文件中，在 Chrome 中打开即可运行：
基本上就这些。不复杂但容易忽略权限、兼容性和用户体验细节。如需更稳定或支持离线/多语言/自定义词表，就得接入 WebAssembly 模型（如 Vosk）或调用云服务（阿里云智能语音、百度语音等），那就超出纯 JS 范畴了。
