This content originally appeared on DEV Community and was authored by Abhishek Gurjar
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.htmlfile in a web browser to start using the Text to Speech Generator.
- Open the
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
This content originally appeared on DEV Community and was authored by Abhishek Gurjar
Abhishek Gurjar | Sciencx (2024-08-21T15:37:18+00:00) Build a Text to Speech Website. Retrieved from https://www.scien.cx/2024/08/21/build-a-text-to-speech-website/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.