Web Speech API 可在浏览器中实现语音识别,通过创建 SpeechRecognition 实例并配置语言、连续识别等参数,结合 onresult 等事件获取语音转文本结果,示例代码展示了在 Chrome 浏览器中点击按钮开始录音、实时显示识别内容的功能,需注意该 API 仅支持 HTTPS 或 localhost,且主要在桌面版 Chrome 中可用,其他浏览器兼容性有限,使用时需处理错误和权限授权,并为不支持的用户提供降级提示。

HTML5 本身不直接提供语音识别功能,但可以通过 Web Speech API 实现语音识别。该 API 提供了浏览器端的语音识别和语音合成功能,其中 SpeechRecognition 接口用于将用户的语音转换为文本。
启用 Web Speech API 进行语音识别
目前,Web Speech API 的语音识别接口在部分浏览器中需要通过前缀调用,且主要在 Chrome 浏览器中支持较好(如 Chrome 25+)。以下是实现步骤:
- 创建
SpeechRecognition或webkitSpeechRecognition实例 - 配置识别参数,如是否连续识别、语言类型等
- 绑定事件回调:识别结果、错误处理、结束状态等
- 启动识别并获取用户语音转文本的结果
基础 HTML 和 JavaScript 示例代码
以下是一个完整的简单示例,点击按钮开始语音识别,识别结果实时显示在页面上:
立即学习“前端免费学习笔记(深入)”;
语音识别测试 语音识别(Web Speech API)
识别结果将显示在这里...
关键配置说明
以下是常用属性和事件的说明,帮助你更好地控制识别行为:
- lang:设置识别语言,如 'zh-CN'(中文)、'en-US'(英文)
- continuous:是否持续识别多段语音,默认 false
- interimResults:是否返回临时中间结果,设为 true 可实现“边说边出字”
- onresult:每次识别到语音时触发,包含最终和中间结果
- onerror:识别发生错误时调用
- onend:识别结束时触发,可在此重新启动或提示用户
注意事项与兼容性
Web Speech API 目前存在一些限制:
- 仅在 HTTPS 环境或 localhost 下可用(出于安全考虑)
- Chrome 支持较好,Firefox、Safari、Edge 支持有限或需手动开启
- 移动端支持较弱,部分 Android 浏览器可能调用系统输入法代替
- 用户首次使用需授权麦克风权限
基本上就这些。只要浏览器支持,Web Speech API 能快速实现语音转文字功能,适合做语音搜索、语音输入等轻量级应用。注意做好降级处理,提示不支持的用户更换浏览器或使用其他输入方式。











