Web speech event calling multiple times

Question

I have created this service startListening is the function to start recognizing voice

  import { Injectable } from '@angular/core';
    declare var webkitSpeechRecognition: any;
    
    
    @Injectable({
      providedIn: 'root'
    })
    export class Service {
      isListening = false;
      public text = '';
      public tempWords : any;
      public transcript_arr =[];
      public confidence_arr =[];
      public temp_trans ='';
      myWindow = window as any;
      recognition;
    
      constructor(private toastr: ToastrService) {
       
        const SpeechRecognition = this.myWindow.SpeechRecognition || this.myWindow.webkitSpeechRecognition;
    
        if (SpeechRecognition != null && SpeechRecognition !== undefined) {
        this.recognition =  new webkitSpeechRecognition(); 
        }
        else
        {
        this.recognition = null;
        this.toastr.error('Warning', 'Web Speech Not Supported on this browser');
        }
    
       }
      getTranscriptValue()
      {
        return this.transcript_arr;
      }
      getConfidenceValue()
      {
        return this.confidence_arr;
      }
      init() {
        if(this.recognition) {
        this.recognition.continuous = true;
        this.recognition.interimResults = false;
        this.recognition.maxAlternatives = 1;
        this.recognition.lang = 'en-US';
        this.startListening();
        }
     
      }
      startListening() {
        if(this.recognition) {
        this.recognition.addEventListener('result', (e:any) => {
          console.log(e.results);
          let last = e.results.length - 1;
          console.log(last);
          this.temp_trans = e.results[last][0].transcript; 
          let confidence = e.results[last][0].confidence; 
          console.log(this.temp_trans);
          this.confidence_arr.push(confidence);
          this.transcript_arr.push(this.temp_trans); 
        });
      }
      }
    
      start() {
        if(this.isListening==false)
        {
          this.isListening = true;
          this.recognition.start();   
        }
        if (this.recognition) {
        this.recognition.addEventListener('end', (condition:any) => {
          if (!this.isListening) {
           this.recognition.stop();
          } else {
            this.recognition.start();
          }
        });
      }
      }
      stopListening() {
        if (this.recognition) {
        this.recognition.removeEventListener('result',null);
        }
      }
      stop() {
        this.isListening = false;
        this.recognition.stop();
      }
      reinit()
      {  
        this.transcript_arr=[];
        this.confidence_arr=[];
        this.tempWords='';
        this.text='';
        this.temp_trans='';
      }
    }

i'm retrieving the value from service from my .ts file

fetchTransValues() {

    return new Promise<{ service_transcript: any,service_confidence:any }>((resolve, reject) => {
     
        setTimeout(() => {
            const service_transcript = this.service.getTranscriptValue();
            const service_confidence = this.service.getConfidenceValue();
            console.log(service_transcript);
            console.log(service_confidence);
            resolve({service_transcript, service_confidence});
        }, 1000);
  });
 
  }

     async save_data(){  
        const {service_transcript, service_confidence} = await this.fetchTransValues();
        console.log('service');
        console.log(service_transcript);
        console.log('confidence');
        console.log(service_confidence);

Issue i'm facing is getting multiple times the same transcript and confidence

service_transcript contains this array which is repeated words.

(3) ['stop', 'stop', 'stop']

My doubt is this happens when i stop the service with this.service.stop and then call this.service.init() after then start the service using `this.service.start

Any solution to resolve this issue. Thanks