html5如何实现语音识别_ web speech api调用步骤【教程】

SpeechRecognition 在生产环境基本不可用，因 Chrome 已废弃、Firefox 不支持、Safari 未实现，且需 HTTPS+用户交互+麦克风活动；推荐用 MediaRecorder 录音上传至后端 ASR 服务。

Web Speech API 的 SpeechRecognition 接口在绝大多数现代浏览器中**已废弃或默认禁用**，Chrome 自 2025 年起移除了非安全上下文（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 服务处理。音频上传本身开销极小，延迟可控，且准确率、语种、领域适配能力远超浏览器内置引擎。