Text-to-Speech App
A web-based application that converts user input text into spoken words, featuring voice selection, pause/resume functionality, and real-time word counting—all wrapped in a glass-morphic UI.
Project Overview
Created to learn and experiment with the native Web Speech API, exploring advanced features like voice selection, speech pausing/resuming, and real-time text analysis for a user-friendly TTS experience.
Implementation
Built using three core files—index.html, style.css, and script.js—this app focuses on the modern Web Speech API: 1. **HTML Structure**: Includes a text area for user input, a dynamic voice dropdown, and buttons for converting to speech or clearing text. 2. **CSS Glass Morphism**: Uses a frosted glass effect with a colorful gradient background, showcasing advanced design techniques like backdrop-filter. 3. **JavaScript Logic**: - **SpeechSynthesis**: Populates available voices, listens for changes, and plays speech based on the selected voice. - **Pause/Resume**: Allows users to pause or resume speech if the input text is longer. - **Word Counter**: Automatically updates whenever the user types, providing real-time feedback on word count. - **Voice Change on the Fly**: Automatically restarts speech when a new voice is selected (if text is present).
Challenges
Encountered several key challenges: - **Voice Loading**: Ensuring the onvoiceschanged event triggers properly across different browsers. - **Dynamic Pause/Resume**: Managing the state of speech while providing user-friendly button text updates. - **Glass Morphic Design**: Achieving a visually appealing frosted glass effect with performance considerations. - **Cross-Browser Support**: Handling differences in how Chrome, Firefox, and other browsers implement the SpeechSynthesis API.
Outcome
Successfully delivered a polished, glass-morphic text-to-speech application that supports multiple voices, pause/resume functionality, and real-time word counting. This project demonstrates a practical use of the Web Speech API and modern CSS design patterns, resulting in a smooth and intuitive user experience.
Project Gallery
