Eric Tts !new! May 2026
@keyframes slideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
showNotification(message, type = 'info') { // Create notification element const notification = document.createElement('div'); notification.textContent = message; notification.style.cssText = ` position: fixed; bottom: 20px; right: 20px; padding: 12px 20px; background: ${type === 'error' ? '#f44336' : type === 'success' ? '#4caf50' : type === 'warning' ? '#ff9800' : '#2196f3'}; color: white; border-radius: 8px; font-size: 14px; z-index: 1000; animation: slideInRight 0.3s ease-out; `; document.body.appendChild(notification); setTimeout(() => { notification.style.animation = 'slideOutRight 0.3s ease-out'; setTimeout(() => notification.remove(), 300); }, 3000); } } eric tts
.controls { margin: 20px 0; display: grid; gap: 15px; } @keyframes slideIn { from { opacity: 0; transform:
1. HTML Structure <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Eric TTS - Text to Speech</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="tts-card"> <h1>🎙️ Eric TTS</h1> <p class="subtitle">Advanced Text-to-Speech Converter</p> <textarea id="textInput" placeholder="Enter text here... Eric will speak it out loud!" rows="5" ></textarea> <div class="controls"> <select id="voiceSelect"> <option value="">Select Voice</option> </select> <div class="rate-control"> <label>Speed: <span id="rateValue">1.0</span></label> <input type="range" id="rate" min="0.5" max="2" step="0.1" value="1"> </div> <div class="pitch-control"> <label>Pitch: <span id="pitchValue">1.0</span></label> <input type="range" id="pitch" min="0.5" max="2" step="0.1" value="1"> </div> </div> <div class="button-group"> <button id="speakBtn" class="btn primary">🔊 Speak</button> <button id="pauseBtn" class="btn">⏸️ Pause</button> <button id="resumeBtn" class="btn">▶️ Resume</button> <button id="stopBtn" class="btn">⏹️ Stop</button> </div> <div class="presets"> <h3>Quick Examples:</h3> <button class="preset-btn">Hello! Welcome to Eric TTS</button> <button class="preset-btn">The weather today is beautiful</button> <button class="preset-btn">This is an advanced text to speech system</button> </div> </div> </div> Welcome to Eric TTS<
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(); }
textarea:focus { outline: none; border-color: #667eea; }
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); }