.preset-btn:hover { background: #667eea; color: white; border-color: #667eea; }
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); }); }
h1 { font-size: 1.8em; } } class EricTTS { constructor() { this.synth = window.speechSynthesis; this.utterance = null; this.isPlaying = false; this.currentText = ''; this.initElements(); this.initEventListeners(); this.loadVoices(); } eric tts
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(); } }
resume() { if (this.synth.paused) { this.synth.resume(); this.showNotification('▶️ Speech resumed', 'info'); } } .preset-btn:hover { background: #667eea
.container { width: 100%; max-width: 800px; }
.presets { margin-top: 20px; padding-top: 20px; border-top: 2px solid #f0f0f0; } this.voiceSelect.innerHTML = '<
.rate-control, .pitch-control { display: flex; align-items: center; gap: 15px; }