Text to Speech Converter using JavaScript

Welcome, fellow coders! Are you ready to learn a new and exciting project using JavaScript that will add a useful tool to your coding arsenal? In this tutorial, we will be creating a Text-to-Speech Converter using JavaScript. This project will not only teach you how to manipulate the DOM and handle events in JavaScript, but it will also introduce you to the Web Speech API, a powerful tool that enables web developers to add speech recognition and synthesis capabilities to their applications. By the end of this tutorial, you will have a fully functional text-to-speech converter that you can add to your portfolio and impress your colleagues with. So, let’s get started and see what we can create!

Before we start here are some more JavaScript Projects you might like to create –

I would recommend you don’t just copy and paste the code, just look at the code and type by understanding it.

HTML Code

Starter Template

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- CSS -->
    <link rel="stylesheet" href="style.css">

    <title>Text to Speech Converter using JavaScript - Coding Torque</title>
</head>

<body>
    <!-- Further code here -->

    <script src="script.js"></script>
</body>

</html>

Paste the below code in your `<body>` tag.

<div class="wrapper">
    <header>Text To Speech</header>
    <form action="#">
        <div class="row">
            <label>Enter Text</label>
            <textarea></textarea>
        </div>
        <div class="row">
            <label>Select Voice</label>
            <div class="outer">
                <select></select>
            </div>
        </div>
        <button>Convert To Speech</button>
    </form>
</div>

Output Till Now

CSS Code

Create a file style.css and paste the code below.

/* Import Google Font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: linear-gradient(90deg, #4e54c8, #8f94fb);
}

.wrapper {
  width: 370px;
  padding: 25px 30px;
  border-radius: 7px;
  background: #fff;
  box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.05);
}

.wrapper header {
  font-size: 28px;
  font-weight: 500;
  text-align: center;
}

.wrapper form {
  margin: 35px 0 20px;
}

form .row {
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
}

form .row label {
  font-size: 18px;
  margin-bottom: 5px;
}

form .row:nth-child(2) label {
  font-size: 17px;
}

form :where(textarea, select, button) {
  outline: none;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 5px;
}

form .row textarea {
  resize: none;
  height: 110px;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid #999;
}

form .row textarea::-webkit-scrollbar {
  width: 0px;
}

form .row .outer {
  height: 47px;
  display: flex;
  padding: 0 10px;
  align-items: center;
  border-radius: 5px;
  justify-content: center;
  border: 1px solid #999;
}

form .row select {
  font-size: 14px;
  background: none;
  color: #767676;
}

form .row select::-webkit-scrollbar {
  width: 8px;
}

form .row select::-webkit-scrollbar-track {
  background: #fff;
}

form .row select::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 8px;
  border-right: 2px solid #ffffff;
}

form button {
  height: 52px;
  color: #fff;
  font-size: 17px;
  cursor: pointer;
  margin-top: 10px;
  background: #4e54c8;
  transition: 0.3s ease;
}

form button:hover {
  background: #363dc6;
}

@media (max-width: 400px) {
  .wrapper {
    max-width: 345px;
    width: 100%;
  }
}

Output Till Now

text to speech converter using javascript

JavaScript Code

Create a file script.js and paste the code below.

const textarea = document.querySelector("textarea"),
    voiceList = document.querySelector("select"),
    speechBtn = document.querySelector("button");

let synth = speechSynthesis,
    isSpeaking = true;

voices();

function voices() {
    for (let voice of synth.getVoices()) {
        let selected = voice.name === "Google US English" ? "selected" : "";
        let option = `<option value="${voice.name}" ${selected}>${voice.name} (${voice.lang})</option>`;
        voiceList.insertAdjacentHTML("beforeend", option);
    }
}

synth.addEventListener("voiceschanged", voices);

function textToSpeech(text) {
    let utterance = new SpeechSynthesisUtterance(text);
    for (let voice of synth.getVoices()) {
        if (voice.name === voiceList.value) {
            utterance.voice = voice;
        }
    }
    synth.speak(utterance);
}

speechBtn.addEventListener("click", (e) => {
    e.preventDefault();
    if (textarea.value !== "") {
        if (!synth.speaking) {
            textToSpeech(textarea.value);
        }
        if (textarea.value.length > 80) {
            setInterval(() => {
                if (!synth.speaking && !isSpeaking) {
                    isSpeaking = true;
                    speechBtn.innerText = "Convert To Speech";
                } else {
                }
            }, 500);
            if (isSpeaking) {
                synth.resume();
                isSpeaking = false;
                speechBtn.innerText = "Pause Speech";
            } else {
                synth.pause();
                isSpeaking = true;
                speechBtn.innerText = "Resume Speech";
            }
        } else {
            speechBtn.innerText = "Convert To Speech";
        }
    }
});

Written by: Piyush Patil

Code Credits: @danishlaeeq

If you have any doubts or any project ideas feel free to Contact Us

Hope you find this post helpful💖