`transcript` is always empty

[iamtheef]

transcript doesn't seem to update at all

[JamesBrill]

Hi @iamtheef Could you provide more information? Do you have a code snippet you can share? And what browser are you running it on?

[iamtheef]

Sure! Here's my button

<button
        className="yn-button listen-button"
        name="submitButton"
        onMouseDown={() =>
          SpeechRecognition.startListening({ continuous: true })
        }
        onMouseUp={SpeechRecognition.stopListening}
      >
</button>

And here's a use effect

useEffect(() => {
    console.log("listening", listening);
    console.log("is mic available", isMicrophoneAvailable);
    console.log("browser support", browserSupportsSpeechRecognition);
    console.log("length", transcript.length);
    console.log("===");
  }, [listening, transcript]);

Here's what gets logged before and after pushing the button

listening true
is mic available true
browser support true
length 0
===
listening false
is mic available true
browser support true
length 0
===

While I've pushed the button I can see the red rec mark on the tab but nothing is logged on the console after I unclick.

My browser is Brave Version 1.31.91 Chromium: 95.0.4638.69 (Official Build) (x86_64) btw

[JamesBrill]

My browser is Brave Version 1.31.91 Chromium: 95.0.4638.69 (Official Build) (x86_64) btw

I suspect this is the problem (your code looks fine). Although Chrome offers speech recognition, it is disabled in browsers like Brave that use Chromium. This is because Google owns the servers that provide that functionality - they can afford to provide it for free in their own browser, but other browser vendors would have to pay them to add that feature themselves. You can see discussions from unhappy Brave developers here and here.

Out of interest, what value does browserSupportsSpeechRecognition have on Brave? Ideally, it would be false. Given that you saw the red dot appear, I've got a feeling we're not detecting Brave's lack of speech recognition support correctly.

[iamtheef]

Thanks for the reply. This makes sense actually. So in other words react-speech-recognition only would be able to work on Google Chrome? I suspected that detection doesn't work well too, browserSupportsSpeechRecognition is always true as presented in the console in the code above.

What would be another approach for speech recognition in a good amount of browsers?

[JamesBrill]

It is exactly this reason why I encourage users of react-speech-recognition to integrate a polyfill. The Web Speech API is supported in a handful of other browsers (e.g. recent versions of Safari), but the coverage still isn't great and each browser vendor has their own implementation - the polyfills bridge that gap and provide a consistent experience across browsers.

That detection can be improved - I shall make a new issue for failing more gracefully in Chromium browsers. Thanks for bringing that to my attention.

[iamtheef]

Gonna try implementing it with a polyfill then. Thanks a lot for your time!

[iamtheef]

@JamesBrill I managed to get it working eventually with polyfill. Another problem I noticed is that there are CORS problems when the polyfill gets initialised sometimes. It's really weird cause I noticed the problem when I first deployed the app with the pollyfill, then it went away for a few days and now it stopped working again. This only happens on the desktop app, it works fine on mobile. Here's the error I am getting on the desktop app: Access to fetch at 'https://api.speechly.com/login' from origin 'https://myapp.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

[iamtheef]

And just now the error disappeared again after a few refreshes on the page, I think the login fails sometimes hence the error.

[JamesBrill]

@iamtheef I am surprised to see that error - has it disappeared consistently now? If not, it might be worth testing the Speechly client directly and see if you get the same error. If so, you could try raising an issue here as this is the library that initiates the Speechly login.

[nuri35]

I solved this problem by watching this video https://www.youtube.com/watch?v=sLXcuCrBL-M&t=363s