Built Text to Speech using Html CSS and JavaScript

Project Demo

Introduction:

In this project, we will build a Text-to-Speech Converter using HTML, CSS, and JavaScript. This simple web application allows users to type any text into a textbox and listen to it being spoken aloud using the browser’s built-in SpeechSynthesis API. We’ll also enhance the user interface with stylish buttons, smooth animations, and responsive design to make it user-friendly and visually appealing.

HTML Code:

<!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="header">
            <h1>Text to Speech Converter</h1>
            <p>Type your text and listen to it being spoken aloud</p>
        </div>
        <textarea id="text-to-speech" placeholder="Enter your text here..."></textarea>
        <div class="btn-container">
            <button id="speak-btn">
                <span class="emoji">🔊</span>
                <span>Speak</span>
            </button>
        </div>
    </div>
</body>

</html>

Explanation:

The <body> contains the main content inside a .container div. At the top, a .header section displays the app’s title and a short description. Below that, we have a <textarea> where users can type the text they want to convert into speech. Finally, a button (#speak-btn) with an emoji and the label “Speak” triggers the speech synthesis functionality. The script tag at the bottom loads the JavaScript file (script.js) that controls the speaking action.

CSS Code:

...

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

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

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.container {
    width: 90%;
    max-width: 500px;
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.container:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

.header {
    text-align: center;
    margin-bottom: 25px;
    color: #333;
}

.header h1 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 10px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.header p {
    font-size: 14px;
    color: #666;
}

textarea {
    width: 100%;
    height: 150px;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #ddd;
    resize: none;
    font-size: 16px;
    margin-bottom: 20px;
    outline: none;
    transition: border 0.3s ease, box-shadow 0.3s ease;
}

textarea:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
}

.btn-container {
    display: flex;
    justify-content: center;
}

button {
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

button:active {
    transform: translateY(0);
}

/* Speaking state animation */
button.speaking {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
    }
}

.emoji {
    font-size: 20px;
}

...

Explanation:

The CSS in this project is used to create a clean, modern, and responsive user interface for the Text-to-Speech Converter. It starts by importing the Poppins font from Google Fonts and applying a universal reset using the * selector to remove default padding and margins, ensuring consistency across browsers.

The body is styled with Flexbox to center the content both vertically and horizontally, and a soft gradient background is used to enhance visual appeal. The main .container is styled to look like a card with padding, rounded corners, a light shadow, and smooth transitions that animate slightly when hovered, giving a floating effect.

Inside the container, the .header section centers the heading and subheading. The heading uses a gradient text effect, making it visually striking by clipping the background gradient into the text. The paragraph underneath has a subtle gray tone for readability.

The textarea is styled with a soft border, padding, rounded edges, and smooth focus effects including a glowing box shadow to improve user experience. The button (#speak-btn) has a vibrant gradient background, rounded shape, and shadow for a modern look. It uses hover and active states for interactivity, and a special .speaking class triggers a pulsing animation using @keyframes to indicate when the speech is active.

JavaScript Code:

...

document.addEventListener("DOMContentLoaded", function () {
  const speakBtn = document.getElementById("speak-btn");
  const textToSpeech = document.getElementById("text-to-speech");

  speakBtn.addEventListener("click", function () {
    const text = textToSpeech.value.trim();

    if (text === "") {
      alert("Please enter some text to speak");
      return;
    }

    // Cancel any ongoing speech
    window.speechSynthesis.cancel();

    // Create a speech synthesis utterance
    const utterance = new SpeechSynthesisUtterance(text);

    // Speak the text
    window.speechSynthesis.speak(utterance);

    // Add animation to button while speaking
    speakBtn.classList.add("speaking");

    utterance.onend = function () {
      speakBtn.classList.remove("speaking");
    };
  });
});

Explanation:

The JavaScript in this project handles the core functionality of converting text to speech using the Web Speech API’s SpeechSynthesis interface. When the page loads, an event listener waits for the DOM to be fully ready. It then selects the “Speak” button and the textarea input by their IDs. When the user clicks the “Speak” button, the script first checks if the textarea is empty. If no text is entered, it shows an alert prompting the user to type something.

If text is present, it first cancels any ongoing speech to prevent overlapping. Then, it creates a new SpeechSynthesisUtterance object with the user’s input text. This object is passed to speechSynthesis.speak() to begin the speech. While speaking, a CSS class called .speaking is added to the button to show a pulsing animation. Once the speech ends, an onend event listener removes the animation class.

Source Code:

Download “Text-to-Speech.7z” Text-to-Speech.7z – Downloaded 3 times – 1.75 KB

Conclusions:

In conclusion, this Text-to-Speech Converter project demonstrates how HTML, CSS, and JavaScript can work together to create a simple yet powerful web tool. The HTML provides a clean and accessible structure, CSS enhances the user interface with modern design and smooth animations, and JavaScript brings interactivity by using the browser’s built-in SpeechSynthesis API to convert typed text into spoken words. This project is a great example for beginners to understand how frontend technologies can be used to build real-world applications that are both functional and visually appealing.