A modern, professional web application for experimenting with the Web Speech Synthesis API. This interactive playground allows you to test different voices, adjust speech parameters, and generate JavaScript code for your own projects.

• Voice Selection: Browse and select from all available system voices, organized by language
• Real-time Parameter Control: Adjust pitch, rate, and volume with interactive sliders
• Speech Controls: Play, pause, resume, and stop speech synthesis
• Code Generation: Automatically generates clean JavaScript code based on your current settings
• One-click Copy: Copy generated code to clipboard with visual feedback
• Responsive Design: Works seamlessly on desktop and mobile devices

• Developers: Test speech synthesis settings before implementing in applications
• Accessibility Testing: Evaluate how content sounds with screen readers
• Voice Interface Design: Prototype voice user interfaces and conversational apps
• Educational: Learn how the Web Speech API works with interactive examples
• Content Creation: Preview how text content will sound when spoken

This application uses the Web Speech API, which is supported by:

• ✅ Chrome 33+
• ✅ Edge 14+
• ✅ Safari 7+
• ✅ Firefox 49+ (limited support)
• ❌ Internet Explorer

1. Download or clone this repository
2. Open speech_synthesis_playground.html in a web browser
3. Start experimenting with text-to-speech!

# Clone the repository
git clone https://github.com/dmeldrum6/Text-To-Speech-Playground.git

# Navigate to the project directory
cd text-to-speech-playground

# Open in your preferred way
# Option A: Direct file opening
open speech_synthesis_playground.html

# Option B: Simple HTTP server (recommended)
python -m http.server 8000
# Then visit http://localhost:8000

1. Select a Voice: Choose from available system voices in the dropdown menu
2. Adjust Parameters: Use sliders to modify pitch (0.0-2.0), rate (0.1-3.0), and volume (0.0-1.0)
3. Enter Text: Type or paste the text you want to synthesize
4. Control Playback: Use Speak, Pause, and Stop buttons to control audio output
5. Copy Code: Click the copy button to get JavaScript code for your settings

The playground automatically generates clean, production-ready JavaScript code that you can use in your own projects:

// Text-to-Speech with Web Speech API
const synth = window.speechSynthesis;
const utterance = new SpeechSynthesisUtterance('Hello, world!');

// Set specific voice
const voices = synth.getVoices();
const selectedVoice = voices.find(voice => 
    voice.name === 'Alex' && voice.lang === 'en-US'
);
if (selectedVoice) {
    utterance.voice = selectedVoice;
}

// Adjust speech parameters
utterance.pitch = 1.2;
utterance.rate = 0.9;

// Optional: Add event handlers
utterance.onstart = () => console.log('Speech started');
utterance.onend = () => console.log('Speech ended');
utterance.onerror = (event) => console.error('Speech error:', event.error);

// Start speaking
synth.speak(utterance);

• name: The voice identifier (e.g., "Alex", "Samantha")
• lang: Language code (e.g., "en-US", "es-ES")
• localService: Whether the voice is provided locally or by a remote service
• default: Whether this is the system's default voice

• pitch: Voice pitch (0.0 to 2.0, default: 1.0)
• rate: Speaking rate (0.1 to 10.0, default: 1.0)
• volume: Audio volume (0.0 to 1.0, default: 1.0)

• onstart: Fired when speech begins
• onend: Fired when speech completes
• onpause: Fired when speech is paused
• onresume: Fired when speech resumes
• onerror: Fired when an error occurs

• Pure HTML/CSS/JavaScript: No frameworks or dependencies required
• Responsive Design: Built with CSS Grid and Flexbox
• Modern Browser APIs: Uses Web Speech API and Clipboard API
• Progressive Enhancement: Graceful fallbacks for unsupported features

This project is licensed under the MIT License - see the LICENSE file for details.

• Built with the Web Speech API