JavaScript语音识别依赖Web Speech API的SpeechRecognition接口，仅Chrome/Edge等Blink内核浏览器支持，需HTTPS环境、用户手势触发，可实现本地实时语音转文字，但存在兼容性、精度和移动端限制。
JavaScript 实现语音识别主要依靠浏览器原生支持的 Web Speech API，其中核心接口是 SpeechRecognition（部分浏览器仍需前缀，如 webkitSpeechRecognition）。它无需后端服务即可在兼容浏览器中完成实时语音转文字，但目前仅在 Chrome、Edge（基于 Chromium）等 Blink 内核浏览器中稳定可用，Firefox 和 Safari 尚未支持语音识别功能。
语音识别基本实现步骤
要让网页“听懂”用户说话，关键在于创建并配置识别实例、监听事件、启动识别：
- 检测浏览器是否支持：
typeof window.SpeechRecognition !== 'undefined' || typeof window.webkitSpeechRecognition !== 'undefined' - 获取识别构造函数（优先用标准名，降级到 webkit 前缀）
- 创建实例后设置属性：如
recognition.continuous = false（单次识别）、recognition.interimResults = true（返回中间结果） - 监听关键事件：
onresult（获取识别文本）、onstart（开始收音）、onend（自动停止后触发，可在此处重新 start 实现连续识别） - 调用
recognition.start()启动，需用户手势（如点击按钮）触发，不能自动启动
Web Speech API 的两大核心功能模块
Web Speech API 实际包含两个独立但常配合使用的接口：
-
SpeechRecognition：负责语音识别（speech-to-text），将麦克风输入实时转为文本。支持语言设定（
recognition.lang = 'zh-CN'）、结果置信度（event.results[i][0].confidence）、以及是否返回中间结果 -
SpeechSynthesis：负责语音合成（text-to-speech），把文字“读出来”。通过
window.speechSynthesis调用，可选择发音引擎（voice）、调节语速（rate）、音高（pitch）、音量（volume）等
二者互不依赖，可单独使用。例如：只用 SpeechSynthesis 做朗读提示；或只用 SpeechRecognition 做语音指令控制。
立即学习“Java免费学习笔记（深入）”；
常见限制与注意事项
Web Speech API 虽方便，但有明确的运行约束和兼容性现实：
- 必须在 HTTPS 或 localhost 环境下运行，HTTP 页面会被浏览器直接禁用麦克风权限
- 首次使用会弹出浏览器权限请求，用户拒绝后需手动在地址栏点击锁形图标开启
- Chrome 对长时间识别有限制（约数秒无语音会自动结束），需监听
onend并主动调用start()维持（注意避免无限循环） - 中文识别效果尚可，但对口音、背景噪音、专业术语敏感，准确率不如云端 ASR 服务（如百度语音、阿里云智能语音）
- 移动端支持较弱，iOS Safari 完全不支持 SpeechRecognition，Android Chrome 支持但体验不稳定
一个最小可用示例（含错误处理）
以下代码片段可直接嵌入 HTML 测试（记得加按钮触发）：
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
if (!SpeechRecognition) {
console.error('当前浏览器不支持语音识别');
} else {
const recognition = new SpeechRecognition();
recognition.lang = 'zh-CN';
recognition.interimResults = true;
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log('识别结果：', transcript);
};
recognition.onerror = (event) => {
console.warn('识别出错：', event.error);
};
recognition.onend = () => {
console.log('识别已结束');
// 如需连续识别，此处可加 recognition.start();
};
// 用户点击后启动
document.getElementById('start-btn').onclick = () => recognition.start();
}
基本上就这些。Web Speech API 提供了轻量、免部署的语音交互入口，适合做演示、教育工具或简单语音指令场景。真要上生产、求稳定、要多语言/高精度，还是得对接专业语音云服务。但作为前端原生能力，它确实让“开口即用”变得更近了一步。
