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

Last Updated : 05 Dec, 2023

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. In this article, we will build a fully responsive text-to-speech converter using HTML, CSS, and JavaScript.

Preview Image:

Preview of text-to-speech converter

Approach:

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:

Javascript

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 Paying..."
    }
    setTimeout(() => {
        convertBtn.textContent = "Play Converted Sound"
    }, 5000);
});

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 Using 
                    HTML, CSS, and JavaScript.
                  </h1>
                <h3>
                      Enter any text of your choice
                    and change it into speech just by
                    a click to the button.
                  </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>

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;
}