• Townie
    AI
  • Blog
  • Docs
  • Pricing
  • We’re hiring!
Log inSign up
dcm31

dcm31

SimpleAudioPlayerPWA

Text-to-speech PWA with podcast player controls
Public
Like
SimpleAudioPlayerPWA
Home
Code
2
README.md
H
index.ts
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
4/28/2025
Viewing readonly version of main branch: v2
View latest version
README.md

Simple Audio Player PWA

A simple Progressive Web App (PWA) that transforms text into speech with podcast-style playback controls.

Features

  • Paste any text to have it read aloud
  • Full audio playback controls including:
    • Play/pause
    • Skip forward/backward 10 seconds
    • Speed control (0.5x to 2.0x)
    • Seek bar with time display
  • Choice of 6 different high-quality voices
  • Progressive Web App capabilities:
    • Works offline
    • Can be installed to home screen
    • Responsive design

How to Use

  1. Paste or type text in the input area
  2. (Optional) Click the settings icon to choose a different voice
  3. Click "Generate Speech" to convert the text to audio
  4. Use the playback controls to navigate and adjust the audio

Technical Details

  • Built with React and TypeScript
  • Uses the OpenAI TTS (Text-to-Speech) API for high-quality voice synthesis
  • Implements PWA features with service worker for offline capabilities

Voice Options

  • Alloy - Neutral voice
  • Echo - Deeper, resonant voice
  • Fable - Warm, folksy voice
  • Onyx - Authoritative, deep voice
  • Nova - Energetic, youthful voice
  • Shimmer - Clear, light voice

Installation Instructions

To install this as a PWA on your device:

On Desktop (Chrome/Edge):

  1. Visit the app URL
  2. Click the install icon in the address bar
  3. Follow the prompts to install

On iOS:

  1. Open in Safari
  2. Tap the share button
  3. Select "Add to Home Screen"
  4. Follow the prompts

On Android:

  1. Open in Chrome
  2. Tap the menu button
  3. Select "Add to Home Screen"
  4. Follow the prompts
FeaturesVersion controlCode intelligenceCLI
Use cases
TeamsAI agentsSlackGTM
ExploreDocsShowcaseTemplatesNewestTrendingAPI examplesNPM packages
PricingNewsletterBlogAboutCareers
We’re hiring!
Brandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.