Recognition has stopped working

[jamesbrill]

Recognition has stopped working

[JamesBrill]

• Which version are you using?
• Which options are you setting on SpeechRecognition?
• If you debug or console.log the properties injected by SpeechRecognition, what do you see?
• Are you using it offline? (I recall your previous issue on this repo, which asked about offline use)

[CygnusBell]

Version: 1.1.0
Options: none, just the default.
Console.log for these items...
console.log(transcript);
console.log(resetTranscript);
console.log(browserSupportsSpeechRecognition);

returns "True", a blank line, and a function...

"ƒ () {
interimTranscript = '';
finalTranscript = '';
_this.disconnect('RESET');
_this.setState({ interimTranscript: interimTranscript, finalTranscript: finalTran…"

Haha, no, not offline, you made that clear it's not possible :) Even in that case though it gave an error, this is just nothing.

Here is the full code of the app I'm trying to make work now. It was just taken from a stack exchange sample file.

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

class Dictaphone extends Component {
render() {
const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
        return null
    }

    return (
        <div>
            <button onClick={resetTranscript}>Reset</button>
            <span>{transcript}</span>
        </div>
    )
}

}

export default SpeechRecognition(Dictaphone)

[JamesBrill]

I have used this same example code using version 1.1.0 and it behaves as normal.

When you run the app, do you see the red recording icon in your Chrome tab?

[CygnusBell]

No. I used to, but now for some reason it doesn't. I must've done something to goof it up, but not sure how to track it down since it was working last time I ran it about 3 weeks ago.

[JamesBrill]

To help me determine if this is a bug in 1.1.0 (which was released last week), can you revert back to 1.0.7 and see if you still get the issue?

[JamesBrill]

Hard-code the version with:

"react-speech-recognition": "1.0.7",

in your package.json and then run npm install.

[JamesBrill]

Another test to see if the Web Speech API is working in your browser:

• Open Dev Tools
• Open Console
• Run

const recognition = new webkitSpeechRecognition();
recognition.start();

• Do you see the red recording icon?

[JamesBrill]

Another possibility is that you accidentally blocked your app from using your microphone in Chrome. If that is the case, you will see this icon in the right-hand side of your address bar:

[CygnusBell]

Using 1.0.7 did not fix.
It's not the blocked microphone, checked that earlier.

When I try to run...

const recognition = new webkitSpeechRecognition();
recognition.start();

I get...

undefined

[JamesBrill]

When I try to run...

const recognition = new webkitSpeechRecognition();
recognition.start();

I get...

undefined

Yes, but does the recognition start and the red icon appear on your tab?

[CygnusBell]

No

[JamesBrill]

Which browser are you using?

[CygnusBell]

Google Chrome
Version 73.0.3683.86 (Official Build) (64-bit)

[JamesBrill]

I have the same version and the two lines of code I posted above turned on the recognition. Web Speech API isn't working in your browser for some reason.

Two thoughts:

• Restart your browser and run those two lines again
• Is your microphone broken?

[CygnusBell]

gonna restart whole computer again, and browser, and then test mic, will be back with results.

[JamesBrill]

Haha drastic measures indeed! 😄 I look forward to the results.

[CygnusBell]

still not working :(

I restarted computer, restarted chrome and disabled all extensions... I gotta be doing something really stupid to make this not work lol

[CygnusBell]

oh and mic seems to be working, did a test record and the test setup in system prefs

[JamesBrill]

And to double-check, when you run

const recognition = new webkitSpeechRecognition();
recognition.start();

in a new tab, you do not see the flashing red recording icon in your tab?

[CygnusBell]

correct.

[JamesBrill]

What properties are on your recognition object? Just run

const recognition = new webkitSpeechRecognition();
recognition

Do you see an object like this?

[CygnusBell]

[JamesBrill]

Did you instantiate it first?

[JamesBrill]

const recognition = new webkitSpeechRecognition();
recognition

[CygnusBell]

[JamesBrill]

And when you run recognition.start(), no flashing icon... Weird.

Here's a good test: try this website https://www.cs.cmu.edu/~dst/SpeechDemo/

[CygnusBell]

yeah, super weird.

This is interesting, it's saying not allowed even though in site settings it's set to "ask" and when I toggle it to "allowed" it still says not allowed. I wonder if there's some global permission I messed up at some point.

[JamesBrill]

Could you screenshot the thing that says the microphone is not allowed?

[CygnusBell]

[JamesBrill]

I'm pulling at straws here, but is it possible that Chrome itself is blocked by your operating system from using the microphone? You mentioned System Preferences earlier, so I guess you're using a Mac. Maybe check this out? https://support.apple.com/en-gb/guide/mac-help/control-access-to-your-microphone-on-mac-mchla1b1e1fe/mac

[JamesBrill]

Though that link says you'd get prompted if the app tried to access the microphone again...

[CygnusBell]

THAT WAS IT!!!!!

THANKS FOR GRASPING THE STRAWS!!!

I was googling for hours for something like this but just kept coming across stuff about SSLs.

I guess this was in the system update and I just had no idea it was even a thing.

AGAIN THANK YOU SO MUCH (and sorry it had nothing to do with your component really).

[CygnusBell]

Though that link says you'd get prompted if the app tried to access the microphone again...

Yeah, it says that, but there was no such prompt lol hence having no idea where to check. Thank you again!

[JamesBrill]

Glad to hear you're unblocked! This was fun. 😄