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.
Preview Image:
Preview of text-to-speech converter
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:
Javascript
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);
}); |
HTML
<!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 Using
HTML, CSS, and JavaScript.
</h1>
<h3>
Enter any text of your choice
and change it into speech just by
a click to the button.
</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>
|
CSS
@import url(
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;
} |
Output: