Build a Text to Speech Converter using HTML, CSS & Javascript
A text-to-speech converter is an application that is used to convert the text content entered by the user into speech with a click of a button. A text-to-speech converter should have a text area at the top so that, the user can enter a long text to be converted into speech followed by a button that converts the entered text into speech and plays the sound on click to it. In this article, we will build a fully responsive text-to-speech converter using HTML, CSS, and JavaScript.
Approach
- Create a folder with the project name and create the required HTML, CSS, and JavaScript files as shown in the project structure.
- Now, use the HTML tags like textarea, button, div, head, body etc. to define the structure of the website.
- Add the styles to the HTML tags used to define the structure by selecting them with the help of given IDs and Classes.
- Utilise the speechSynthesis API of the global window object and the SpeechSynthesisUtterance to create a utteraance of the entered text.
- Next, use the speak() method of the speechSynthesis API to speak or play the created utterance as a speech.
- Handle the errors efficiently if user have not provided any text to convert.
Example: The below example will help you to understand the process of creating an text-to-speech converter using HTML, CSS, and JavaScript:
<!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 Converter</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="app-container">
<div class="headings-container">
<h1>Text to Speech Converter</h1>
<h3>Enter Text and Convert into Speech</h3>
</div>
<div class="interaction-container">
<textarea id="textToConvert"
placeholder="Enter text to convert into speech..."
id="" cols="35" rows="10"
class="text-control"></textarea>
<p class="error-para"></p>
<button class="btn" id="convertBtn">
Play Converted Sound
</button>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
body {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
.container {
height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-image: linear-gradient(90deg, #161578, #b81055);
}
.app-container {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
color: #fff;
}
.headings-container {
padding: 0 1rem;
}
.interaction-container {
display: flex;
align-items: normal;
justify-content: center;
flex-direction: column;
text-align: center;
padding: 0 1rem;
}
.text-control {
padding: 0.5rem;
margin: 2rem 0;
background-color: #3f464a52;
color: #fff;
border: 1px solid #fff;
border-radius: 10px;
}
.text-control:focus-visible {
outline: none;
}
.error-para {
color: red;
}
.btn {
padding: 0.8rem;
background-image: linear-gradient(90deg, #F4244C, #F57D4E);
border: 1px solid transparent;
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: all 0.25s;
}
.btn:hover {
padding: 1rem;
}
const text = document.getElementById("textToConvert");
const convertBtn = document.getElementById("convertBtn");
convertBtn.addEventListener('click', function () {
const speechSynth = window.speechSynthesis;
const enteredText = text.value;
const error = document.querySelector('.error-para');
if (!speechSynth.speaking &&
!enteredText.trim().length) {
error.textContent = `Nothing to Convert!
Enter text in the text area.`
}
if (!speechSynth.speaking && enteredText.trim().length) {
error.textContent = "";
const newUtter =
new SpeechSynthesisUtterance(enteredText);
speechSynth.speak(newUtter);
convertBtn.textContent = "Sound is Paying..."
}
setTimeout(() => {
convertBtn.textContent = "Play Converted Sound"
}, 5000);
});
Output: