Abhishek Gurjar

Posted on Aug 21

Build a Text to Speech Website

#html #css #javascript #texttospeech

Introduction

Hello, fellow developers! I'm excited to introduce my latest project: a simple yet powerful Text to Speech Generator. This project is a fantastic way to delve into JavaScript's capabilities, especially in handling user inputs, interacting with the Web Speech API, and updating the DOM dynamically. Whether you're a beginner or looking to expand your JavaScript knowledge, this Text to Speech Generator is a great project to work on.

Project Overview

The Text to Speech Generator is a web-based application that allows users to convert text into spoken words using the browser's speech synthesis feature. This project showcases how to create an interactive and accessible user interface while providing real-time feedback by converting text input into speech.

Features

User-Friendly Interface: Simple and intuitive design for seamless user interaction.
Real-Time Speech: Instantly converts input text to speech as you type and click the speak button.
Stop Functionality: Allows users to stop the speech at any point during playback.
Responsive Design: Ensures a consistent experience across various screen sizes and devices.

Technologies Used

HTML: Structures the web page and input elements.
CSS: Styles the interface, ensuring a clean and responsive design.
JavaScript: Handles the speech synthesis logic and user interactions.

Project Structure

Here's a quick look at the project structure:

Text-to-Speech-Generator/
├── index.html
├── styles.css
└── script.js

index.html: Contains the HTML structure for the Text to Speech Generator.
styles.css: Includes CSS styles to enhance the appearance and responsiveness of the application.
script.js: Manages the speech synthesis logic and user interactions.

Installation

To get started with the project, follow these steps:

Clone the repository:

git clone https://github.com/abhishekgurjar-in/Text-to-Speech-Generator.git

Open the project directory:
```
cd Text-to-Speech-Generator
```
Run the project:
- Open the index.html file in a web browser to start using the Text to Speech Generator.

Usage

Open the website in a web browser.
Type your text in the provided textarea.
Click the "Speak Text" button to hear the text spoken aloud.
Click the "Stop" button if you want to stop the speech.

Code Explanation

HTML

The index.html file provides the basic structure of the Text to Speech Generator, including the textarea for user input and buttons to trigger the speech synthesis. Here’s a snippet:

<!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 Generator</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1 class="title">Text to Speech</h1>
    <div class="container">
      <textarea
        name="text"
        class="text"
        placeholder="Type Text Here..."
      ></textarea>
      <div class="buttons">
        <button class="speak-btn">Speak Text</button>
        <button class="stop-btn">Stop</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

CSS

The styles.css file styles the Text to Speech Generator, providing a clean and user-friendly layout. Here are some key styles:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: white;
}

.title {
  text-align: center;
  font-size: 40px;
  margin: 20px;
  padding: 10px;
}

.container {
  margin: 20px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.text {
  background-color: rgb(242, 241, 241);
  color: black;
  width: 600px;
  height: 400px;
  margin: 10px;
  padding: 5px;
  border: 1px solid rgba(0, 0, 0, 0.51);
  display: block;
  border-radius: 10px;
}

.buttons {
  display: flex;
}

.speak-btn, .stop-btn {
  width: 200px;
  height: 40px;
  margin: 10px;
  padding: 10px;
  border: none;
  color: white;
  background-color: rgb(63, 63, 255);
  border-radius: 5px;
  font-size: 15px;
  text-align: center;
  cursor: pointer;
}

.stop-btn {
  background-color: rgb(255, 63, 63);
}

.footer {
  margin: 50px;
  text-align: center;
}

JavaScript

The script.js file handles the speech synthesis logic, converting the text input into speech and managing the stop functionality. Here’s a snippet:

document.addEventListener('DOMContentLoaded', function() {
  const textEl = document.querySelector(".text");
  const speakEl = document.querySelector(".speak-btn");
  const stopEl = document.querySelector(".stop-btn");

  speakEl.addEventListener('click', function() {
    speakText(textEl.value);
  });

  stopEl.addEventListener('click', function() {
    stopSpeaking();
  });

  function speakText(text) {
    window.speechSynthesis.cancel();
    const utterance = new SpeechSynthesisUtterance(text);
    window.speechSynthesis.speak(utterance);
  }

  function stopSpeaking() {
    window.speechSynthesis.cancel();
  }
});

Live Demo

You can check out the live demo of the Text to Speech Generator here.

Conclusion

Building this Text to Speech Generator was an enjoyable and educational experience that deepened my understanding of JavaScript, particularly in creating interactive web applications using the Web Speech API. I hope this project inspires you to explore the possibilities of web development. Happy coding!

Credits

This project was developed as part of my journey to enhance my web development skills, focusing on JavaScript and API integrations.

Author

Abhishek Gurjar
- GitHub Profile

DEV Community