<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Julie Voice - Text to Speech</title> <style> body font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; max-width: 800px; margin: 50px auto; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; .container background: rgba(255,255,255,0.1); backdrop-filter: blur(10px); border-radius: 20px; padding: 30px; box-shadow: 0 8px 32px 0 rgba(31,38,135,0.37); h1 text-align: center; margin-bottom: 10px; .subtitle text-align: center; opacity: 0.9; margin-bottom: 30px; textarea width: 100%; height: 150px; padding: 15px; font-size: 16px; border: none; border-radius: 10px; background: white; resize: vertical; font-family: inherit; .controls margin-top: 20px; display: flex; gap: 15px; flex-wrap: wrap; button flex: 1; padding: 12px 24px; font-size: 16px; font-weight: bold; border: none; border-radius: 10px; cursor: pointer; transition: transform 0.2s, opacity 0.2s; button:hover transform: translateY(-2px); opacity: 0.9; button:active transform: translateY(0); .speak-btn background: #4CAF50; color: white; .stop-btn background: #f44336; color: white; .pause-btn background: #ff9800; color: white; .voice-select padding: 10px; border-radius: 10px; border: none; font-size: 14px; margin-top: 20px; width: 100%; .rate-control margin-top: 20px; .rate-control label display: block; margin-bottom: 10px; input[type="range"] width: 100%; cursor: pointer; .status margin-top: 20px; padding: 10px; background: rgba(0,0,0,0.2); border-radius: 10px; text-align: center; font-size: 14px; @keyframes pulse 0%, 100% opacity: 1; 50% opacity: 0.5; .speaking animation: pulse 1s infinite; </style> </head> <body> <div class="container"> <h1>🎤 Julie Voice TTS</h1> <div class="subtitle">Natural-sounding text-to-speech with Julie's voice</div>
<textarea id="textInput" placeholder="Enter text for Julie to speak...">Hello! I'm Julie, your virtual assistant. How can I help you today? I can read any text you type here in my natural, friendly voice.</textarea> <div class="controls"> <button class="speak-btn" onclick="speakText()">🔊 Speak</button> <button class="pause-btn" onclick="pauseSpeech()">⏸ Pause</button> <button class="stop-btn" onclick="stopSpeech()">⏹ Stop</button> </div> <select id="voiceSelect" class="voice-select"> <option value="">Loading voices...</option> </select> <div class="rate-control"> <label>Speaking Rate: <span id="rateValue">1.0</span></label> <input type="range" id="rateSlider" min="0.5" max="2" step="0.1" value="1.0"> </div> <div class="rate-control"> <label>Pitch: <span id="pitchValue">1.0</span></label> <input type="range" id="pitchSlider" min="0.5" max="2" step="0.1" value="1.0"> </div> <div class="status" id="status">Ready to speak ✨</div> </div> julie voice text to speech