Web Speech API语音识别问题：Edge正常Chrome卡顿无响应

我开发了一个基于Web Speech API的语音识别Web应用，在Microsoft Edge中运行正常，但在Google Chrome中存在问题：连续说话几分钟或长时间暂停后，语音识别功能会出现卡顿无响应的情况。

现象总结 #

• Microsoft Edge中，长时间使用语音识别仍能流畅运行
• Google Chrome中，经过一段时间后，语音识别容易卡顿或无响应
• 多台电脑测试均出现相同问题，使用的是最新版本Chrome

简化代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
      crossorigin="anonymous"
    />
    <title>Speech To Text</title>
  </head>
  <body class="container pt-5 bg-dark">
    <h2 class="mt-4 text-light">Transcript</h2>
    <div class="p-3" style="border: 1px solid gray; height: 300px; border-radius: 8px;">
      <span id="final" class="text-light"></span>
      <span id="interim" class="text-secondary"></span>
    </div>
    <div class="mt-4">
      <button class="btn btn-success" id="start">Start</button>
      <button class="btn btn-danger" id="stop">Stop</button>
      <p id="status" class="lead mt-3 text-light" style="display: none">Listening...</p>
    </div>
  </body>
  <script>
    if ("webkitSpeechRecognition" in window) {
      // Initialize webkitSpeechRecognition
      let speechRecognition = new webkitSpeechRecognition();
    
      // String for the Final Transcript
      let final_transcript = "";
    
      // Set the properties for the Speech Recognition object
      speechRecognition.continuous = true;
      speechRecognition.interimResults = true;
    
      // Callback Function for the onStart Event
      speechRecognition.onstart = () => {
        // Show the Status Element
        document.querySelector("#status").style.display = "block";
      };
      speechRecognition.onerror = () => {
        // Hide the Status Element
        document.querySelector("#status").style.display = "none";
      };
      speechRecognition.onend = () => {
        // Hide the Status Element
        document.querySelector("#status").style.display = "none";
        //speechRecognition.start();
      };
    
      speechRecognition.onresult = (event) => {
        // Create the interim transcript string locally because we don't want it to persist like final transcript
        let interim_transcript = "";
    
        // Loop through the results from the speech recognition object.
        for (let i = event.resultIndex; i < event.results.length; ++i) {
          // If the result item is Final, add it to Final Transcript, Else add it to Interim transcript
          if (event.results[i].isFinal) {
            final_transcript += event.results[i][0].transcript;
          } else {
            interim_transcript += event.results[i][0].transcript;
          }
        }
    
        // Set the Final transcript and Interim transcript.
        document.querySelector("#final").innerHTML = final_transcript;
        document.querySelector("#interim").innerHTML = interim_transcript;
      };
    
      // Set the onClick property of the start button
      document.querySelector("#start").onclick = () => {
        // Start the Speech Recognition
        speechRecognition.start();
      };
      // Set the onClick property of the stop button
      document.querySelector("#stop").onclick = () => {
        // Stop the Speech Recognition
        speechRecognition.stop();
      };
    } else {
      console.log("Speech Recognition Not Available");
    }
  </script>
</html>

疑问与求助 #

希望了解该问题在Chrome中出现的原因，以及是否有修复或优化性能的方法。请问是否有人遇到过类似问题，或对Edge与Chrome间导致该行为的差异有相关见解？

任何指导或建议都将不胜感激。

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