• Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
lorens247

lorens247

Study-with-TTS

Public
Like
Study-with-TTS
Home
Code
4
backend
1
frontend
4
shared
1
README.md
Branches
1
Pull requests
Remixes
History
Environment variables
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
Sign up now
Code
/
README.md
Code
/
README.md
Search
5/24/2025
Viewing readonly version of main branch: v11
View latest version
README.md

Text-to-Speech Web Application

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

Features

  • 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

Technology Stack

  • 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)

Project Structure

β”œβ”€β”€ 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

Usage

  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

API Endpoints

  • GET / - Serves the main application
  • POST /api/parse-pdf - Parses uploaded PDF files
  • Static file serving for frontend assets
FeaturesVersion controlCode intelligenceCLIMCP
Use cases
TeamsAI agentsSlackGTM
DocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Open Source Pledge
Terms of usePrivacy policyAbuse contact
Β© 2025 Val Town, Inc.