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

• 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 🎥

New to TTS Gallery? Check out the Quick Start Guide for a 5-minute tutorial.

⚠️ Before deploying your own instance: This project requires og-image.png (1200×630px) and screenshot.png assets in the public/ 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)

1. Create an Azure OpenAI resource in the Azure Portal
2. Deploy a TTS model (e.g., gpt-4o-mini-tts)
3. 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)

1. Visit tts.gallery or run locally
2. Navigate to Settings tab
3. 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
   

4. Click "Save Configuration"
5. Switch to Voice Testing tab
6. Select a voice from the dropdown
7. Enter or edit the sample text
8. Click "Speak" to hear the selected voice
9. 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 dev

The 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:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. 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