Why is the same Speech Recognition code behaving differently every time i run?

Question

Here is my code

export class recognition {
  constructor() { }

  public startrecognition() {
    const voice_recognition = new webkitSpeechRecognition();
    voice_recognition.continuous = false;
    voice_recognition.interimresults = false;
    voice_recognition.lang = "en-US";

    voice_recognition.start();

    voice_recognition.onresult = function (e) {
      const repsonse = e.results[0][0].transcript;
      this.cust_response(response);
      voice_recognition.stop();
    }

    voice_recognition.onerror = function (e) {
      voice_recognition.stop();
    }
  }

  public cust_response(response) {
    //Some code here using response given by customer//
  }
}

The problem here is I'm unable to call the cust_response(response) function from voice_recognition.onresult.

Edit: I have changed this voice_recognition.onresult=function(event){} to voice_recognition.addEventListener("result",(event)=>{}) and this was calling the function inside it. But with this change it sometimes calling voice_recognition.addEventListener("result",(event)=>{}) and when i run again its not calling this function and even it's not executing voice_recognition.addEventListener("error",(event)=>{}). Why is the same code running sometimes and not running the other times?

score 0 · Answer 1 · answered Nov 03 '20 at 07:14

0

You either need to use bind(this) or arrow function notation to access class member variables using this keyword in callbacks.

Try the following

public startrecognition() {
  const voice_recognition = new webkitSpeechRecognition();
  voice_recognition.continuous = false;
  voice_recognition.interimresults = false;
  voice_recognition.lang = "en-US";

  voice_recognition.start();

  voice_recognition.onresult = (e) => {              // <-- arrow function
    const repsonse = e.results[0][0].transcript;
    this.cust_response(response);
    voice_recognition.stop();
  }

  voice_recognition.onerror = (e) => {
    voice_recognition.stop();
  }
}

You could refer here for more details.

answered Nov 03 '20 at 07:14

ruth

29,535
4
30
57

i have tried using arrow function.But it was still not working – Gopi Sai Ponnada Nov 03 '20 at 09:06
Then check if the `e.results[0][0].transcript` property is available in the `e` variable. Try to do `console.log(e)` at the top of the `onresult` callback. – ruth Nov 03 '20 at 09:09
How is the `startrecognition()` function called? – ruth Nov 03 '20 at 09:54
like just a normal function call. startrecognition() – Gopi Sai Ponnada Nov 03 '20 at 10:02
So the `console.log` is triggered but the function `this.cust_response(response)` isn't called? – ruth Nov 03 '20 at 10:12
please see the edit in the question. This time it was working but the same piece of code is behaving differently every time i restart code or refresh the page – Gopi Sai Ponnada Nov 05 '20 at 09:21

score 0 · Accepted Answer · answered Nov 03 '20 at 07:15

0

By using the function keyword, you are not binding a context (this) to the function.

You should either:

(preferred) Use an arrow function, which will bind the context Eg:

voice_recognition.onresult = (e) => {
  ...
  this.cust_response(response);
}

Capture the this variable in the enclosing scope and refer to that Eg:

const self = this;

voice_recognition.onresult = function(e){
  ...
  self.cust_response(response);
}

Ref: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

answered Nov 03 '20 at 07:15

Michael

2,189
16
23

I have tried both individually and also combined....but none worked – Gopi Sai Ponnada Nov 03 '20 at 09:05
Can you add any error messages you are getting in the console to your question? If you put a log statement at the start of the onresult callback do you see it? – Michael Nov 03 '20 at 12:57
please see the edit in the question. This time it was working but the same piece of code is behaving differently every time i restart code or refresh the page – Gopi Sai Ponnada Nov 05 '20 at 09:23

Why is the same Speech Recognition code behaving differently every time i run?

2 Answers2