title: Web speech event calling multiple times
body: <p>I have created this service <code>startListening</code> is the function to start recognizing voice</p>
  <pre><code>  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 &amp;&amp; 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) =&gt; {
            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) =&gt; {
            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='';
        }
      }
  </code></pre>
  <p>i'm retrieving the value from service from my <code>.ts</code> file</p>
  <pre><code>fetchTransValues() {
  
      return new Promise&lt;{ service_transcript: any,service_confidence:any }&gt;((resolve, reject) =&gt; {
       
          setTimeout(() =&gt; {
              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);
  </code></pre>
  <p>Issue i'm facing is getting multiple times the same transcript and confidence</p>
  <p><a href="https://i.stack.imgur.com/FLAbH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FLAbH.png" alt="enter image description here" /></a></p>
  <p><code>service_transcript</code> contains this array which is repeated words.</p>
  <blockquote>
  <p>(3) ['stop', 'stop', 'stop']</p>
  </blockquote>
  <p>My doubt is this happens when i stop the service with <code>this.service.stop</code> and then call <code>this.service.init()</code> after then start the service using `this.service.start</p>
  <p>Any solution to resolve this issue. Thanks</p>