JavaScript可通过Web Speech API的SpeechRecognition接口实现前端语音转文本,主要支持Chrome和Edge,需HTTPS环境及用户授权麦克风权限;不支持时可降级为后端ASR服务。

JavaScript 本身不直接提供语音识别能力,但可以通过浏览器内置的 Web Speech API(特别是 SpeechRecognition 接口)实现语音转文本功能。目前该 API 主要在 Chrome 和 Edge(基于 Chromium)中稳定支持,Firefox、Safari 尚未全面支持或仅提供实验性支持。
使用 Web Speech API 实现语音识别
这是当前最主流、无需后端即可在前端完成语音转文本的方式。需注意:必须在 HTTPS 环境下运行(本地 localhost 也允许),且用户需主动授权麦克风权限。
- 创建识别实例:
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)(); - 设置关键选项:
recognition.continuous = false;(单次识别),recognition.lang = 'zh-CN';(中文识别) - 监听结果事件:
recognition.onresult = (event) => { const text = event.results[0][0].transcript; console.log(text); }; - 启动识别:
recognition.start();(会触发用户授权弹窗)
处理兼容性与降级方案
由于 SpeechRecognition 并非所有浏览器都支持,实际项目中需做检测和提示:
- 判断是否可用:
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) - 对不支持的浏览器(如 Safari),可显示提示:“当前浏览器暂不支持语音识别,请使用 Chrome 或 Edge”
- 若需全平台支持,可考虑将音频通过
MediaRecorder录制后上传至后端语音识别服务(如阿里云 ASR、腾讯云语音识别、Whisper API)
常见问题与注意事项
实际使用中容易遇到几个典型问题:
立即学习“Java免费学习笔记(深入)”;
-
自动停止:默认识别到静音约 5 秒后自动结束。可通过
recognition.interimResults = true;启用实时中间结果,并在onresult中区分event.results[i].isFinal -
中文识别不准:确保设
recognition.lang = 'zh-CN';避免背景噪音;语速适中、吐字清晰效果更佳 - 隐私提示:浏览器会在麦克风启用时显示图标,页面应明确告知用户“正在使用麦克风进行语音输入”
-
移动端限制:部分 Android Chrome 版本可能要求用户长按说话按钮(需配合 UI 控制
start()/stop())
简单可用的代码示例
以下是一个最小可运行片段(保存为 HTML,在 Chrome 中打开即可测试):










