Introduction
With advancements in web technologies, building interactive web applications has become increasingly straightforward. One such feature is text-to-speech (TTS), which converts written text into spoken words. This technology can be incredibly useful in various applications, from accessibility features for visually impaired users to providing audio feedback in educational apps.
In this blog post, we will walk through a step-by-step guide to building a simple Text-to-Speech app using HTML, CSS, and JavaScript. This app will allow users to enter text into an input field and listen to the spoken version of the text when they click a button.
Prerequisites
Before we dive into coding, you should have a basic understanding of:
- HTML for structuring content
- CSS for styling
- JavaScript for functionality
No advanced knowledge is required, as we’ll keep the project simple and easy to follow.
Project Structure
We’ll organize our project into three main files:
index.html– The HTML file for the app structurestyle.css– The CSS file for stylingscript.js– The JavaScript file for functionality
Step 1: Setting Up the HTML Structure
First, create an index.html file to define the basic structure of the app. This file will include a text input area and a button to trigger the speech.
<!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 in JavaScript</title>
<link rel="stylesheet" href="styles.css">
<script src="script.js" type="module"></script>
</head>
<body>
<div class="container">
<label for="text">Text to speak:</label>
<textarea id="text"></textarea>
<button id="speak">Speak Text</button>
</div>
</body>
</html>
Step 2: Styling with CSS
Next, create a style.css file to style our app. We’ll use some basic styles to center the content on the page and make it look appealing.
*{
box-sizing: border-box;
margin: 0;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container{
background-color: #4FBDBA;
display: grid;
gap: 20px;
width: 500px;
max-width: calc(100vw - 40px);
padding: 30px;
border-radius: 10px;
font-size: 1.2rem;
}
#text{
display: block;
height: 100px;
border-radius: .5rem;
font-size: 1.5rem;
border: none;
resize: none;
padding: 8px 10px;
outline: 2px solid rgba(120,120,120,0.623);
}
button{
padding: 10px;
background: #072227;
color: #fff;
border-radius: .5rem;
cursor: pointer;
border: none;
font-size: 1rem;
font-weight: bold;
}
Step 3: Adding Functionality with JavaScript
Finally, we’ll write the JavaScript code to add functionality to our app. Create a script.js file and add the following code:
const textEL = document.getElementById('text');
const speakEL = document.getElementById('speak');
speakEL.addEventListener('click', speakText);
function speakText() {
// stop any speaking in progress
window.speechSynthesis.cancel();
const text = textEL.value;
const utterance = new SpeechSynthesisUtterance(text);
window.speechSynthesis.speak(utterance);
}
Explanation of the JavaScript Code:-
- Event Listener: We add a click event listener to the “Speak” button. When clicked, it triggers a function to read the text aloud.
- Getting Text Input: We fetch the value from the text area using
document.getElementById('text-input').value. - SpeechSynthesis Check: We check if the
speechSynthesisfeature is supported in the user’s browser. - Creating SpeechSynthesisUtterance: We create a new
SpeechSynthesisUtteranceobject with the text input as its parameter. - Speaking the Text: Finally, we call the
speak()method of thespeechSynthesisobject to convert the text to speech.
Step 4: Testing the Application
Now that we have our files set up, you can open index.html in a web browser. Enter some text into the text area, click the “Speak” button, and listen as your text is read aloud!
