如何用Javascript实现语音识别？

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() 会触发浏览器权限弹窗，但不能提前预判是否被拒绝：

标签： javascript java html android js 浏览器 edge 云服务 safari 后端 阿里云 w