https://github.com/ahmed-maher77/echotext__text-to-speech-transformer
A modern text-to-speech web app that transforms written text into natural speech with a sleek glass-morphism UI, smooth animations, and cross-browser compatibility.
https://github.com/ahmed-maher77/echotext__text-to-speech-transformer
css-flexbox css-grid-layout dom-api front-end-development glass-morphism html-css-javascript interactive-elements-and-user-experience responsive-design smooth-animations-and-transitions software-engineering speech-synthesis text-speech-converter text-to-speech web-design web-development web-speech-api
Last synced: 22 days ago
JSON representation
A modern text-to-speech web app that transforms written text into natural speech with a sleek glass-morphism UI, smooth animations, and cross-browser compatibility.
- Host: GitHub
- URL: https://github.com/ahmed-maher77/echotext__text-to-speech-transformer
- Owner: Ahmed-Maher77
- License: mit
- Created: 2025-09-06T16:48:35.000Z (about 1 month ago)
- Default Branch: main
- Last Pushed: 2025-09-06T17:41:27.000Z (about 1 month ago)
- Last Synced: 2025-09-06T19:22:19.059Z (about 1 month ago)
- Topics: css-flexbox, css-grid-layout, dom-api, front-end-development, glass-morphism, html-css-javascript, interactive-elements-and-user-experience, responsive-design, smooth-animations-and-transitions, software-engineering, speech-synthesis, text-speech-converter, text-to-speech, web-design, web-development, web-speech-api
- Language: CSS
- Homepage: https://ahmed-maher77.github.io/EchoText__text-to-speech-transformer/
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# EchoText - Text to Speech Transformer
**EchoText** is a modern, professional web-based **text-to-speech application** that converts written text into natural spoken words using the browser's **Speech Synthesis API**.
It features a **glass-morphism UI**, smooth animations, responsive design, and professional error handling for an excellent user experience.
---
## 💻 Used Technologies
- **HTML5** – Semantic and accessible markup
- **CSS3** – Styling with gradients, animations, and glass-morphism effects
- **Vanilla JavaScript (ES6+)** – Core app logic and interactivity
- **Web Speech API (SpeechSynthesis)** – Native browser text-to-speech functionality
- **FontAwesome 6.5.2** – Icons for modern UI design
- **CSS Grid & Flexbox** – Responsive, flexible layouts
- **DOM API** – Element manipulation and event handling
---
## 🌐 Demo (Live Preview)
**👉 View Live Demo:** [https://ahmed-maher77.github.io/EchoText__text-to-speech-transformer/](https://ahmed-maher77.github.io/EchoText__text-to-speech-transformer/)
---
## ✨ Key Features
- **Text-to-Speech Conversion** – Instantly converts written text into spoken audio
- **Real-time Speech Synthesis** – Uses native browser Speech Synthesis API
- **Responsive Design** – Works across desktops, tablets, and mobile devices
- **Glass-morphism UI** – Modern design with semi-transparent containers and blur effects
- **Gradient Animations** – Animated rainbow gradient title
- **Smooth Animations** – Staggered UI entrance animations and hover effects
- **Error Handling** – Compatibility checks & user-friendly popup alerts
- **Interactive Elements** – Shimmer buttons, animated textarea, hover & focus states
---
## 🎥 Demo Video
**📺 Watch the Demo on LinkedIn:** [coming soon]()
---
## 👀 Website Preview:
---
## 📥 Installation Instructions for Local Setup
1. **Clone the repository:**
```bash
git clone https://github.com/Ahmed-Maher77/EchoText__text-to-speech-transformer.git
```
2. **Open the project folder:**
```
cd EchoText__text-to-speech-transformer
```
3. **Open the ```index.html``` file in your browser to start the app**
---
## 📬 Contact & Contribution
- 🧑💻 **Portfolio:** https://ahmedmaher-portfolio.vercel.app/
- 🔗 **LinkedIn:** https://www.linkedin.com/in/ahmed-maher-algohary
- 📧 **Email:** ahmedmaher.dev1@gmail.com
> Contributions, suggestions, and bug reports are welcome. Feel free to open issues or pull requests.
---
## ⭐ Support
If you found this project helpful or inspiring, please consider giving it a ⭐. Your support helps me grow and share more open-source projects like this!