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:

   git clone git@github.com:jmrashed/text-to-speech-with-language-selection.git

2. Navigate to project directory:

   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 file for details.

🙏 Acknowledgments

• Web Speech API - Core text-to-speech functionality
• Bootstrap - Responsive UI framework
• SweetAlert2 - Beautiful alert dialogs
• Font Awesome - Icon library
• jQuery - JavaScript library

📞 Support

Created by jmrashed - Feel free to reach out for questions or suggestions!

---

⭐ Star this repository if you found it helpful!