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! :)