Creating a project that converts any text into speech could be an interesting and skill-pushing project while learning HTML CSS & JavaScript
Tutorial of Text to Speech Converter in HTML CSS & JS
As you have seen in this video tutorial of Text to speech converters. This converts any text into speech. If you want to add a voice option and accent in this Text to Speech Converter then you can visit the link also I have created a blog on language translator.
I would highly recommend you to watch the given video tutorial of Text to Speech Converter which helps you to create this project easily step by step. Also, I have tried to explain every code by doing comments on it.
Steps for Creating a Text-to-Speech Converter in JavaScript
To create a Text-to-Speech Converter using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:
- Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
- Create an
index.htmlfile. The file name must be index and its extension .html - Create a
style.cssfile. The file name must be style and its extension .css - Create a
script.jsfile. The file name must be script and its extension .js
Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download all the source code files of the Calculator, by clicking on the given download button.
First, paste the following codes into your index.html file.
<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<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 Converter</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<header>Text to Speech Converter</header>
<textarea placeholder="Enter text"></textarea>
<button>Convert to Speech</button>
</div>
<script src="script.js" defer></script>
</body>
</html>
Second, paste the following codes into your style.css file.
/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #87a5f8;
}
.container {
position: relative;
max-width: 350px;
width: 100%;
background: #fff;
border-radius: 12px;
padding: 20px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
header {
font-size: 18px;
color: #333;
font-weight: 500;
text-align: center;
}
textarea {
width: 100%;
height: 180px;
border-radius: 8px;
margin: 20px 0;
padding: 10px 15px;
resize: none;
outline: none;
border: 1px solid #aaa;
}
button {
width: 100%;
padding: 14px 0;
border: none;
border-radius: 8px;
color: #fff;
background: #6e93f7;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background: #4070f4;
}
Third, paste the following codes into your script.js file.
const textarea = document.querySelector("textarea");
const button = document.querySelector("button");
let isSpeaking = true;
const textToSpeech = () => {
const synth = window.speechSynthesis;
const text = textarea.value;
if (!synth.speaking && text) {
const utternace = new SpeechSynthesisUtterance(text);
synth.speak(utternace);
}
if (text.length > 50) {
if (synth.speaking && isSpeaking) {
button.innerText = "Pause";
synth.resume();
isSpeaking = false;
} else {
button.innerText = "Resume";
synth.pause();
isSpeaking = true;
}
} else {
isSpeaking = false;
button.innerText = "Speaking";
}
setInterval(() => {
if (!synth.speaking && !isSpeaking) {
isSpeaking = true;
button.innerText = "Convert to Speech";
}
});
};
button.addEventListener("click", textToSpeech);
If you face any difficulties while creating your Text to Speech Converter or your code is not working as expected, you can download the source code files for this Text to Speech Converter for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
