Service data loading with delay in angular

Question

I have created this service

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 =[];
  public temp_trans ='';


  constructor() { }
  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); 
    });
  }

  start() {
    if(this.isListening==false)
    {
      this.isListening = true;
      try{
      this.recognition.start();
      }
      catch(e){

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

        }
      }
    });
  }
  stopListening() {
    this.recognition.removeEventListener('result',null);
  }
  stop() {
    this.isListening = false;
    this.wordConcat();
    this.recognition.stop();
  }
  reinit()
  { 
    this.transcript_arr=[];
    this.confidence_arr=[];
    this.tempWords='';
    this.text='';
    this.temp_trans='';
  }
  wordConcat() {
    this.text = this.text + ' ' + this.tempWords + '.';
    this.tempWords = '';
  }
}

Example Link

using this transcript array this.service.transcript_arr in .ts file but the last processing of words are returned with some delay after this service has been stopped, but i want if the output is still pending or the component for showing result is already loaded then it should show the transcript result also

score 0 · Answer 1 · answered Feb 01 '22 at 14:18

What about making you transcript_arr to an observable - that way you always get the latest value even if it arrives with a delay. I am using ReplaySubject with bufferSize of 1 here so that when we subscribe, we only get the last value when we have something to show.

public transcript_arr = new ReplaySubject<[]>(1);


  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.next(this.temp_trans); 
    });
  }



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

And In your component use it like so:

lastestTranscript$: Observable<[]>;

this.lastestTranscript$ = this.service.transcript_arr.pipe(data => {return data;})

And show it in the html like so:

<div>{{lastestTranscript$ | async}} </div>

Thanks for the answer will using observable update the transcript in my result component suppose if result component is loaded but the last data is not loaded fully and will it also work if i pass this `latestTranscript` as a post request for processing and then display it after processing — user3653474, Feb 01 '22 at 14:24

Service data loading with delay in angular

1 Answers1