SpeechRecognition 在生产环境基本不可用，因 Chrome 已废弃、Firefox 不支持、Safari 未实现，且需 HTTPS+用户交互+麦克风活动；推荐用 MediaRecorder 录音上传至后端 ASR 服务。
Web Speech API 的 SpeechRecognition 接口在绝大多数现代浏览器中**已废弃或默认禁用**，Chrome 自 2023 年起移除了非安全上下文（http://）的支持，且从 Chrome 119 开始，即使在 https:// 下也要求用户显式授权+交互触发，实际落地困难远超教程所写。
为什么 SpeechRecognition 在生产环境基本不可用
不是代码写错，而是浏览器策略收紧：
- Chrome 已将
SpeechRecognition标记为Deprecated，控制台会输出警告； - Firefox 完全不支持该接口（无
window.SpeechRecognition）； - Safari 从未实现 Web Speech API 的语音识别部分；
- 即使在 HTTPS + 用户点击后调用，Chrome 仍可能因“未检测到有效麦克风活动”而静默失败，且无明确错误码反馈。
替代方案：用 MediaRecorder + 后端 ASR 更可靠
绕过浏览器限制的主流做法是采集音频流，上传至 ASR 服务（如 Whisper、Azure Speech、阿里云智能语音），由后端转写。关键步骤如下：
- 用
navigator.mediaDevices.getUserMedia({ audio: true })获取音频流； - 用
MediaRecorder录制为webm或ogg； - 停止录制后，将
Blob转为ArrayBuffer或直接FormData提交； - 后端接收后调用 ASR 接口，返回文本结果。
const mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' });
let audioChunks = [];
mediaRecorder.ondataavailable = e => audioChunks.push(e.data);
mediaRecorder.onstop = () => {
const blob = new Blob(audioChunks, { type: 'audio/webm' });
const formData = new FormData();
formData.append('audio', blob, 'recording.webm');
fetch('/api/transcribe', { method: 'POST', body: formData });
};
如果坚持试用 Web Speech API，必须满足这三点
仅限开发调试，且仅在最新 Chrome + HTTPS + 手动交互下可能短暂生效：
立即学习“前端免费学习笔记（深入）”；
- 页面必须通过
https://访问（localhost也被视为安全上下文）； - 调用
recognition.start()必须由用户真实点击事件触发（不能在setTimeout或load回调中自动启动）； - 需监听
onend并在每次结束时手动调用start()，否则识别只执行一次。
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();
recognition.continuous = true;
recognition.interimResults = true;
document.getElementById('start-btn').onclick = () => {
recognition.start(); // 必须在此处调用
};
recognition.onresult = (event) => {
const transcript = Array.from(event.results)
.map(result => result[0].transcript)
.join('');
console.log(transcript);
};
真正上线的语音输入功能，几乎都放弃了纯前端识别路径——浏览器能力碎片化太严重，权限策略又不断加码，与其反复适配，不如把音频交给专业 ASR 服务处理。音频上传本身开销极小，延迟可控，且准确率、语种、领域适配能力远超浏览器内置引擎。
