Not working in Chrome using localhost

[jkintzinger]

Hi,

I was trying the code below but it seems the transcript is not updated:

const { transcript, finalTranscript, listening } = useSpeechRecognition();
const STTHandler = async () => {
    if (SpeechRecognition.browserSupportsSpeechRecognition()) {
        console.log("Listening:",listening)
        if (listening) {
            console.log('stoping');
            console.log('transcript:',transcript);
            console.log('finalTranscript:',finalTranscript);
            SpeechRecognition.stopListening();
        } else {
            await SpeechRecognition.startListening({ continuous: true, language:'fr-FR' });
            console.log('begin');
        }   
    }
}

In my return function, I have a button which calls the STTHandler :

<Button type="link" onClick={STTHandler}>
    <AudioOutlined />
</Button>

I have tested: with and without "continuous", different languages, console the transcript in a useEffect function, but nothing works

I have also tested the README example and it doesn't work either.

Did I miss something ?

Environement: localhost, react 16.14.0, react-speech-recognition 3.8.0, Chrome Version 90.0.4430.212

[JamesBrill]

Hi @kintzinj I've replicated your code with a simple example that works fine in Chrome/localhost:

import React from 'react'
import SpeechRecognition, { useSpeechRecognition } from 'react-speech-recognition'

const Dictaphone = () => {
  const { transcript, finalTranscript, listening } = useSpeechRecognition();

  const STTHandler = async () => {
    if (SpeechRecognition.browserSupportsSpeechRecognition()) {
      console.log('Listening:', listening)
      if (listening) {
        console.log('stopping')
        console.log('transcript:', transcript)
        console.log('finalTranscript:', finalTranscript)
        SpeechRecognition.stopListening()
      } else {
        await SpeechRecognition.startListening({ continuous: true, language:'fr-FR' })
        console.log('begin')
      } 
    }
  }

  return (
    <div>
      <button onClick={STTHandler}>Toggle transcription</button>
      <span>{transcript}</span>
    </div>
  )
}

export default Dictaphone

Clicking the button produced the expected logs with updated transcript when stopping and starting, changed the microphone state as expected, and displayed my transcription. So I think your callback works as expected.

A couple of suggestions for you to diagnose your issue:

• Have you tried a simplified example like the above?
• Is it possible that your Button component is not calling the callback on click? Have you confirmed that your callback is being triggered?

[irasanchez]

I can't get it to work either. I've commented out my component and just put the Dictaphone example with no luck. When using the debugger, I can see my transcription gets built and lost at some point, but I don't know why/how. The transcript is always an empty string in the console when not using the debugger to step into everything.

Edit: I'm silly. I thought it would in Brave, since it's Chromium based. But the simplified version is working on Chrome for me. Thank you!

[jkintzinger]

Hi @JamesBrill, thanks for your answer !

A couple of suggestions for you to diagnose your issue: Have you tried a simplified example like the above? Is it possible that your Button component is not calling the callback on click? Have you confirmed that your callback is being > triggered?

Unfortunately, I have tried a simplified version and I checked that my callback was triggered.

I tried to uninstall and install the package several times but nothing is really changing. In odrer to use the microphone, should I activate something in Chrome's settings ?

[JamesBrill]

Hi @JamesBrill, thanks for your answer !

A couple of suggestions for you to diagnose your issue: Have you tried a simplified example like the above? Is it possible that your Button component is not calling the callback on click? Have you confirmed that your callback is being > triggered?

Unfortunately, I have tried a simplified version and I checked that my callback was triggered.

I tried to uninstall and install the package several times but nothing is really changing. In odrer to use the microphone, should I activate something in Chrome's settings ?

• Can you visit https://mdn.github.io/web-speech-api/speech-color-changer/ and see if that Web Speech API demo works? If it doesn't, it may be something to do with your browser settings or perhaps a Chrome extension that's affecting the Web Speech API. I'm not aware of any particular setting besides the permissions, which you can set here. Is it possible that you denied localhost permission to use the microphone in the past?
• Could you share a repo with your full web app? I can't think of any reason why the above example wouldn't work, so it would be easier if I could reproduce your full environment to diagnose the problem

[jkintzinger]

Hi again @JamesBrill,

I have found my issue.. it's not related to the "react-speech-recognition" package but the problem comes from my microphone access. Thanks for your help (your last comment helped me a lot). I will close this issue :)