edge-tts/web/QUICKSTART.md

Quick Start Guide

🚀 Get Started in 3 Steps

1. Install Dependencies

cd web
pip install -r requirements.txt

2. Start the Server

./start.sh

Or manually:

python3 server.py

3. Open Your Browser

Visit: http://localhost:8000

---

✨ Features at a Glance

Text to Speech

• Enter any text (up to 5000 characters)
• Select from 100+ voices in multiple languages
• Adjust speed, volume, and pitch
• Generate natural-sounding speech

Voice Selection

• Filter by language and gender
• Preview voice names and locales
• Save your favorite settings

Audio Controls

• Play audio directly in browser
• Download as MP3 files
• View generation history
• Quick reload from history

PWA Features

• Install as standalone app
• Offline support with service worker
• Works on desktop and mobile
• Responsive design

---

📱 Install as App

On Desktop (Chrome/Edge)

1. Click the install icon in the address bar
2. Or look for "Install App" button in the UI
3. App will be added to your applications

On Mobile (Android)

1. Open in Chrome
2. Tap the menu (⋮)
3. Select "Add to Home screen"
4. App icon will appear on home screen

On iOS (Safari)

1. Tap the share button
2. Select "Add to Home Screen"
3. Name the app and add to home screen

---

🎯 Quick Usage Tips

Generate Speech

1. Enter or paste text
2. Select a voice (default: English)
3. Adjust speed/volume/pitch if needed
4. Click "Generate Speech"
5. Audio player appears with playback controls

Download Audio

• Click "Download MP3" button
• File saves with timestamp and text snippet

Use History

• Recent generations saved automatically
• Click "Load" to restore settings
• Click "Delete" to remove from history

Filter Voices

• Use language dropdown for specific locales
• Use gender filter for Male/Female voices
• Voice list updates automatically

---

🔧 Configuration

Change Port

python3 server.py --port 8080

Enable Hot Reload (Development)

python3 server.py --reload

Bind to Specific Host

python3 server.py --host 127.0.0.1

---

⚡ API Usage

Test with cURL

Get voices:

curl http://localhost:8000/api/voices

Generate speech:

curl -X POST http://localhost:8000/api/synthesize \
  -H "Content-Type: application/json" \
  -d '{
    "text": "Hello, world!",
    "voice": "en-US-EmmaMultilingualNeural",
    "rate": "+0%",
    "volume": "+0%",
    "pitch": "+0Hz"
  }' \
  --output speech.mp3

---

🎨 Customization

Update Theme Color

Edit styles.css:

:root {
    --primary-color: #2563eb; /* Your color here */
}

Update manifest.json:

{
  "theme_color": "#2563eb"
}

Replace Icons

Create PNG icons:

• icon-192.png - 192x192 pixels
• icon-512.png - 512x512 pixels

Use any image editing tool or online icon generator.

---

🐛 Troubleshooting

Port Already in Use

python3 server.py --port 8080

Dependencies Not Found

pip3 install -r requirements.txt

Voices Not Loading

• Check internet connection
• Check server logs for errors
• Try refreshing the page

Service Worker Issues

• Clear browser cache
• Hard refresh (Ctrl+Shift+R or Cmd+Shift+R)
• Check browser console for errors

---

📚 More Information

See README.md for detailed documentation including:

• Full API reference
• Deployment guide
• Docker setup
• Production considerations
• Contributing guidelines

---

🎉 You're All Set!

Enjoy using Edge TTS Web UI!

For issues or questions, visit: https://github.com/rany2/edge-tts