Speech Recognition Issue: Works in Edge but Stalls in Chrome

[Ch-Jahanzaib]

I have developed a web application that uses the Web Speech API for speech recognition. The application works well in Microsoft Edge but faces issues in Google Chrome. Specifically, after continuous speaking for a few minutes or taking a long pause, the speech recognition functionality gets stuck in Chrome.

Here's a simplified version of my code:

[

<title>Speech To Text</title>

Transcript

Start Stop

Listening...

<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> ]

I have observed the following behavior:

• In Microsoft Edge, the speech recognition continues to work smoothly even after extended usage.
• In Google Chrome, it tends to get stuck or unresponsive after some time.

I have tested this on different computers and noticed the same behavior consistently. I have also ensured that I'm using the latest version of Chrome.

I would like to understand why this issue occurs in Chrome and if there's a way to fix it or improve the performance. Has anyone encountered a similar problem or has insights into the differences between Chrome and Edge that might cause this behavior?

Any guidance or suggestions would be greatly appreciated.