• Townie
    AI
  • Blog
  • Docs
  • Pricing
Log inSign up
dcm31

dcm31

SimpleAudioPlayerPWA

Text-to-speech PWA with podcast player controls
Public
Like
SimpleAudioPlayerPWA
Home
Code
4
utils
1
README.md
H
app.tsx
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: v6
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
PricingNewsletterBlogAboutCareersBrandhi@val.townStatus
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.