Text to Speech Converter | How to Create Text to Speech Convertor
Hi to all, in this video I am going to tell you all about how to create Text to Speech Converter easily in just few minutes by using HTML, CSS and JavaScript.
Text To Speech is one type of technology which activates your text to speech sounds.
Here, you can easily convert your text in to speech and you can also pause and resume the speech voice by just clicking on the button and this will be visible only if you enter more than 80 characters in the text box and you can change this from the code based on your business requirements.
.
Mainly, we are not using any external links or API to convert text to speech functionality and here we are just using HTML, CSS and Vanilla JavaScript.
Share this blog to the people who are working on JavaScript's and AI and without any late we will see the step by step process of how to create the text to speech converter.
Steps to Create Text to Speech Converter
Below are the detailed steps to create text to speech converter tool:
Open Code Editor
First of all, you have to open any code editor and here I am using VS code to modify the code.
After you open any one code editor, here you have to create a new folder with any name, under that you have to create few files as mentioned below.
- Create index.html file and the extension of the file should be in .html format only.
- Create style.css file and the extension of the file should be in .css format only.
- Create script.js file and the extension of the file should be in .js file format only.
Adding HTML Code
Copy below provided HTML code and paste the copied HTML code inside the index.html file.
After adding the code, don't forget to save the file.
<html>
<head>
<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>
Adding CSS Code
Copy below provided CSS code and paste the copied CSS code inside the style.css file.
After adding the code, don't forget to save the file.
* {
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: grey;
}
.container {
position: relative;
max-width: 350px;
width: 100%;
background: #87a5f8;
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;
}
Adding JavaScript Code
Copy below provided JavaScript code and paste the copied JavaScript code inside the script.js file.
After adding the code, don't forget to save the 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);
You can modify the above provided code, based on your requirement and for changing colors and styles, you can modify CSS and for changing voices, you have to modify JavaScript as per your business requirement.
Live Demo
Conclusion
I hope that you all have understood about creating text to speech converter tool easily by suing HTML, CSS and JavaScript.
If you get any error or issues with the code, please reach us through our contact page or mail us.
