Tts — Eric

.btn:not(.primary) { background: #f0f0f0; color: #333; }

.button-group { flex-direction: column; }

.btn.primary { background: #667eea; color: white; } eric tts

speak() { const text = this.textInput.value.trim(); if (!text) { this.showNotification('Please enter some text to speak!', 'warning'); return; } // Stop any ongoing speech this.stop(); // Create new utterance this.utterance = new SpeechSynthesisUtterance(text); // Set properties this.utterance.rate = parseFloat(this.rateSlider.value); this.utterance.pitch = parseFloat(this.pitchSlider.value); // Set voice if selected const selectedVoice = this.voiceSelect.value; if (selectedVoice) { const voices = this.synth.getVoices(); const voice = voices.find(v => v.name === selectedVoice); if (voice) this.utterance.voice = voice; } // Event handlers this.utterance.onstart = () => { this.isPlaying = true; this.speakBtn.disabled = true; this.showNotification('🔊 Speaking...', 'info'); }; this.utterance.onend = () => { this.isPlaying = false; this.speakBtn.disabled = false; this.showNotification('✅ Speech completed', 'success'); }; this.utterance.onerror = (event) => { console.error('TTS Error:', event); this.isPlaying = false; this.speakBtn.disabled = false; this.showNotification('Error occurred during speech', 'error'); }; // Speak this.synth.speak(this.utterance); }

.presets h3 { font-size: 14px; color: #666; margin-bottom: 10px; } .btn:not(.primary) { background: #f0f0f0

<script src="script.js"></script> </body> </html> * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); min-height: 100vh; display: flex; justify-content: center; align-items: center; padding: 20px; }

.btn { flex: 1; padding: 12px 20px; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; transition: all 0.3s; font-weight: 600; } } .button-group { flex-direction: column

.container { width: 100%; max-width: 800px; }