Text-to-Speech Web App 🎙️ | Real-Time Voice Controls | HTML • CSS • JavaScript

A clean, modern, fully client-side Text-to-Speech (TTS) web application built using pure HTML, CSS and JavaScript, featuring real-time control of speech speed, pitch, and volume, plus loop modes, segmented playback, and a smooth, responsive UI.

No backend. No frameworks. No dependencies.
Just open index.html and run it.

Change the speed, pitch, or volume while audio is actively speaking — seamlessly and asynchronously.

Choose from:

• Play once
• Repeat 3×
• Repeat 5×
• Infinite loop mode

Long text is auto-split into smaller segments to avoid Web Speech API limits and prevent audio glitches.

Auto-loads all available voices from your browser (Google, Microsoft, OS voices, etc.).

Looks clean and modern across:

• Desktop
• Tablet
• Mobile

No React, no backend, no server, no NPM.
Everything runs directly in the browser.

• HTML5 — UI layout
• CSS3 — Responsive styling
• JavaScript (ES6) — Full TTS engine + controls
• Web Speech API (speechSynthesis)

Text-to-Speech/
│
├── index.html          # Main application UI
├── style.css           # All styling and layout
├── logic.js            # Core TTS engine and logic
├── manifest.json       # Optional PWA metadata
├── projlogo.png        # App icon/logo
└── README.md           # Documentation

git clone https://github.com/Dev-Suraj-Dhawal/Text-to-Speech.git

Simply open:

index.html

or run any simple local server:

npx serve .

1. Type or paste text in the textarea
2. Select a voice
3. Adjust:
   • Speed
   • Pitch
   • Volume
4. Choose playback mode:
   • Play
   • Repeat 3×
   • Repeat 5×
   • Loop
5. Pause, Resume, or Stop anytime

The app updates all controls in real time with zero lag.

These limits are from the Web Speech API, not the app:

• Cannot export audio directly (requires backend TTS engines)
• Available voices vary by OS and browser
• Rapid start/stop may trigger SpeechSynthesisError: interrupted

Your logic.js already handles interruptions safely.

• Dark mode
• Voice presets (e.g., “Narration”, “Podcast”, “Motivation”)
• Save & export text history
• Audio recording using MediaRecorder + external TTS engines

Anyone is welcome to submit issues, feature requests, or enhancements.
Feel free to improve UI/UX, add animations, or extend functionality.

This project is licensed under the MIT License — free for personal and commercial use.

If you find this useful, consider:

• Starring the repository
• Sharing it
• Forking it for your portfolio

Your support fuels more open-source projects.

This Text-to-Speech project demonstrates a complete, production-ready TTS tool built with pure frontend technologies.
It delivers smooth performance, real-time controls, and robust handling of long text — all in a lightweight package.

Perfect for:

• Portfolio projects
• Accessibility tools
• Learning the Web Speech API
• Browser-based productivity apps