Skip to content

A simple, responsive Text-to-Speech (TTS) web app built with HTML, CSS, and JavaScript. Type your text, select a voice, and click "Listen" to hear it spoken aloud—with a cool blinking textarea animation for visual feedback during playback.

Notifications You must be signed in to change notification settings

rohit-dev25/Text-To-Voice

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Text-to-Speech Converter A simple, responsive web application that converts text to speech using the browser's built-in Web Speech API. Type your text, select a voice, and click "Listen" to hear it spoken aloud. The textarea features a smooth blinking/glowing animation while the voice is active, providing visual feedback.

Demo Screenshot

Features Text Input: Enter any text in the textarea (up to 250px height, responsive). Voice Selection: Dropdown to choose from available browser voices (e.g., male/female, accents). Play Button: Starts speech synthesis with a play icon (requires play.png image). Visual Feedback: The textarea blinks with a pink glowing outline during speech. The button also glows for added effect. Error Handling: Alerts if no text is entered or if speech fails (e.g., no voices available). Responsive Design: Works on desktop and mobile with a gradient background and smooth transitions. Prevents Overlap: Automatically stops ongoing speech before starting new playback. Demo Live preview: [Add your GitHub Pages link or demo URL here if deployed]. Test it by opening index.html in a modern browser. Technologies Used HTML5: Structure and semantic elements. CSS3: Styling with Flexbox, gradients, animations (keyframes for blinking), and transitions. Uses Google Fonts (Poppins). JavaScript (ES6): Web Speech API for synthesis, event listeners for voice loading and speech events (onstart, onend, onerror). Browser API: SpeechSynthesisUtterance for text-to-speech (no external libraries needed). Browser Compatibility Best Support: Google Chrome, Microsoft Edge (full voices and events). Partial Support: Firefox (limited voices), Safari (basic synthesis, may not load voices immediately). Not Supported: Older browsers (IE). Voices load asynchronously—refresh if the dropdown is empty on first load. Mobile: Works on Chrome for Android/iOS, but voice options may vary. Installation & Usage Clone or Download:

Clone the repo: git clone . Or download the ZIP from GitHub. File Structure:

Run Copy code text-to-speech-converter/ ├── index.html # Main HTML file ├── style.css # Styles with animations ├── script.js # JavaScript for speech and effects ├── play.png # Play button icon (16x16px, optional) ├── dropdown.png # Dropdown arrow icon (15x15px, optional) └── README.md # This file Run Locally:

Open index.html in a web browser (no server needed—it's static). Type text in the textarea (e.g., "Hello, world!"). Select a voice from the dropdown (wait for voices to load if empty). Click "Listen" to start speech. The textarea will blink until it finishes. Customization:

Add images: Place play.png and dropdown.png in the root folder for icons. Fonts: The CSS uses Poppins—add to HTML if not loading. Speech Settings: Edit script.js to adjust rate (speech.rate = 0.9;) or pitch (speech.pitch = 1.2;) before speak(). Screenshots Add your own by taking a browser screenshot:

Idle state: Idle Speaking state: Speaking Potential Improvements Add sliders for speech rate, pitch, and volume. Include a "Stop" button to pause/resume speech. Support file upload for longer texts. Add language detection for auto-voice selection. Deploy to GitHub Pages or Netlify for a live demo. Known Issues Voices may not load on first page load—refresh the page. No offline support (requires browser API). Custom voices (e.g., premium) depend on the user's device/OS. Contributing Feel free to fork the repo and submit pull requests for bug fixes or features! Report issues via GitHub Issues.

License This project is open-source and available under the MIT License. See the LICENSE file for details (create one if needed).

About

A simple, responsive Text-to-Speech (TTS) web app built with HTML, CSS, and JavaScript. Type your text, select a voice, and click "Listen" to hear it spoken aloud—with a cool blinking textarea animation for visual feedback during playback.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published