如何用javascript实现语音识别功能_web speech api的兼容性如何_技术教程

SpeechRecognition 在主流浏览器中基本不可用，仅 Chrome 稳定支持且限 HTTPS；Firefox、Safari、Edge 均未实现，W3C 规范仍为草案；应通过实例化并监听事件检测可用性，而非仅判断构造函数存在。

Web Speech API 的 `SpeechRecognition` 在主流浏览器中基本不可用

Chrome 是目前唯一稳定支持 SpeechRecognition（即语音识别）的桌面浏览器，且仅限 HTTPS 环境；Firefox、Safari、Edge（Chromium 之外）均未实现该接口，调用 webkitSpeechRecognition 会直接报 ReferenceError 或返回 undefined。这不是配置或权限问题，而是标准未被采纳——W3C 规范仍处于「Working Draft」阶段，厂商支持意愿极低。

检测 `SpeechRecognition` 是否可用的正确方式

不能只靠 typeof window.SpeechRecognition !== 'undefined'，因为 Chrome 以外的浏览器可能暴露构造函数但无法实例化。必须尝试创建并监听事件是否触发：

function isSpeechRecognitionAvailable() {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) return false;

  try {
    const rec = new SpeechRecognition();
    // Chrome 会立即触发 onstart（即使未调用 start()），其他浏览器通常抛错或静默失败
    let started = false;
    rec.onstart = () => { started = true; };
    rec.onerror = () => { started = false; };
    rec.start(); // 触发权限请求和初始化
    setTimeout(() => {
      rec.stop();
      return started;
    }, 500);
  } catch (e) {
    return false;
  }
}

实际项目中建议直接用特征检测 + 降级提示，例如：

检测失败时显示「语音输入仅支持 Chrome 浏览器」
避免在非 Chrome 环境中调用 rec.start()，否则可能引发未捕获异常
移动端 iOS Safari 完全不支持，Android Chrome 支持但需手动开启麦克风权限

替代方案：用 WebRTC + 第三方 ASR 服务绕过浏览器限制

真正跨浏览器可用的语音识别，得放弃 SpeechRecognition，改用 MediaRecorder 录制音频流，再上传至 ASR 服务（如 Whisper.cpp、Azure Speech、AWS Transcribe）：

MediaRecorder 兼容性好（Chrome/Firefox/Safari/Edge 均支持）
录制后转成 Blob 或 ArrayBuffer，通过 fetch 发送到你自己的 ASR 中转接口
避免前端直连第三方 API 密钥泄露风险
延迟比原生 API 高 1–2 秒，但准确率和语言支持远超 SpeechRecognition

关键代码片段（仅录音部分）：

async function startRecording() {
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const mediaRecorder = new MediaRecorder(stream);
  const chunks = [];

  mediaRecorder.ondataavailable = e => chunks.push(e.data);
  mediaRecorder.onstop = async () => {
    const blob = new Blob(chunks, { type: 'audio/webm' });
    // 后续上传 blob 到你的 ASR 接口
  };

  mediaRecorder.start();
  return { stop: () => mediaRecorder.stop(), stream };
}

Chrome 下使用 `SpeechRecognition` 的几个硬坑

即便在 Chrome 中，也容易因细节翻车：

必须是 HTTPS 页面（localhost 除外），HTTP 页面会静默禁用
interimResults: true 时，result[0][0].transcript 可能频繁重写，需用 event.results[i][0].isFinal 判断是否最终结果
连续识别需手动调用 rec.start()，但 Chrome 会在识别结束约 5 秒后自动停止，需监听 onend 并重新 start()
lang 参数必须严格匹配 BCP 47 标签（如 'zh-CN'，不是 'zh' 或 'Chinese'），否则 fallback 到英文
移动端 Chrome 会强制弹出系统麦克风权限框，且无法预授权；用户拒绝后，后续调用 start() 会直接触发 onerror 且 error.code === 'not-allowed'