A browser-based Text-to-Speech application powered by Piper TTS running entirely client-side via WebAssembly. No backend server required.
- 🌍 Multi-language Support - Access hundreds of voices across dozens of languages
- 🎯 High-Quality Speech - Natural-sounding voices with multiple quality levels
- 💾 Offline Capable - Download models once, use them offline indefinitely
- 🚀 Fast Processing - WebAssembly-powered TTS runs locally in your browser
- 📦 No Backend Required - Fully client-side application
- 🔊 Smart Text Chunking - Handles long texts by intelligently splitting at sentence boundaries
- 📊 Progress Tracking - Real-time progress for downloads and generation
- Node.js 18+ and npm
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run previewVisit http://localhost:5173 to use the application.
- Select Language & Voice - Choose from available languages and voices
- Download Model - Download the TTS model (one-time, cached in browser)
- Enter Text - Type or paste the text you want to convert to speech
- Generate - Click "Speak" to generate audio
- Listen - Play the generated audio directly in your browser
tts/
├── public/ # Static assets
│ ├── dist/ # ONNX Runtime / ONNX.js bundles for WebAssembly
│ ├── favicon_io/ # App icons + manifest
│ ├── piper_phonemize.* # WebAssembly phonemizer (includes espeak data)
│ └── piper_worker.js # Web Worker bootstrap for Piper
├── src/
│ ├── components/ # React components
│ ├── hooks/ # Custom React hooks
│ ├── services/ # Business logic
│ ├── utils/ # Utility functions
│ ├── config/ # Configuration
│ ├── App.jsx # Main application
│ └── main.jsx # Entry point
└── vite.config.js # Vite configuration (critical CORS headers)
The application requires specific CORS headers to enable SharedArrayBuffer for WebAssembly:
headers: {
'Cross-Origin-Opener-Policy': 'same-origin',
'Cross-Origin-Embedder-Policy': 'require-corp',
}- TTS models are fetched from HuggingFace
- Downloaded models are cached using the browser's Cache API
- Model metadata persists in localStorage for tracking
- Models remain available offline after initial download
- Text is split into chunks (max 1000 characters)
- Chunking respects paragraph and sentence boundaries
- Each chunk is processed separately to avoid blocking
- Audio chunks are concatenated for seamless playback
- React 19 - UI framework
- piper-wasm - Piper TTS WebAssembly bindings
- Vite 7 - Build tool and dev server
- ESLint - Code linting
Requires a modern browser with:
- WebAssembly support
- SharedArrayBuffer support
- Cache API support
- Web Audio API support
Tested on:
- Chrome/Edge 92+
- Firefox 92+
- Safari 15.2+
- 2-space indentation
- Single quotes for strings
- Functional React components with hooks
- Clean architecture with separated concerns
type: description
Types: feat, fix, refactor, docs, style, test, chore
Example: fix: resolve audio concatenation issue
npm run dev # Start dev server with hot reload
npm run build # Build for production
npm run preview # Preview production build
npm run lint # Run ESLint
npm test # Run tests in watch mode
npm run test:run # Run tests once
npm run test:ui # Open Vitest UI
npm run test:coverage # Generate test coverage reportThis project uses Vitest for unit testing with React Testing Library for component tests.
Run tests:
npm test # Watch mode
npm run test:run # Single run
npm run test:coverage # With coverage reportTest coverage:
- Utility functions (text processing, stats, storage, language detection)
- Service layer (model management, voice services)
- React components (UI components, progress indicators, error handling)
The project includes GitHub Actions workflow that automatically runs tests on pull requests.
- Check browser console for CORS errors
- Ensure dev server is running with correct headers
- Verify model was downloaded successfully
- Check internet connection
- Verify HuggingFace is accessible
- Clear browser cache and retry
- Reduce text length or split into smaller chunks
- Use lower quality models for faster processing
- Close other browser tabs to free memory
- Follow the existing code style
- Test thoroughly in multiple browsers
- Update documentation for new features
- Use conventional commit messages
MIT
- Piper TTS - High-quality text-to-speech engine
- ONNX Runtime - Cross-platform ML inference
- HuggingFace - Voice model hosting