Android Chrome中启动Web Speech Recognition时视频为何突然暂停？

背景 #

启动Web Speech Recognition时，视频会突然停止播放，触发Video.js的pause事件，不同设备表现不同：

• Android + Chrome：循环视频停止播放，停止语音识别后自动恢复
• iOS Safari/Chrome：循环视频冻结后恢复，停止识别时会再次冻结1秒
• Windows PC + Chrome：视频播放无任何影响

需求 #

实现Web Speech Recognition与Video.js视频播放共存，视频全程无冻结、无暂停。

技术栈 #

• React.js
• Video.js
• Web Speech API（基于react-speech-recognition封装）

已排查 #

仅调用navigator.mediaDevices.getUserMedia({ audio: true })开启麦克风时，视频播放正常，排除单纯麦克风权限导致的问题，推测问题出在Web Speech API的启动流程中。

可行的解决思路 #

1. 拦截pause事件并强制恢复播放
   监听Video.js的pause事件，结合语音识别的活跃状态判断是否为识别触发的中断，若是则立即恢复播放：

   const [isListening, setIsListening] = useState(false);
   
   useEffect(() => {
     const player = videojs('video-player-id');
     player.on('pause', () => {
       if (isListening) {
         // 忽略自动播放限制错误（需确保用户已有交互行为）
         player.play().catch(() => {});
       }
     });
     return () => player.dispose();
   }, [isListening]);
   

   注意：移动端浏览器有严格的自动播放限制，必须确保用户有主动交互（比如点击按钮）后再启动识别和播放。

2. 优化Web Speech API配置
   开启连续识别和中间结果返回，减少浏览器在识别启动时的资源抢占：

   // 原生API配置
   const recognition = new SpeechRecognition();
   recognition.continuous = true;
   recognition.interimResults = true;
   
   // react-speech-recognition配置
   const { listen } = useSpeechRecognition({
     continuous: true,
     interimResults: true
   });
   

3. 规避浏览器资源抢占
   部分移动端浏览器在启动语音识别时会暂停所有媒体播放作为默认行为，可尝试：

   • 将视频设置为muted状态（静音播放可绕过部分自动播放限制，减少媒体资源冲突）
   • 给视频添加playsinline属性（针对iOS，避免视频进入全屏模式后被中断）

4. 替代方案：云端语音识别
   如果上述方法无效，可放弃浏览器内置的Web Speech API，改用云端语音服务：通过getUserMedia获取音频流，实时传输到云端识别服务，避免浏览器内置识别的资源抢占问题。

关于已知问题 #

该问题属于移动端浏览器的已知兼容性Bug，核心原因是浏览器启动语音识别时会临时抢占媒体处理资源，目前暂无官方完全修复方案，上述方法均为有效的规避手段。

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