JavaScript Speech to Text, TTS Repeats 3 Times

[zamber]

This is a speech to text, then to TTS. Chrome only. The way it is supposed to work is if the user says “go” into the mic, the TTS then says “green”. The problem is it repeats “green” 3 times instead of 1 time. I tried to use a counter to get it to only say “green” once, it did not work. Same thing happened when I used a completely different speech to text routine.

It says "green, green, green" instead of just "green" 1 time.

Any ideas, please?

    <script>   
        var speech = true;
        window.SpeechRecognition = window.SpeechRecognition
                        || window.webkitSpeechRecognition;
 
        const recognition = new SpeechRecognition();
        recognition.interimResults = true;
        const words = document.querySelector('.words');
        words.appendChild(p);
 
        recognition.addEventListener('result', e => {
            const transcript = Array.from(e.results)
                .map(result => result[0])
                .map(result => result.transcript)
                .join('')
 
            document.getElementById("p").innerHTML = transcript;
            console.log(transcript);

var count;
var str = transcript;   
var check = str.includes("go");

  funcOutput();
            
        });
          
        if (speech == true) {
            recognition.start();
            recognition.addEventListener('end', recognition.start);
                  }
                
   function funcOutput() {

           var speech = new SpeechSynthesisUtterance();

           speech.volume = 1;
           speech.pitch =  1;
           speech.rate = 1;   
            
           var voices = window.speechSynthesis.getVoices();
           speech.voice = voices[1];   
 
           speech.text =  ("Green") ;   
           window.speechSynthesis.speak(speech);                  }   
        
    </script>