JavaScript Speech Recognition的recognition.onerror()频繁报网络错误如何解决？

麦克风收音不停止问题修复 #

该问题核心是识别器状态配置错误，以及缺少主动终止逻辑，修复方案如下：

• 调整核心配置属性：将continuous设为false，interimResults设为false，该配置下识别器检测到用户静默后会自动终止收音，适合单轮问答场景。
• 主动触发停止逻辑：在onresult事件拿到最终识别结果后，立刻调用recognition.stop()强制终止收音，不依赖浏览器自带的静默检测逻辑。
• 增加超时兜底：设置最长识别时间，超时后自动停止识别，避免麦克风长期占用。

示例配置代码：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
// 核心配置
recognition.continuous = false;
recognition.interimResults = false;
recognition.lang = 'zh-CN';

// 超时兜底逻辑
let timeoutTimer = null;
recognition.onstart = () => {
  timeoutTimer = setTimeout(() => recognition.stop(), 5000);
};

recognition.onresult = (e) => {
  clearTimeout(timeoutTimer);
  // 拿到结果后主动停止
  recognition.stop();
  const answerText = e.results[0][0].transcript;
  // 后续处理作答逻辑
};

误报网络错误问题修复 #

该问题多数是环境限制或识别器状态冲突导致，修复方案如下：

• 检查部署环境协议：Speech Recognition API仅支持HTTPS协议和localhost本地开发环境，HTTP协议下的生产环境会被浏览器直接拦截，抛出网络错误。
• 避免状态冲突：上一轮识别未完全结束（未触发onend事件）时直接调用start()启动下一轮，会导致内部状态混乱抛出异常，所有下一轮识别的启动逻辑都要放在onend回调中执行。
• 增加内核状态缓冲：每次启动识别前增加300ms的延迟，避免浏览器内核的语音服务状态未完全重置。

示例兼容代码：

let needNextQuestion = false;
// 多轮调用安全逻辑
recognition.onend = () => {
  if (needNextQuestion) {
    // 加延迟避免状态冲突
    setTimeout(() => recognition.start(), 300);
    needNextQuestion = false;
  }
};

recognition.onerror = (e) => {
  console.log('错误类型：', e.error);
  if (e.error === 'network') {
    const isLegalEnv = window.location.protocol === 'https:' || window.location.hostname === 'localhost';
    if (!isLegalEnv) {
      console.log('请切换到HTTPS环境后使用语音识别功能');
    }
  }
};

内容的提问来源于stack exchange，提问作者Pankaj Jaiswal