Preview and compare all locally installed text-to-speech voices on your device. Adjust speech rate and pitch for free with this browser-based TTS sampler.
AI Generation Prompt
System Text-to-Speech Voice Previewer Specification
Overview
A clean, professional, single-file browser utility that identifies, displays, and tests all locally available SpeechSynthesis voices. The goal is to provide a frictionless way for users to sample voices with adjustable parameters.
Core Features
- Live Voice Detection: Uses
window.speechSynthesis.getVoices()to enumerate all installed system voices. - Search & Filter: Real-time filtering by Name, Language (ISO code), and Gender (where supported by the browser).
- Playback Controls: Individual 'Play' and 'Stop' buttons for each voice card, plus a global 'Stop All' button.
- Audio Customization: Global sliders for Rate (0.1x to 2.0x) and Pitch (0.0 to 2.0).
- Input Field: A multi-line textarea for custom sample text, allowing users to hear how specific content sounds across different voices.
UI/UX Layout
- Header: Descriptive title and a one-sentence instruction for the user.
- Control Panel (Sticky Top):
- Text Input Area (Large, multi-line).
- Configuration Controls: Two sliders (Rate, Pitch) with numeric value indicators.
- Voice Count indicator (e.g., "Found 42 voices").
- Voice Grid: Responsive card-based layout (1 column mobile, 3-4 columns desktop).
- Card Content: Voice Name, Language code, and play/stop action buttons.
- Visual Cues: Subtle animations (scale up on hover, pulse effect on the active voice card).
Design System & Palette
- Aesthetic: Modern SaaS aesthetic, light mode only.
- Color Palette:
- Primary:
#2563eb(Blue - for buttons and active states). - Background:
#f8fafc(Light slate - for page background). - Surface:
#ffffff(White - for cards). - Text:
#1e293b(Dark slate - for primary text). - Borders:
#e2e8f0(Soft border).
- Primary:
- Typography: Sans-serif, clean font stacks (Inter, system-ui).
- Transitions: 0.2s
cubic-bezier(0.4, 0, 0.2, 1)for all UI micro-interactions.
Developer Requirements
- Architecture: Single HTML file including CSS and Vanilla JS.
- No Persistence: STRICTLY NO localStorage, sessionStorage, or cookies. All variables must be scoped within the window object or closure.
- Responsive Design: Ensure mobile interaction is handled (touch-friendly buttons).
- Accessibility: High color contrast ratios, clear focus states for keyboard navigation, and
aria-labelattributes for all buttons. - Browser Compatibility: Handle the asynchronous
voiceschangedevent, as voices may not be loaded immediately on page refresh.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is this text-to-speech voice previewer?
This tool allows you to instantly list, filter, and test all voices installed on your operating system or browser using the Web Speech API. It provides an efficient way for developers, designers, and content creators to sample different speech synthesis options without the need to install external software. Unlike cloud-based TTS engines, this tool runs entirely within your browser environment using local system resources. This ensures complete privacy and zero latency, as the audio is generated directly on your machine, making it an ideal utility for rapid prototyping, accessibility testing, or finding the perfect voice for a project.
How do I change the speech rate or pitch for the voices?
You can easily modify the audio output parameters using the master controls provided at the top of the application. The rate slider controls the speed of playback, while the pitch slider adjusts the frequency of the voice, allowing for precise customization of the synthesized speech output before you test. These global adjustments are applied in real-time to any voice you select to preview. When you trigger the play button for a specific voice, the engine will apply the currently selected rate and pitch settings to that utterance, giving you full control over the final sound profile.
Why don't I see any voices in the list?
The voice list is populated dynamically based on the speech synthesis voices currently registered by your operating system or browser. If the list appears empty, it is likely because the browser has not finished loading the voices or the speech engine needs a user interaction to trigger the voice enumeration process. In some cases, you may need to click a 'Refresh' button or ensure that your operating system has at least one language pack with text-to-speech capabilities installed. If you are using a privacy-focused browser or a restricted enterprise environment, verify that speech synthesis services are permitted and not being blocked by your security policy.
Is my text data or voice preference saved?
No, this application does not store any input data, configuration preferences, or usage history on your device or a server. Because we strictly adhere to the requirement of not using local storage, cookies, or databases, the application functions entirely in-memory. Once you refresh the page or close your browser tab, all entered text and voice configurations are immediately purged from the system. This 'stateless' design ensures your data privacy, as nothing is ever written to persistent storage, making this a completely transient and secure utility.
