browser support issue in chrome

[lwardlegit]

Hi all, i'm using react-speech-recognition like so in my react project:

import React, { Component } from "react";
import SpeechRecognition from "react-speech-recognition";
import { Button } from 'react-bootstrap';
class Dictaphone extends Component {

componentDidUpdate=(prevProps)=>{
  console.log(prevProps,this.props.cursor)

  if (this.props.readAlongHighlightState===true){
      let {transcript} = prevProps

              if(this.props.cursor !== '' && this.props.cursor !== undefined){
                var cursor = this.props.cursor

                  //console.log("cursor parentNode ",cursor.anchorNode.parentNode)
                  //console.log("just cursor",cursor)
                  //console.log("just inner html",cursor.anchorNode.parentNode.textContent)
                  //console.log("cursor innerhtml",cursor.anchorNode.innerhtml)

                    if(transcript.includes(" ")){
                        transcript = transcript.split(" ").pop()
                        console.log(transcript)
                      }

                        console.log("cursor anchor node textcontent:",cursor.anchorNode.textContent)
                        if(transcript === cursor.anchorNode.textContent.toString().toLowerCase()){ 
                          cursor.anchorNode.parentNode.style.backgroundColor = 'yellow';
                          cursor = cursor.anchorNode.parentNode.nextElementSibling
                            this.props.updatecursor (cursor); //highlight the span matching the intent

                        }else{
                              console.log("no cursor")
                              }
                          }
                        }
                      }

  render() {
   const {transcript, resetTranscript, browserSupportsSpeechRecognition} = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }
    if(transcript==="notes"||transcript==="cards"||transcript==="home"|| transcript==="settings" || transcript==="read document"){
      this.libraryOfIntents(transcript,resetTranscript);
    }

    return (
      <div>
        <span id="transcriptSpan"className="transcriptspan"> {transcript}  </span>
        <Button variant="outline-dark" onClick={resetTranscript}>Reset</Button>
      </div>
    )
  }
}

for some reason, all of a sudden my browser is not recognizing any speech from my microphone. I have used different microphones and even different computers. I have tried using npm update and I have tried using an older version of my app I have saved where I know the component works. However now that version of the app has the same issue.

I'm wondering if there are new updates in chrome that might be causing a bug in the current version of react-speech-recognition?

[StephenCleary]

I'm wondering if there are new updates in chrome that might be causing a bug in the current version of react-speech-recognition?

I don't see this. I had my app working with 78.0.3904.70, updated to 78.0.3904.87 just now, and the app still works, speech recognition and all. (live demo)

[lwardlegit]

Thanks for the demo! i'm still having trouble but I'm honestly not sure where to begin. My browser isn't actually requesting access to the microphone at all if that's any indicator that something is off

[StephenCleary]

@lwardlegit Check the right side of your browser location bar to make sure Chrome isn't denying access automatically. I had that happen once - I assume I accidentally clicked "deny" and then Chrome doesn't ask again.

If that's not it, I'd try logging to make sure startListening is called. That's the point at which Chrome should ask for permission.

[lwardlegit]

Hey Stephen, it looks like it was an issue with my browser. After removing microphone access for my app's url I was prompted to allow the microphone and now its working again! thank you for all your help.

I really appreciate it