Mac端Safari 15.0中SpeechRecognition的onspeechstart/onspeechend监听器不生效怎么办

问题结论 #

Mac Safari 15.0版本的webkitSpeechRecognition对onspeechstart、onspeechend事件存在原生实现缺陷，不需要额外的系统级设置，按以下方案做兼容性适配即可解决：

适配方案 #

1. 修复代码基础笔误 #

你提供的示例代码存在变量命名错误，会直接导致实例化失败，首先修正基础写法：

// 原错误写法：变量名重复，实例化逻辑有误
// const SpeechRecognitionrecognition = (window as any).webkitSpeechRecognition;
// speechRecognizer = new SpeechRecognitionrecognition();

// 修正后的基础写法
const SpeechRecognitionConstructor = (window as any).webkitSpeechRecognition;
const speechRecognizer = new SpeechRecognitionConstructor();

2. 事件绑定兼容处理 #

Safari 15 未正确实现speechstart、speechend事件，用兼容性更好的audiostart、audioend事件作为替代，同时用addEventListener方式绑定事件（比直接赋值onxxx属性兼容性更高）：

// 业务逻辑函数
const handleSpeechStart = () => {
  // 用户开始说话时的处理逻辑
};
const handleSpeechEnd = () => {
  // 语音结束时的处理逻辑
};

// 同时绑定两类事件，高版本浏览器走标准事件，低版本Safari走兼容事件
speechRecognizer.addEventListener('speechstart', handleSpeechStart);
speechRecognizer.addEventListener('audiostart', handleSpeechStart);
speechRecognizer.addEventListener('speechend', handleSpeechEnd);
speechRecognizer.addEventListener('audioend', handleSpeechEnd);

3. 新增Safari专属配置项 #

必须在启动识别前添加以下配置，否则Safari下事件和识别结果都会静默失效：

// 必须显式开启连续识别和临时结果返回
speechRecognizer.continuous = true;
speechRecognizer.interimResults = true;
// 建议显式指定识别语言，减少识别异常
speechRecognizer.lang = 'zh-CN';

4. 调用时机要求 #

Safari 对语音识别权限做了严格限制，必须在用户主动触发的交互事件（如click、tap）回调中完成识别初始化和start()调用，非用户触发的调用会被直接拦截，不会触发任何事件。
此外页面必须运行在HTTPS环境下（localhost本地开发除外），HTTP环境下Safari会直接禁用SpeechRecognition API。

5. 全平台兜底方案 #

如果上述方案仍无法满足需求，可通过监听onresult事件间接判断语音状态：首次返回临时识别结果时判定为说话开始，连续300~500ms没有新的识别结果返回时判定为说话结束，该方案不受浏览器版本限制，全平台通用。

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