Build a Text to Speech Website

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:

1. Clone the repository:
   

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

2. Open the project directory:
   

   cd Text-to-Speech-Generator
   

3. Run the project:

   • Open the index.html file in a web browser to start using the Text to Speech Generator.

Usage

1. Open the website in a web browser.
2. Type your text in the provided textarea.
3. Click the "Speak Text" button to hear the text spoken aloud.
4. 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:

8b05045a5be5764f313ed5b9168a17e6
49099650ebdc5f3125501fa170048923
  93f0f5c25f18dab9d176bd4f6de5d30e
    7c8d9f814bcad6a1d7abe4eda5f773e5
    26faf3d1af674280d03ba217d87e9421
    b2386ffb911b14667cb8f0f91ea547a7Text to Speech Generator6e916e0f7d1e588d4f442bf645aedb2f
    af75c476cdb7e6c074ca6da9b40841de
    90392ec4442ad9ff612213ec639da4832cacc6d41bbb37262a98f745aa00fbf0
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    527db218a609cb4e96157e28dc6f988cText to Speech473f0a7621bec819994bb5020d29372a
    4883ec0eb33c31828b7c767c806e14c7
      6b6c66ef74ba338f97a71f3987055feb40587128eee8df8f03d0b607fe983014
      cfc30845dcc69087db4670cfb20dbb15
        b12816d86e91ea319e45b86c4a466364Speak Text65281c5ac262bf6d81768915a4a77ac0
        d1095aebd35e5e12f65b9db809ed3167Stop65281c5ac262bf6d81768915a4a77ac0
      16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
    ffd6ba4147bda351239915f463e46e38
      e388a4556c0f65e1904146cc1a846beeMade with ❤️ by Abhishek Gurjar94b3e26ee717c64999d7867364b1b4a3
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

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

The above is the detailed content of Build a Text to Speech Website. For more information, please follow other related articles on the PHP Chinese website!