Text-to-Speech Web Application

A modern web application that converts text to speech with real-time highlighting and comprehensive playback controls.

• Text Input Methods:

  • Paste plain text into textarea
  • Upload .txt or .pdf files
  • Real-time text parsing and display

• Text-to-Speech:

  • Natural, human-like voice using Web Speech API
  • Real-time sentence/paragraph highlighting
  • Comprehensive playback controls (play, pause, stop, restart)
  • Adjustable reading speed (0.5x to 2x)
  • Voice selection from available system voices

• User Experience:

  • Clean, minimalist UI design
  • Mobile responsive layout
  • Real-time visual feedback
  • Error handling and user notifications

• Frontend: React 18.2.0 with TypeScript
• Styling: TailwindCSS
• Backend: Hono.js API framework
• File Processing: PDF.js for PDF parsing
• Speech: Web Speech API (browser-native)

├── backend/
│   └── index.ts          # Main API server
├── frontend/
│   ├── components/
│   │   ├── App.tsx       # Main application component
│   │   ├── TextInput.tsx # Text input and file upload
│   │   ├── TextDisplay.tsx # Text display with highlighting
│   │   └── TTSControls.tsx # TTS playback controls
│   ├── index.html        # Main HTML template
│   ├── index.tsx         # Frontend entry point
│   └── style.css         # Custom styles
├── shared/
│   └── types.ts          # Shared TypeScript types
└── README.md

1. Visit the application URL
2. Either paste text or upload a .txt/.pdf file
3. Use the playback controls to start text-to-speech
4. Adjust speed and voice as needed
5. Watch real-time highlighting as text is read

• Direct Input: Large textarea for pasting text
• File Upload: Drag & drop or click to upload .txt and .pdf files
• Real-time Stats: Character count, word count, and estimated reading time

• Web Speech API: Uses browser-native speech synthesis
• Voice Selection: Choose from available system voices
• Speed Control: Adjustable from 0.5x to 2x speed
• Pitch & Volume: Fine-tune voice characteristics
• Quick Presets: Study Mode, Normal Reading, Speed Reading

• Sentence Tracking: Highlights current sentence being read
• Auto-scroll: Automatically scrolls to keep current sentence visible
• Progress Bar: Visual progress indicator
• Speaking Icon: Shows which sentence is currently being read

• Play/Pause: Start or pause reading
• Stop: Stop reading and reset position
• Restart: Start reading from the beginning
• Resume: Continue from where you paused

• Touch-friendly: Large buttons and controls
• Responsive Layout: Adapts to different screen sizes
• Optimized Typography: Readable text on all devices

• GET / - Serves the main application
• GET /api/health - Health check endpoint
• GET /api/info - API information and features
• POST /api/parse-pdf - Parses uploaded PDF files and extracts text
• Static file serving for frontend assets

• Chrome/Edge: Full support including all voices
• Firefox: Full support with available voices
• Safari: Full support on macOS/iOS
• Mobile Browsers: Optimized for touch interaction

• Frontend: React 18.2.0 with TypeScript
• Backend: Hono.js framework on Deno
• PDF Processing: PDF.js for text extraction
• Styling: TailwindCSS with custom animations
• Speech: Web Speech API (browser-native)
• File Handling: FormData API for uploads