script.js

    const playButton = document.getElementById("play-button");
    const pauseButton = document.getElementById("pause-button");
    const stopButton = document.getElementById("stop-button");
    const textInput = document.getElementById("text");
    const speedInput = document.getElementById("speed");

    let currentCharacter; 

    playButton.addEventListener("click", () => { 
        playText(textInput.value); 
    });

    pauseButton.addEventListener("click", pauseText);
    stopButton.addEventListener("click", stopText);

    speedInput.addEventListener("input", () => { 
        stopText();
        playText(utterance.text.substring(currentCharacter));
    });

    const utterance = new SpeechSynthesisUtterance(); 

    utterance.addEventListener("end", () => {
        textInput.disabled = false;
    }); 
    utterance.addEventListener("boundary", (e) => {
        currentCharacter = e.charIndex;
    }); 

    function playText(text) { 
        if(speechSynthesis.paused && speechSynthesis.speaking) {
            return speechSynthesis.resume();
        } 
        if(speechSynthesis.speaking)
            return;
            utterance.text = text; 
            utterance.rate = speedInput.value || 1; 
            textInput.disabled = true;
            speechSynthesis.speak(utterance); 
    } 

    function pauseText() { 
        if(speechSynthesis.speaking)
                speechSynthesis.pause();
        } 
        
    function stopText() {
        speechSynthesis.resume(); 
        speechSynthesis.cancel(); 
    }