Web Speech API在Android Chrome及旧版Safari无法触发onresult事件的解决方法

针对你遇到的onresult事件未触发的问题，可从以下几个关键方向排查修复：

1. 确保识别启动触发在用户交互事件内 #

移动端浏览器（包括Android Chrome、旧版Safari）严格限制Web Speech API的调用必须由用户主动交互（如点击、触摸手势）触发，禁止在页面加载、定时器或非用户触发的回调中启动识别。

你需要添加触发按钮，在用户点击时启动识别：

// 假设页面中有id为start-recognition的按钮
document.getElementById('start-recognition').addEventListener('click', () => {
  recognition.value.start();
});

2. 调整continuous与interimResults参数 #

旧版移动端浏览器对这两个参数的支持存在兼容性问题：

• iPhone 10对应的Safari版本（通常为iOS 14及更早）对continuous=true的支持不完善，可先将其设为false测试：

  recognition.value.continuous = false;
  recognition.value.interimResults = false;
  

• 如果需要连续识别，可在onend事件中手动重启识别（适配Android Chrome旧版本）：

  let isListening = true; // 控制是否继续识别的标记
  recognition.value.onend = () => {
    if (isListening) {
      recognition.value.start();
    }
  };
  

3. 添加错误与状态监听排查问题 #

未触发onresult往往伴随错误或异常状态，添加以下监听可定位具体原因：

recognition.value.onerror = (event) => {
  console.error('语音识别错误:', event.error);
  // 常见错误：not-allowed（权限被拒）、service-not-allowed（地区/服务未开放）
};

recognition.value.onend = (event) => {
  console.log('识别会话结束:', event);
};

recognition.value.onsoundend = () => {
  console.log('检测到输入声音结束');
};

4. 检查设备与浏览器限制 #

• iPhone 10 Safari：系统版本较旧，需确认设备是否开启了系统级语音输入功能（如键盘的语音输入按钮），若系统语音服务不可用，Web Speech API也无法工作。
• Android Chrome：确保Chrome已更新至较新版本，同时检查设备的语音输入设置是否正常（比如默认语音引擎是否可用）。

5. 前缀兼容性细节处理 #

部分旧版浏览器仅支持webkit前缀的API，可调整初始化代码为：

const sr = window.webkitSpeechRecognition || window.SpeechRecognition;
if (!sr) {
  console.error('当前浏览器不支持Web Speech API');
  // 可添加降级提示逻辑
}

内容的提问来源于stack exchange，提问作者Dương Hoàng Văn