Free Online Browser-Based Text-to-Speech Reader

A professional, accessible, and high-performance Text-to-Speech (TTS) tool utilizing the Web Speech API. This application allows users to paste text and have it spoken aloud by system-provided voices with granular control over speed, pitch, and voice selection.

Core Feature Set

• Live Voice Processing: Real-time synthesis of text to audio using the browser's native engine.
• Voice Selection: Dynamic dropdown populating all available voices detected by the browser (e.g., Google, Microsoft, Apple system voices).
• Playback Controls: Play, Pause, Resume, and Stop functionality with visual state indicators.
• Speech Customization: Adjustable range sliders for Speech Rate (0.5x to 2.0x) and Pitch (0.5 to 2.0).
• Text Management: Character count monitor and one-click 'Clear' button.
• Responsive Design: Fluid layout that adapts seamlessly to desktop, tablet, and mobile screens.
• Zero-Storage Architecture: Strictly in-memory logic. No cookies, localStorage, or remote API calls.

User Interface (UI) Specification

• Header: A clean, centered title "Text-to-Speech Reader" with a subtle description subtitle.
• Main Tool Area: A high-contrast, large text area (textarea) with rounded corners and soft focus outlines.
• Control Panel: A grid-based control section below the text area featuring grouped inputs for "Voice Settings" (Dropdown) and "Playback Controls" (Icon-based buttons).
• Layout: A centered single-column card design (max-width 800px) on desktop, transitioning to a full-width experience on mobile.

Color Palette (Strictly Light Mode)

• Background: #F8FAFC (Slate 50)
• Card Background: #FFFFFF (Pure White)
• Primary Accent: #4F46E5 (Indigo 600) for active buttons and controls.
• Text Color: #1E293B (Slate 800) for primary text; #64748B (Slate 500) for labels.
• Borders: #E2E8F0 (Slate 200).
• Shadows: Soft, diffused shadows (0 4px 6px -1px rgba(0, 0, 0, 0.1)) to provide depth without dark mode.

Technical Implementation Directives

• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. Use variables to manage the current text and settings state.
• Sandboxed Environment: The app must function within a null-origin iframe. Do not use alert(), prompt(), or confirm(). Implement modal UI overlays if user feedback is required.
• Web Speech API:
  • Use window.speechSynthesis for voice generation.
  • Ensure clean handling of synthesis cancellation (speechSynthesis.cancel()) when stopping.
  • Use speechSynthesis.getVoices() to populate the dropdown. Note: Voices may load asynchronously; implement a listener for voiceschanged.
• Responsiveness: Ensure the text area dynamically resizes based on the viewport height, providing a larger surface area on desktops for long-form content.
• Animations: Use CSS transitions for button hover states (scale 1.02, opacity change) and focus outlines. Avoid complex JS-based animations to maintain a lightweight footprint.