Hello wizards, I hope you are doing great. Today in this blog you’ll learn how to create the "Text to Speech Convertor" project using HTML, CSS & JavaScript.
Preview
In the above video, you’ve seen the preview of the "Text to Speech Convertor" project and I hope now you are able to create this type of project. If not, I have provided all the HTML CSS and JavaScript code below.
Text to Speech Convertor [Source Code]
To get the following HTML, CSS & JS code for the Text to Speech Convertor project. You need to create three files one is a HTML file, second one is a CSS file and the another one is JS file. After creating these three files then you can copy-paste the given codes on your document.
Remember, you’ve to create a file with .html extension for HTML code, .css extension for CSS code and .js for JavaScript code.
You can also download all source code files from the given download button.
<!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 Convertor</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <h1>Text to Speech Convertor</h1> <textarea class="textarea"></textarea> <!-- speaker unicode --> <div class="speakerIcon">🔈</div> <button class="textToSpeechBtn">Text to Speech</button> </div> <script src="index.js"></script> </body> </html>
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { background: linear-gradient(45deg, #ff6200, #fd9346); display: flex; align-items: center; justify-content: center; height: 100vh; } .container { background-color: white; width: 400px; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 20px; padding: 20px; border-radius: 25px; } h1 { font-size: 24px; font-weight: 600; } .textarea { width: 100%; height: 150px; resize: none; outline: none; padding: 5px; font-weight: 500; } .speakerIcon { font-size: 50px; margin: -15px 0; } .textToSpeechBtn { width: 50%; height: 40px; background: linear-gradient(45deg, #ff6200, #fd9346); border: none; font-weight: 500; font-size: 16px; border-radius: 10px; opacity: 0.8; transition: all 0.1s ease-in-out; cursor: pointer; } .textToSpeechBtn:hover { opacity: 1; } .textToSpeechBtn:active { transform: scale(0.95); }
const textareaEl = document.querySelector(".textarea"); const textToSpeechBtnEl = document.querySelector(".textToSpeechBtn"); const speakerIconEl = document.querySelector(".speakerIcon"); let speaking = true; const textToSpeech = () => { const synth = window.speechSynthesis; const text = textareaEl.value; if (!synth.speaking && text) { const utterance = new SpeechSynthesisUtterance(text); synth.speak(utterance); } if (synth.speaking && speaking) { textToSpeechBtnEl.innerText = "Pause"; synth.resume(); speaking = false; speakerIconEl.innerHTML = "🔊"; } else { textToSpeechBtnEl.innerText = "Resume"; synth.pause(); speaking = true; speakerIconEl.innerHTML = "🔈"; } setInterval(() => { if (!synth.speaking && !speaking) { speaking = true; textToSpeechBtnEl.innerText = "Text to Speech"; } }); }; textToSpeechBtnEl.addEventListener("click", textToSpeech);