Hey Everyone. Welcome to today’s tutorial. In today’s tutorial, you will learn how to create a text-to-speech converter. To create this project when it is HTML, CSS, and JavaScript.
This is an intermediate-level JavaScript project. If you are looking for a simple project you can check out this playlist here. This playlist consists of more than a hundred projects. The difficulty level of these projects varies from easy to quite complex. And these projects are suitable for all kinds of JavaScript learners which include JavaScript beginners to JavaScript experts.
Now coming back to our project. Text to speech converter app consists of a text area along with the submit button. The user has to enter some text into the textarea and hit on the submit button. The app will read out the text entered by the user. The user can also play and pause the speaker by hitting on the play pause toggle.
Video Tutorial:
If you are interested to learn through a video tutorial rather than during this blog post you can check out the video down below. Also, subscribe to my YouTube channel where I pause note tips tricks and tutorials regularly. Along with these tutorials and also possible multiple choice questions based on HTML CSS and JavaScript that will help you with your interviews.
Project Folder Structure:
Before we start coding let us take a look at the project folder structure. We create a project folder called text-to-speech converter. Inside this folder, we have 3 files. These files are index.html, style.css script.js. These files are the HTML document, the stylesheet and the script file.
HTML:
We begin with HTML code. First, copy the code below and paste it into an HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text To Speech Converter</title>
<!-- Font Awesome CDN -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="controls">
<button class="btn" id="resume">
<i class="fa-solid fa-play"></i>
</button>
<button class="btn" id="pause">
<i class="fa-solid fa-pause"></i>
</button>
</div>
<textarea
placeholder="Enter some text here.."
id="txt"
rows="6"
></textarea>
<button id="submit" type="submit">Submit</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Make to style this app using CSS. For this copy, the code provided to your below and paste it into your style sheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
background: linear-gradient(#7694fe, #4c7df8);
}
.container {
background-color: #ebf2ff;
width: 90%;
max-width: 37.5em;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
border-radius: 0.5em;
padding: 2em;
box-shadow: 0 1.87em 3.75em rgba(2, 14, 44, 0.2);
}
textarea {
font-size: 1em;
width: 100%;
border-radius: 0.5em;
padding: 1em;
resize: none;
border: 0.12em solid #040454;
}
#submit {
font-size: 1.2em;
display: block;
width: 50%;
position: relative;
margin: auto;
padding: 1em;
border: none;
background: linear-gradient(#7694fe, #4c7df8);
color: #ebf2ff;
border-radius: 0.3em;
cursor: pointer;
margin-top: 2em;
}
.controls {
width: 100%;
display: flex;
justify-content: flex-end;
margin-bottom: 1em;
}
.controls button {
display: block;
width: 3em;
height: 3em;
font-size: 1em;
border-radius: 0.3em;
cursor: pointer;
color: #4c7df8;
border: 0.12em solid #4c7df8;
background-color: transparent;
}
Javascript:
Finally, we implement the logic using JavaScript. To do this implement the following steps:
Create initial references
Add event listener to the submit button
Add event listener to the resume button
Function on Window load
Add event listener to the pause button
let text = document.getElementById("txt");
let submitBtn = document.getElementById("submit");
let resumeBtn = document.getElementById("resume");
let pauseBtn = document.getElementById("pause");
let audioMessage;
submitBtn.addEventListener("click", () => {
//set the text
audioMessage.text = text.value;
//speak the text
window.speechSynthesis.speak(audioMessage);
});
resumeBtn.addEventListener("click", () => {
pauseBtn.style.display = "block";
resumeBtn.style.display = "none";
//resume the audio if it is paused
if (speechSynthesis.pause) {
speechSynthesis.resume();
}
});
pause.addEventListener("click", () => {
pauseBtn.style.display = "none";
resumeBtn.style.display = "block";
//pause if speaking
speechSynthesis.speaking ? speechSynthesis.pause() : "";
});
window.onload = () => {
resumeBtn.style.display = "none";
if ("speechSynthesis" in window) {
audioMessage = new SpeechSynthesisUtterance();
} else {
alert("Speech Synthese is not supported");
}
};
That’s all for this tutorial. If you face any issues while creating this code you can download the source code by clicking on the download button below. Also, If you have any queries, suggestions, or feedback you can comment on them below.
Happy coding
