https://github.com/jmrashed/text-to-speech-with-language-selection
A modern, responsive Text-to-Speech (TTS) web application built with Bootstrap 5 that converts text into speech in multiple languages.
https://github.com/jmrashed/text-to-speech-with-language-selection
html5 multilingual-tts speech-synthesis text-to-speech voice-selection
Last synced: 5 months ago
JSON representation
A modern, responsive Text-to-Speech (TTS) web application built with Bootstrap 5 that converts text into speech in multiple languages.
- Host: GitHub
- URL: https://github.com/jmrashed/text-to-speech-with-language-selection
- Owner: jmrashed
- License: other
- Created: 2025-01-27T09:38:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-10-01T12:02:27.000Z (9 months ago)
- Last Synced: 2026-01-28T01:50:00.037Z (5 months ago)
- Topics: html5, multilingual-tts, speech-synthesis, text-to-speech, voice-selection
- Language: JavaScript
- Homepage:
- Size: 292 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Text to Speech with Language Selection
A modern, responsive Text-to-Speech (TTS) web application built with Bootstrap 5 that converts text into speech in multiple languages. Features a beautiful UI with gradient backgrounds, smooth animations, and comprehensive speech controls.
## ✨ Features
### Core Functionality
- 🌍 **22 Language Support** - Convert text to speech in multiple languages
- 🎙️ **Voice Selection** - Choose from available system voices for each language
- ⚡ **Real-time Controls** - Play, pause, resume, and stop speech playback
- 🎛️ **Audio Controls** - Adjust rate, pitch, and volume with live sliders
- 📝 **Text Management** - Save, load, and clear text with confirmation dialogs
### Modern UI/UX
- 🎨 **Bootstrap 5 Design** - Beautiful, responsive interface with gradient backgrounds
- 📱 **Mobile Responsive** - Optimized for all screen sizes and devices
- 🍃 **Smooth Animations** - Fade-in effects and hover transitions
- 🔔 **SweetAlert2 Integration** - Beautiful, customizable alert dialogs
- 💫 **Loading Indicators** - Visual feedback during speech synthesis
### Data Management
- 💾 **Persistent Storage** - Automatically saves converted texts to `assets/data/data.json`
- 📚 **Recent Texts History** - View and replay recently converted texts
- ⚙️ **Settings Persistence** - Remembers last used language and audio settings
- 🔄 **One-click Restore** - Quickly reload previous texts with their original settings
## 🚀 Quick Start
1. **Clone the repository:**
```bash
git clone git@github.com:jmrashed/text-to-speech-with-language-selection.git
```
2. **Navigate to project directory:**
```bash
cd text-to-speech-with-language-selection
```
3. **Open in browser:**
- Simply open `index.html` in your web browser
- No server setup required - runs entirely in the browser
## 📖 How to Use
1. **Select Language & Voice** - Choose from 22 supported languages and available system voices
2. **Enter Text** - Type or paste text (up to 500 characters) in the textarea
3. **Adjust Settings** - Fine-tune rate, pitch, and volume using the sliders
4. **Convert to Speech** - Click the green "Convert to Speech" button
5. **Control Playback** - Use pause, resume, and stop buttons as needed
6. **Save & Load** - Save frequently used texts for quick access
7. **View History** - Access recent conversions from the "Recent Texts" section
## 🌐 Supported Languages
| Language | Code | Language | Code |
|----------|------|----------|------|
| English (US) | en-US | Ukrainian (UA) | uk-UA |
| French (FR) | fr-FR | Russian (RU) | ru-RU |
| Hindi (IN) | hi-IN | Polish (PL) | pl-PL |
| Arabic (AE) | ar-AE | Turkish (TR) | tr-TR |
| Spanish (ES) | es-ES | Chinese (CN) | zh-CN |
| Portuguese (PT) | pt-PT | Korean (KR) | ko-KR |
| Italian (IT) | it-IT | Kazakh (KZ) | kk-KZ |
| Indonesian (ID) | id-ID | Azerbaijani (AZ) | az-AZ |
| German (DE) | de-DE | Romanian (MD) | ro-MD |
| Japanese (JP) | ja-JP | Dutch (NL) | nl-NL |
| Uzbek (UZ) | uz-UZ | Georgian (GE) | ka-GE |
## 🛠️ Technologies Used
- **Frontend Framework:** Bootstrap 5.3.0
- **JavaScript Library:** jQuery 3.7.1
- **Alert System:** SweetAlert2
- **Icons:** Font Awesome 6.0.0
- **Speech API:** Web Speech API (SpeechSynthesis)
- **Storage:** LocalStorage + JSON file structure
- **Styling:** Custom CSS with gradients and animations
## 📁 Project Structure
```
text-to-speech-with-language-selection/
├── assets/
│ ├── css/
│ │ └── style.css # Custom styles and responsive design
│ ├── data/
│ │ └── data.json # Persistent data storage
│ └── js/
│ └── main.js # Core application logic
├── index.html # Main application file
├── README.md # Project documentation
└── Screenshot.png # Application preview
```
## 🤝 Contributing
Contributions are welcome! To contribute:
1. **Fork** the repository
2. **Create** a feature branch (`git checkout -b feature/AmazingFeature`)
3. **Commit** your changes (`git commit -m 'Add AmazingFeature'`)
4. **Push** to the branch (`git push origin feature/AmazingFeature`)
5. **Open** a Pull Request
### Development Guidelines
- Follow existing code style and structure
- Test on multiple browsers and devices
- Update documentation for new features
- Ensure mobile responsiveness
## 🌟 Browser Compatibility
| Browser | Support | Notes |
|---------|---------|-------|
| Chrome | ✅ Full | Best performance and voice selection |
| Edge | ✅ Full | Excellent compatibility |
| Firefox | ✅ Full | Good performance |
| Safari | ⚠️ Limited | Basic functionality, fewer voices |
| Mobile Browsers | ✅ Good | Responsive design optimized |
## 📄 License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
## 🙏 Acknowledgments
- **[Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API)** - Core text-to-speech functionality
- **[Bootstrap](https://getbootstrap.com/)** - Responsive UI framework
- **[SweetAlert2](https://sweetalert2.github.io/)** - Beautiful alert dialogs
- **[Font Awesome](https://fontawesome.com/)** - Icon library
- **[jQuery](https://jquery.com/)** - JavaScript library
## 📞 Support
Created by **jmrashed** - Feel free to reach out for questions or suggestions!
[](https://www.linkedin.com/in/jmrashed/)
[](https://leetcode.com/u/jmrashed/)
[](https://www.hackerrank.com/profile/jmrashed)
[](mailto:jmrashed@gmail.com)
[](https://wa.me/8801734446514)
---
⭐ **Star this repository if you found it helpful!**