Free Online Text to Speech MP3 Converter

A high-performance, single-file browser application designed to synthesize natural-sounding speech from text input and provide functionality to record and download the output as an MP3 file.

Core Features

• Live Text-to-Speech Engine: Leverages the browser's native Web Speech API to provide immediate audio playback.
• Voice Customization: Dynamic selection of system-available voices, with granular controls for speech rate (speed) and pitch.
• Audio Recording & Export: Integrated audio stream recording using MediaRecorder and AudioContext to capture the synthesis output and convert it to a downloadable audio blob.
• Character Analytics: Real-time counter to display current character count and estimated reading time.
• Interactive UI: A "Pulse" animation that activates when the audio is playing, providing visual feedback.
• No-Storage Architecture: All state is managed in-memory. The app does not use cookies, local storage, or server-side databases.

Technical Implementation Strategy

• Architecture: A single HTML5 file containing all structure (HTML), styling (CSS), and logic (JS). No external frameworks or backend dependencies.
• State Management: Application state (voice settings, current text) is stored in a JavaScript object that resets upon page refresh, adhering to the no-persistence constraint.
• UI/UX Design:
  • Layout: A clean, centered-column layout with a prominent text input area.
  • Controls: A sidebar or floating panel for voice configuration (Voice, Rate, Pitch) and playback controls (Play, Stop, Record, Download).
  • Aesthetics: Professional "SaaS" aesthetic using a palette of whites, light grays, and a high-contrast primary blue (#2563EB) for action buttons.
  • Typography: Sans-serif, clean, readable font stack (e.g., system-ui, Inter).

Color Palette

• Background: #FFFFFF
• Surface/Container: #F9FAFB (Subtle off-white)
• Primary Action: #2563EB
• Text Primary: #1F2937
• Text Secondary: #6B7280
• Borders: #E5E7EB

Developer Directives

1. Iframe Compliance: The app must run inside a sandbox. Do NOT use localStorage, sessionStorage, or cookies. Use in-memory variables to manage state.
2. Clean UI: Absolutely no dark mode. The UI must remain a consistent, high-contrast, professional light-mode aesthetic.
3. Responsive Design: Ensure the text area and control panels wrap correctly on mobile devices. Use CSS Grid or Flexbox for fluid layouts.
4. No Dependencies: Use pure Vanilla JavaScript. If styling is required, use Tailwind CSS via CDN. Do not use complex frameworks like React or Vue.
5. Security: Ensure all links utilize target="_blank" rel="noopener noreferrer". Avoid eval() or dangerous script execution patterns.