Text-to-Speech App with Typing Animation

Text-to-Speech App with Typing Animation A simple interactive web application that converts text to speech with a typing animation effect. 🌟 Features Multi-language Support: Choose from a variety of languages for text-to-speech conversion. Voice Selection: Pick from multiple voices available for each language. Adjustable Speech Rate: Customize the speed of speech output. Real-time Typing Animation: Watch as the spoken text appears on screen with a typewriter-like effect. Responsive Design: Beautifully crafted UI that works seamlessly on both desktop and mobile devices. 🚀 Quick Start Open the index.html file in a modern web browser. Enter the text you want to convert to speech in the textarea. Select your preferred language and voice. Adjust the speech rate if desired. Click the "Speak" button to start the text-to-speech conversion with typing animation. 🛠️ Technologies Used HTML5 CSS3 (with Tailwind CSS for styling) JavaScript (ES6+) Web Speech API 🎨 User Interface The app features a clean, intuitive interface with the following components: Text input area Language selection dropdown Voice selection dropdown Speech rate slider Speak and Cancel buttons Output display area for the typing animation 🔧 Key Components Language and Voice Selection: Dynamically populates available languages and voices. Updates voice options based on the selected language. Speech Synthesis: Utilizes the Web Speech API for text-to-speech conversion. Supports cancellation of ongoing speech. Typing Animation: Implements a word-by-word typing effect synchronized with speech. Uses Intl.Segmenter for accurate word segmentation across languages. Responsive Design: Employs Tailwind CSS for a mobile-friendly layout. 🌐 Browser Compatibility This app works best on modern browsers that support the Web Speech API and ES6+ features. For optimal performance, use the latest versions of Chrome, Firefox, Safari, or Edge.