WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
1221
kuzma
Apri nell'Editor
Pubblica il Tuo Codice
31 July 2025
Modello HTML della pagina di accesso Liquid Drop
20 December 2024
Un codice di staticclass394
HTML
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Text to Speech</title> </head> <body> <div> <input id="input" type="text" placeholder="Enter text here"> <button onclick="speak()">Speak</button> </div> </body> </html>
CSS
Copy
<style> body { font-family: Arial, sans-serif; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } div { background-color: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } input[type="text"] { width: 92%; height: 40px; margin-bottom: 10px; padding: 10px; font-size: 16px; border: 1px solid #ddd; border-radius: 5px; } button { font-weight: 600; width: 100%; height: 25px; font-size: 16px; background-color: #299893; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #299893; } </style>
JS
Copy
<script> function speak(){ var text = document.getElementById("input").value.trim(); if (text !== "") { var utterance = new SpeechSynthesisUtterance(text); speechSynthesis.speak(utterance); } else { alert("Please enter some text"); } } </script>
