Failed to execute 'start' on 'SpeechRecognition': recognition has already started

Question

I am using a wrapper of Web Speech API for Angular6. I am trying to implement a system of starting-stopping after each 3.5s in order to be able to manipulate the results for these small parts.

Even though I stop the recognition, before starting it again, I keep getting this error Failed to execute 'start' on 'SpeechRecognition': recognition has already started .

As suggested in this post, I first verify whether the speech recognition is active or not and only if not active, I try to start it. https://stackoverflow.com/a/44226843/6904971

Here is the code:

constructor( private http: Http, private service: SpeechRecognitionService, private links: LinksService) { 

    var recognizing; // will get bool values to verify if recognition is active

    this.service.onresult = (e) => {
      this.message = e.results[0].item(0).transcript;
    };

    this.service.onstart = function () {
      recognizing = true;
    };

    this.service.onaudiostart = function () {
      recognizing = true;
    };

    this.service.onerror = function (event) {
      recognizing = false;
    };


    this.service.onsoundstart  = function () {
      recognizing = true;
    };

    this.service.onsoundstart  = function () {
      recognizing = true;
    };


      this.record = () => { 
        this.service.start();
        setInterval(root.ongoing_recording(), 3500); 
      };         

      var root = this;
      var speech = '';

      this.stop_recording = () => {
        this.service.stop();
    };            


    this.ongoing_recording = ()=> {

      setTimeout(function(){
        if( recognizing === true){
          root.service.stop();     
          root.service.onend = (e) => {
            recognizing = false;
            speech = root.message;               
            var sentence = document.createElement('span');
            sentence.innerHTML = speech + " "; 
            document.body.appendChild(sentence);
          }                         
        }
      }, 3500);

      setTimeout(function(){ 
          if(recognizing === false){  
          root.service.start();       
          }              
        }, 3510); 
    };



    }


  start() {
    this.service.start();
  }


  stop() {
    this.service.stop();
  }


  record(){
    this.record();
  }


  stop_recording(){
    this.stop_recording();
  }

  ongoing_recording(){
    this.ongoing_recording();
  }

I think that the timing might not be good (with the setTimeout and interval). Any help would be much appreciated. Thank you! :)

Answer 1

one observation: you run setInterval() every 3500 ms to invoke ongoing_recording() , but then use setTimeout() with 3500 ms again within ongoing_recording() .

Besides that, maybe logging the error handler --where recognizing is also set to false -- could help finding a solution:
in past versions of the SpeechRecognition implementation, not every error did actually stop the recognition (I don't know if that is still the case). So it might be the case, that recognizing is reset due to an error that did not actually stop the recognition; if this is really the cause of the error when restarting recognition, it could be just catched & ignored.

Also it might be worth trying to re-start the recognition in the onend handler (and onerror ).

Answer 2

I am not sure what is the reason that is causing it in your code, but i had the same error and what caused it in my case was that I was calling start() twice in a row, so what fixed it was adding a variable to check if the recognition has started or stopped, so if it has started and I clicked it again it would return speach.stop() to avoid using start() again.

let recognition = new SpeechRecognition();
let status = 0;
document.querySelector(".mic").addEventListener("click",() => {
  if (status == 1) {
    status = 0;
    return recognition.stop();
  }
  recognition.start();
  status = 1;
  recognition.onresult = function (event) {
    status=0;
    var text = event.results[0][0].transcript;
    recognition.stop();
  };
  recognition.onspeechend = function () {
    status = 0;
    recognition.stop();
  };
});

Answer 3

I used Web Speech API for voice search functionality in my site and I was facing a similar sort of situation. It has one microphone icon which toggles the speech recognition on and off. It was working fine in the normal on and off of the button that started speech recognition but was breaking only if you test it rigorously with a continuous button toggle.

Solution: The thing that worked for me is:

try{
//line of code to start the speech recognition
}
catch{
//line of code to stop the speech recognition
}

So I wrapped the .start() method which was breaking the application in a try block and then added the catch block to stop it. And even if it comes across this problem, on the next button click to turn on the speech recognition, it works. I hope you would be able to extract something from it.