tts.gallery - Free, open-source Azure OpenAI TTS voice preview tool. Compare all 23 text-to-speech voices (gpt-4o-mini-tts) including Alloy, Echo, Nova, Fable, Onyx, Shimmer, and 15 neural voices + 2 HD voices. Test individual voices or play through all voices sequentially with custom text.
🎙️ The complete Azure OpenAI TTS voice library at your fingertips
Created by Kiarash Adl
| Feature | Description |
|---|---|
| 🎤 23 Voices | All Azure OpenAI TTS voices (Standard, Neural, HD) |
| 🔐 Secure | Credentials encrypted and stored locally in browser |
| 🎯 Individual Testing | Test any voice with custom text |
| 🎵 Sequential Playback | Compare all voices with same text automatically |
| 📱 Responsive | Works on desktop, tablet, and mobile |
| 🎨 Professional UI | Azure-themed, clean interface |
| 🚀 No Backend | 100% client-side, no server required |
| 🔒 Privacy-First | Zero data collection or tracking |
| ⚡ Fast | Instant voice switching and playback |
| 🆓 Free & Open | MIT licensed, community-driven |
- Alloy - Neutral and balanced
- Echo - Resonant and clear
- Fable - Expressive and warm
- Nova - Bright and energetic
- Onyx - Deep and authoritative
- Shimmer - Bright and cheerful
- Ash - Clear and articulate
- Ballad - Smooth and melodic
- Brook - Gentle and flowing
- Cedar - Warm and grounded
- Clover - Fresh and lively
- Coral - Vibrant and warm
- Dan - Professional and clear
- Elan - Energetic and dynamic
- Jazz - Smooth and sophisticated
- Marin - Fresh and coastal
- Marilyn - Classic and elegant
- Meadow - Calm and natural
- Rio - Lively and upbeat
- Sage - Wise and measured
- Verse - Poetic and expressive
- Jade Hardy - Confident and strong
- Megan Wetherall - Professional and polished
Visit tts.gallery to use the application immediately!
Watch the Demo: See TTS Gallery in action on TikTok 🎥
<script async src="https://www.tiktok.com/embed.js"></script>@tts.gallery OpenAI voice sampler for #developers to try before choosing an #azure #openAI voice like Jade Hardy or Megan Wetherall
♬ original sound - tts.gallery
New to TTS Gallery? Check out the Quick Start Guide for a 5-minute tutorial.
⚠️ Before deploying your own instance: This project requiresog-image.png(1200×630px) andscreenshot.pngassets in thepublic/directory for proper SEO and social sharing. See ASSETS.md for detailed requirements and creation guidelines.
- An Azure OpenAI account with TTS deployment
- Modern web browser (Chrome, Firefox, Safari, Edge)
- Create an Azure OpenAI resource in the Azure Portal
- Deploy a TTS model (e.g.,
gpt-4o-mini-tts) - Get your credentials:
- Endpoint URL (e.g.,
https://your-resource.openai.azure.com) - API Key (found in "Keys and Endpoint" section)
- Deployment name (e.g.,
gpt-4o-mini-tts) - API version (e.g.,
2025-03-01-preview)
- Endpoint URL (e.g.,
- Visit tts.gallery or run locally
- Navigate to Settings tab
- Enter your Azure OpenAI credentials:
Endpoint: https://your-resource.openai.azure.com API Key: your-api-key-here Deployment: gpt-4o-mini-tts API Version: 2025-03-01-preview - Click "Save Configuration"
- Switch to Voice Testing tab
- Select a voice from the dropdown
- Enter or edit the sample text
- Click "Speak" to hear the selected voice
- Or click "Play All Voices" to hear all voices sequentially
- React 19 - UI framework
- TypeScript - Type safety
- Tailwind CSS - Styling
- Shadcn UI - Component library
- Vite - Build tool
- Azure OpenAI API - Text-to-speech service
- ✅ All credentials stored locally in browser (encrypted KV store)
- ✅ No backend server required
- ✅ No data collection or analytics
- ✅ API calls made directly from browser to Azure
- ✅ Open source - verify the code yourself
Note: Your browser must support CORS for Azure OpenAI endpoints. If you encounter CORS issues, you may need to configure your Azure OpenAI resource to allow browser-based requests.
# Clone the repository
git clone https://github.com/kiarashplusplus/ttsgallery.git
cd ttsgallery
# Install dependencies
npm install
# Start development server
npm run devThe application will be available at http://localhost:5173
Endpoint: https://myresource.openai.azure.com
Deployment: gpt-4o-mini-tts
API Version: 2025-03-01-preview
Endpoint: https://mycompany-ai.openai.azure.com
Deployment: tts-production-v2
API Version: 2025-03-01-preview
The application uses a professional Azure-themed color palette:
- Primary: Deep Azure Blue - Main actions and brand color
- Secondary: Cool Slate Gray - Supporting elements
- Accent: Vibrant Orange - Highlights and CTAs
- Typography: Inter (UI) + JetBrains Mono (code)
Solution: Ensure your Azure OpenAI resource allows browser-based requests. You may need to enable CORS in your Azure configuration or use a browser extension that enables CORS for development.
Solution: Double-check your API key and endpoint URL. Ensure there are no extra spaces or characters.
Solution: Verify your deployment name matches exactly what's shown in Azure Portal. Deployment names are case-sensitive.
Solution: Modern browsers block auto-play. Click the play button on the audio controls to start playback.
Solution: Check your browser console for errors. Ensure you have sufficient Azure API quota remaining.
- Voice Selection - Compare voices before implementing TTS in your application
- Demo Creation - Generate voice samples for client presentations
- Quality Testing - Verify voice quality with your specific content
- Voice Discovery - Explore all available voices to find the perfect fit
- Batch Testing - Test the same script across all voices quickly
We welcome contributions! Please see CONTRIBUTING.md for guidelines.
Have ideas to improve this tool? Visit the GitHub repository to share your suggestions or submit a pull request!
Quick contribution steps:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
See CONTRIBUTING.md for detailed guidelines and project structure.
This project is licensed under the MIT License - see the LICENSE file for details.
- Created by Kiarash Adl
- Built with Shadcn UI
- Powered by Azure OpenAI Service
- Icons from Phosphor Icons
Ready to deploy your own instance? See DEPLOYMENT.md for detailed deployment instructions for:
- Vercel (recommended)
- Netlify
- Cloudflare Pages
- GitHub Pages
- Custom domain setup for tts.gallery
Before deploying, ensure you have created the following assets in your public/ directory:
- og-image.png (1200x630px) - Open Graph image for social media sharing
- screenshot.png - Application screenshot for documentation and SEO
These images are referenced in the HTML meta tags and structured data for optimal SEO and social sharing.
If you find this project useful, please consider giving it a star on GitHub!
For issues related to:
- This application: Open an issue in the GitHub repository
- Feature requests: Share your ideas on GitHub Discussions
- Azure OpenAI Service: Contact Azure Support
- API access: Check Azure OpenAI documentation
- Live Application: tts.gallery
- GitHub Repository: github.com/kiarashplusplus/ttsgallery
- Report Issues: GitHub Issues
- Changelog: CHANGELOG.md
- Contributing Guide: CONTRIBUTING.md
- Deployment Guide: DEPLOYMENT.md
Note: This application is not affiliated with or endorsed by Microsoft or Azure. It's a community-built tool for testing Azure OpenAI TTS voices.
Made with ❤️ by Kiarash Adl
azure-openai tts text-to-speech voice-sampler gpt-4o-mini-tts openai-voices azure-tts speech-synthesis voice-preview react typescript open-source developer-tools audio ai-voices neural-voices hd-voices voice-comparison demo-app