Web SpeechRecognition API移动设备连续监听问题的优化方案咨询

针对移动端不支持continuous模式导致的麦克风频繁开关、重启延迟问题，可以通过提前检测语音活动+主动重启识别的方式规避，不用依赖onend事件的滞后触发：

核心思路 #

放弃使用continuous=true（移动端普遍不兼容），改用默认的会话式识别，通过监听临时识别结果（interimResults）判断用户是否处于静音状态，在静音达到阈值时主动重启识别，避免系统自动关闭麦克风后再触发重启。

实现代码 #

// 兼容webkit内核浏览器（多数移动端浏览器）
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

recognition.lang = 'en-US';
recognition.interimResults = true; // 开启临时结果，用于实时检测语音
recognition.maxAlternatives = 1;

let silenceTimer = null;
const SILENCE_THRESHOLD = 2000; // 2秒无语音输入后重启识别

// 处理识别结果，同时检测静音
recognition.onresult = (event) => {
  // 有语音输入就重置静音计时器
  clearTimeout(silenceTimer);

  // 拼接识别结果（包含临时结果）
  let transcript = '';
  for (let i = event.resultIndex; i < event.results.length; i++) {
    transcript += event.results[i][0].transcript;
  }
  // 这里可以把transcript渲染到界面上
  console.log('当前识别内容:', transcript);

  // 启动静音计时器，无输入时主动重启
  silenceTimer = setTimeout(() => {
    if (recognition.state !== 'starting') {
      recognition.stop();
      recognition.start();
    }
  }, SILENCE_THRESHOLD);
};

// 兜底：如果识别意外结束，仍触发重启
recognition.onend = () => {
  setTimeout(() => recognition.start(), 100);
};

// 注意：必须通过用户交互触发start（比如按钮点击），否则移动端浏览器会阻止麦克风权限
document.querySelector('#start-btn').addEventListener('click', () => {
  recognition.start();
});

关键细节 #

• interimResults的作用：开启后会实时返回未最终确认的识别结果，能让我们及时感知用户是否在说话，避免等系统判定结束后才重启。
• 静音阈值调整：根据实际场景修改SILENCE_THRESHOLD，比如语速慢的场景可以设为3000毫秒，平衡识别完整性和重启及时性。
• 用户交互触发：移动端浏览器严格限制麦克风权限，必须通过用户主动点击等交互操作调用recognition.start()，否则会报错。

内容的提问来源于stack exchange，提问作者Semion Vino