Speech recognition with inactive tab

Andrii 0 Reputation points
2023-05-24T15:29:50.9666667+00:00

I`m using Speech recognition api on client side in browser, when my application tab is inactive it just stops working, is it any way I can handle it? I have thoughts that's because of websocket connection is closing when tab is unactive, so maybe i can get websocket object from somewhere and send dummy package to prevent connection from closing

Azure AI Speech
Azure AI Speech
An Azure service that integrates speech processing into apps and services.
1,527 questions
0 comments No comments
{count} votes

1 answer

Sort by: Most helpful
  1. YutongTie-MSFT 48,156 Reputation points
    2023-05-24T22:30:53.2866667+00:00

    Hello @Andrii

    Thanks for reaching out to us, you are correct that the WebSocket connection used by the Speech Recognition API may be closed when the browser tab is inactive. This is because modern browsers throttle or suspend background tabs to conserve resources, which can cause WebSocket connections to be closed.

    To prevent the WebSocket connection from being closed when the tab is inactive, you can use the Page Visibility API to detect when the tab becomes inactive and send a dummy message to keep the connection alive. Here is an example of how to do this:

    // Get the SpeechRecognition object
    const recognition = new window.webkitSpeechRecognition();
    // Add an event listener for the "visibilitychange" event
    document.addEventListener("visibilitychange", () => {
      // If the tab becomes hidden, send a dummy message to keep the WebSocket connection alive
      if (document.hidden) {
        recognition.send("dummy message");
      }
    });
    

    In this example, we use the webkitSpeechRecognition object to create a new SpeechRecognition instance. We then add an event listener for the visibilitychange event, which is fired when the tab becomes hidden or visible. When the tab becomes hidden, we send a dummy message to the SpeechRecognition instance to keep the WebSocket connection alive.

    Note that this approach may not work in all cases, as some browsers may still close WebSocket connections even if a dummy message is sent. Additionally, sending too many dummy messages may cause the WebSocket connection to be closed due to network congestion. Therefore, it's important to test this approach thoroughly and monitor the WebSocket connection to ensure that it remains open.

    Please have a try and let us know how it works. I hope this helps.

    Regards,

    Yutong

    -Please kindly accept the answer and vote 'Yes' if you feel helpful to support the community, thanks a lot.

    0 comments No comments