speechSynthesis.speak(utterance) ,Speaking multiple times the same utterance

Question

I am building a voice assistant using javascript web speech API and flask, but whenever i trigger speechSynthesis.speak(utterance) to speak the result it gives a perfect one-time result on first time, after giving the result multiple times, an example I asked a question one time but it continuously giving me answer multiple times,

code: const recognition = new webkitSpeechRecognition(); recognition.lang = 'en-US';

    const button = document.getElementById('mic-button');
    const output = document.getElementById('output');
    // const responseAudio = document.querySelector('#response-audio');
    const resa = document.querySelector('.result');


    function recmic() {
        recognition.start();
    }

    button.addEventListener('click', () => {
        recmic()

    });

    recognition.addEventListener('result', event => {
        const transcript = event.results[0][0].transcript;
        output.textContent = transcript;
        recognition.addEventListener('result', async event => {
            const speechToText = event.results[0][0].transcript;

            const response = await fetch('/backend', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ text: speechToText })
            });
            var lastSpokenText = '';


            const responseData = await response.json();
            const responseText = responseData.text;
            resa.textContent = responseText


            const utterance = new SpeechSynthesisUtterance(responseText);

            speechSynthesis.speak(utterance);



            console.log(speechToText)
            console.log(responseText)