Build a Text to Speech Converter using HTML, CSS & Javascript

Last Updated : 28 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

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <title>Text to Speech Converter</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <div class="container">
        <div class="app-container">
            <div class="headings-container">
                <h1>Text to Speech Converter</h1>
                <h3>Enter Text and Convert into Speech</h3>
            </div>

            <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>
</body>

</html>

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

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.)

Build a Text to Speech Converter using HTML, CSS & Javascript

abhish8rzd

Improve

Article Tags :

Build a Text to Speech Converter using HTML, CSS & Javascript

Project Preview

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

Similar Reads

Thank You!

What kind of Experience do you want to share?