Build a Text to Speech Converter using HTML, CSS & Javascript (original) (raw)

Last Updated : 18 Jun, 2025

A text-to-speech converter is an application that is used to convert the text content entered by the user into speech with a click of a button. A text-to-speech converter should have a text area at the top so that the user can enter a long text to be converted into speech, followed by a button that converts the entered text into speech and plays the sound on click to it.

Here, we will build a fully responsive text-to-speech converter using HTML, CSS, and JavaScript.

**Project Preview

text to speech

Step-by-Step guide to build a Text to Speech Convertor

• Create a folder with the project name and create the required HTML, CSS, and JavaScript files as shown in the project structure.
• Now, use the HTML tags like textarea, button, div, head, body etc. to define the structure of the website.
• Add the styles to the HTML tags used to define the structure by selecting them with the help of given IDs and Classes.
• Utilise the **speechSynthesis API of the global window object and the **SpeechSynthesisUtterance to create a utteraance of the entered text.
• Next, use the **speak() method of the **speechSynthesis API to speak or play the created utterance as a speech.
• Handle the errors efficiently if user have not provided any text to convert.

**Example: The below example will help you to understand the process of creating an text-to-speech converter using HTML, CSS, and JavaScript

index.html `

        <div class="interaction-container">
            <textarea id="textToConvert" 
                placeholder="Enter text to convert into speech..." 
                id="" cols="35" rows="10" 
                class="text-control"></textarea>

            <p class="error-para"></p>

            <button class="btn" id="convertBtn">
                Play Converted Sound
            </button>
        </div>
    </div>
</div>

<script src="script.js"></script>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

body { padding: 0; margin: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }

.container { height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(90deg, #161578, #b81055); }

.app-container { display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #fff; }

.headings-container { padding: 0 1rem; }

.interaction-container { display: flex; align-items: normal; justify-content: center; flex-direction: column; text-align: center; padding: 0 1rem; }

.text-control { padding: 0.5rem; margin: 2rem 0; background-color: #3f464a52; color: #fff; border: 1px solid #fff; border-radius: 10px; }

.text-control:focus-visible { outline: none; }

.error-para { color: red; }

.btn { padding: 0.8rem; background-image: linear-gradient(90deg, #F4244C, #F57D4E); border: 1px solid transparent; border-radius: 10px; color: #fff; cursor: pointer; transition: all 0.25s; }

.btn:hover { padding: 1rem; }

` index.js ``

const text = document.getElementById("textToConvert"); const convertBtn = document.getElementById("convertBtn");

convertBtn.addEventListener('click', function () { const speechSynth = window.speechSynthesis; const enteredText = text.value; const error = document.querySelector('.error-para');

if (!speechSynth.speaking &&
    !enteredText.trim().length) {
    error.textContent = `Nothing to Convert! 
    Enter text in the text area.`
}

if (!speechSynth.speaking && enteredText.trim().length) {
    error.textContent = "";
    const newUtter =
        new SpeechSynthesisUtterance(enteredText);
    speechSynth.speak(newUtter);
    convertBtn.textContent = "Sound is Playing..."
}

setTimeout(() => {
    convertBtn.textContent = "Play Converted Sound"
}, 5000);

});

``

**Output

Final Output

**Note: You will not able to hear the voice as it is an gif so kindly run this project locally on any Online IDE(Replit, etc.)