<!DOCTYPE html>
<!-- Declares this as an HTML5 document -->
<html>
<head>
<title>Text to Speech</title>
<style>
body {
font-family: Arial, sans-serif; /* Simple readable font */
text-align: center; /* Center everything */
margin-top: 50px; /* Space from top */
}
textarea {
width: 300px; /* Text box width */
height: 100px; /* Text box height */
font-size: 16px; /* Text size */
}
button {
padding: 10px 20px; /* Button size */
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>🔊 Text to Speech</h1>
<!-- Text input box -->
<textarea id="text">
Hello! This is text to speech in JavaScript.
</textarea>
<br><br>
<!-- Button to start speaking -->
<button onclick="speakText()">Speak</button>
<script>
// Function that converts text to speech
function speakText() {
// Get the text from textarea
let text = document.getElementById("text").value;
// Create a speech object
let speech = new SpeechSynthesisUtterance();
// Assign text to the speech object
speech.text = text;
// Set language (English - US)
speech.lang = "en-US";
// Set voice speed (1 = normal)
speech.rate = 1;
// Set pitch (1 = normal)
speech.pitch = 1;
// Set volume (0 to 1)
speech.volume = 1;
// Speak the text
window.speechSynthesis.speak(speech);
}
</script>
</body>
</html>