Web speech api returning old transcript

Question

I have this service in angular to translate speech into text through webspeech

import { Injectable } from '@angular/core';
declare var webkitSpeechRecognition: any;

@Injectable({
  providedIn: 'root'
})
export class VoiceRecognitionService {

  recognition =  new webkitSpeechRecognition();
  isListening = false;
  public text = '';
  public tempWords : any;
  public transcript_arr = [];
  public confidence_arr = [];


  constructor() { }
  getTranscriptValue()
  {
    return this.transcript_arr;
  }
  getConfidenceValue()
  {
    return this.confidence_arr;
  }
  init() {
    this.recognition.continuous = true;
    this.recognition.interimResults = false;
    this.recognition.maxAlternatives = 1;
    this.recognition.lang = 'en-US';

      this.recognition.addEventListener('result', (e:any) => {
        let last = e.results.length - 1;
        let temp_trans = e.results[last][0].transcript; 
        let confidence = e.results[last][0].confidence; 
        this.confidence_arr.push(confidence);
        this.transcript_arr.push(temp_trans); 
        const transcript = Array.from(e.results)
          .map((result:any) => result[0])
          .map((result) => result.transcript)
          .join(''); 
        this.tempWords = transcript;
      });
    
  
  }

  start() {
    if(this.isListening==false)
    {
      this.isListening = true;
      this.recognition.start();
    }
    
    this.recognition.addEventListener('end', (condition:any) => {
      if (!this.isListening) {
        this.recognition.stop();
      } else {
        this.wordConcat()
        this.recognition.start();
      }
    });
  }
  stop() {
    this.isListening = false;
    this.wordConcat();
    this.recognition.stop();
  }
  reinit()
  { 
    this.transcript_arr=[];
    this.confidence_arr=[];
    this.tempWords='';
    this.text='';
  }
  wordConcat() {
    this.text = this.text + ' ' + this.tempWords + '.';
    this.tempWords = '';
  }
}

I call this service function from .ts file like i call this.service.init() on start and then this.service.start() after that i call this.service.stop() and this.service.reinit() but i still get old values with the new values in the result event listener in temp_trans variable i don't want to old values i want new values if i stop it through this.service.stop().

Any solution is highly appreciated. Thanks

@Joosep.P: `temp_trans` is local variable it is not accessible in `reinit()` function — user3653474, Jan 28 '22 at 08:23
Declare it outside of `init()`. Somewhere top where you have some other variables, perhaps. And then refactor by pre-pending accessor `this.` — Joosep Parts, Jan 28 '22 at 08:43

Joosep Parts · Answer 1 · 2022-01-28T09:48:40.603

Try to also clear temp_trans when you reinit.

@Injectable({
  providedIn: 'root'
})
export class VoiceRecognitionService {

  recognition = new webkitSpeechRecognition();
  isListening = false;
  temp_trans = '';
  public text = '';
  public tempWords: any;
  public transcript_arr: string[] = [];
  public confidence_arr: string[] = [];

  constructor() { }

  getTranscriptValue() {
    return this.transcript_arr;
  }

  getConfidenceValue() {
    return this.confidence_arr;
  }

  init() {
    this.recognition.continuous = true;
    this.recognition.interimResults = false;
    this.recognition.maxAlternatives = 1;
    this.recognition.lang = 'en-US';
    this.startListening();
  }

  startListening() {
    this.recognition.addEventListener('result', (e: any) => {
      let last = e.results.length - 1;
      this.temp_trans = e.results[last][0].transcript;
      let confidence = e.results[last][0].confidence;
      this.confidence_arr.push(confidence);
      this.transcript_arr.push(this.temp_trans);
      this.tempWords = Array.from(e.results)
                            .map((result: any) => result[0])
                            .map((result) => result.transcript)
                            .join('');
    });
  }

  stopListening() {
    this.recognition.removeEventListener('result', () => ());
  }

  start() {
    if (!this.isListening) {
      this.isListening = true;
      this.recognition.start();
    }

    this.recognition.addEventListener('end', (condition: any) => {
      if (!this.isListening) {
        this.recognition.stop();
      } else {
        this.wordConcat();
        this.recognition.start();
      }
    });
  }

  stop() {
    this.isListening = false;
    this.wordConcat();
    this.recognition.stop();
    this.stopListening();
  }

  reinit() {
    this.startListening();
    this.transcript_arr = [];
    this.confidence_arr = [];
    this.temp_trans = '';
    this.tempWords = '';
    this.text = '';
  }

  wordConcat() {
    this.text = this.text + ' ' + this.tempWords + '.';
    this.tempWords = '';
  }
}

Thanks i have tried but same issue is there, `e.results[last][0].transcript` this might be returning last results also, is there any way i can remove event listener and then again create it on `reinit` method — user3653474, Jan 28 '22 at 08:48
I used this this.recognition.removeEventListener('result',null); to remove event listener but the transcript is still old ones — user3653474, Jan 28 '22 at 10:31

Web speech api returning old transcript

1 Answers1