Eric Tts Link

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

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); }

loadVoices() { const voices = this.synth.getVoices(); this.voiceSelect.innerHTML = '<option value="">Default Voice</option>'; voices.forEach(voice => { const option = document.createElement('option'); option.value = voice.name; option.textContent = `${voice.name} (${voice.lang})`; this.voiceSelect.appendChild(option); }); } eric tts

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

initEventListeners() { this.speakBtn.addEventListener('click', () => this.speak()); this.pauseBtn.addEventListener('click', () => this.pause()); this.resumeBtn.addEventListener('click', () => this.resume()); this.stopBtn.addEventListener('click', () => this.stop()); this.rateSlider.addEventListener('input', (e) => { this.rateValue.textContent = e.target.value; if (this.utterance) this.utterance.rate = parseFloat(e.target.value); }); this.pitchSlider.addEventListener('input', (e) => { this.pitchValue.textContent = e.target.value; if (this.utterance) this.utterance.pitch = parseFloat(e.target.value); }); this.presetBtns.forEach(btn => { btn.addEventListener('click', () => { this.textInput.value = btn.textContent; this.speak(); }); }); // Load voices when they change if (window.speechSynthesis.onvoiceschanged !== undefined) { window.speechSynthesis.onvoiceschanged = () => this.loadVoices(); } } .container { width: 100%

@keyframes slideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }

stop() { this.synth.cancel(); this.isPlaying = false; this.speakBtn.disabled = false; } this.utterance.pitch = parseFloat(this.pitchSlider.value)

pause() { if (this.synth.speaking && !this.synth.paused) { this.synth.pause(); this.showNotification('⏸️ Speech paused', 'info'); } }