Safari中webkitSpeechRecognition continuous=false时麦克风异常监听问题求助

我尝试使用webkitSpeechRecognition并将continuous设置为false（预期用户停止说话后自动停止识别），但在iOS和macOS的Safari浏览器中，当我停止说话、webkitSpeechRecognition触发onend事件后，麦克风仍显示处于监听状态，且实际上还在继续监听并输入文本。手动点击停止按钮调用speechrecognition.stop()则无此问题。该问题仅出现在Safari，Chrome中完全正常。

JavaScript代码 #

let speechrecognition;
if ("webkitSpeechRecognition" in window) {
    // 初始化识别实例
    speechrecognition = new webkitSpeechRecognition();

    // 用户停止说话后自动停止识别
    speechrecognition.continuous = false; 

    // 返回临时结果和最终结果
    speechrecognition.interimResults = true; 
    
    speechrecognition.onstart = () => {
        console.log ("started");
    };

    speechrecognition.onend = () => {
        console.log ("stopped");
    };

    let final_transcript = "";
    speechrecognition.onresult = (event) => {
        let interim_transcript = "";

        for (let i = event.resultIndex; i < event.results.length; ++i) {
            if (event.results[i].isFinal) {
                final_transcript += event.results[i][0].transcript;
                document.getElementsByClassName("dict")[0].innerHTML = final_transcript;
            } else {
                interim_transcript += event.results[i][0].transcript;
                document.getElementsByClassName("dict")[0].innerHTML = interim_transcript;
            }
        }

        final_transcript = "";
    };
}

HTML代码 #

<div class="dict"></div>
<button onclick="speechrecognition.start();">start</button>
<button onclick="speechrecognition.stop();">stop</button>

这是Safari对webkitSpeechRecognition实现的已知兼容性问题，并非你的代码操作有误。当continuous设为false时，Safari不会在用户停止说话后正确终止麦克风权限和识别进程，即使onend事件已触发，底层的识别服务仍在运行。

可行的解决办法：

• 在onend事件中主动调用stop()：即使事件触发，手动调用一次speechrecognition.stop()，强制Safari终止麦克风监听和识别进程。修改后的onend事件如下：

  speechrecognition.onend = () => {
      console.log ("stopped");
      // 主动调用stop()修复Safari的进程残留问题
      speechrecognition.stop();
  };
  

• 监听onspeechend事件手动终止：额外监听onspeechend事件，在用户停止说话时主动调用stop()，确保进程被终止：

  speechrecognition.onspeechend = () => {
      speechrecognition.stop();
  };
  

• 避免重复初始化实例：确保每次启动识别时使用同一个实例，不要重复创建新的webkitSpeechRecognition对象，防止残留多个未终止的进程。

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