Hey, developers welcome to Day 32 of our 90Days 90Projects challenge. And in Day 32 we are going to create a Text to Speech using JavaScript.
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Preview
HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Text to Speech </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="speech-container">
<h2> Text to Speech </h2>
<textarea id="inputText" cols="10" rows="5" placeholder="Enter text here..."></textarea>
<button id="speech"> Speak </button>
</div>
</body>
<script src="script.js"></script>
</html>
CSS Code
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.speech-container {
padding: 2rem;
display: flex;
text-align: center;
flex-direction: column;
border-radius: 10px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.6);
}
.speech-container,
textarea {
color: white;
background-color: #e64b00;
}
.speech-container h2 {
font-size: 2rem;
margin-bottom: 1rem;
}
textarea {
resize: none;
border: none;
outline: none;
padding: 2rem 0;
color: white;
text-align: left;
font-size: 1.1rem;
}
textarea::placeholder{
color: #fff;
}
#speech{
width: 10rem;
padding: .8rem;
margin: 0 auto;
cursor: pointer;
color: #e64b00;
font-size: 1.2rem;
border-radius: 15rem;
display: inline-block;
transition: all .3s linear;
border: 2px solid #e64b00;
}
#speech:hover{
color: #fff;
border-color: #fff;
background-color: #e64b00;
}
JavaScript
const userText = document.getElementById('inputText');
const speechBtn = document.getElementById('speech')
speechBtn.addEventListener('click', function () {
speechText = userText.value;
let speechData = new SpeechSynthesisUtterance();
speechData.text = speechText;
speechSynthesis.speak(speechData);
})
