How To Convert Text to Speech In JavaScript

Reading Time: 3 minutes

Ever wondered what it would be like to build your own screen reader? With the Web Speech API, this is an achievable task. In this article, we’ll be building a basic text-to-speech reader. let’s take a look at how can we convert text to speech in javaScript.

Prerequisites

To follow along with this blog, you should have:

A basic understanding of HTML and JavaScript.
A code editor. I’ll be using Visual Studio Code.
A browser to view the webpage, preferably Google Chrome or Mozilla Firefox.

Create HTML Page

I am going to create a basic HTML page with a single input element and 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" />
    http://./index.js
    <title>Text to Speech</title>
  </head>
  <body>
    <form>
      <div class="textField">
        <label>Enter text</label>
        <input type="text" id="text" required />
      </div>
      <button type="submit">
        <img src="/assest/noise.png" />
      </button>
    </form>
  </body>
</html>

In the above HTML code, I created a single Input Fied with id “text”. We will use this id to get the value of this field.

The JavaScript file

Now, let’s create a Js file

var speech = new SpeechSynthesisUtterance();

if ("speechSynthesis" in window) {
  // Speech Synthesis supported 🎉
} else {
  // Speech Synthesis Not Supported 😣
  alert("Sorry, your browser doesn't support text to speech!");
}

function TexttoSpeech() {
  const text = document.getElementById("text").value;
  if (text.trim() != "") {
    speech.text = text;
    speech.rate = 1;
    speech.pitch = 10;
    speech.lang = "en-US";
    speechSynthesis.speak(speech);
  } else {
    alert("Please Enter Text");
  }
}

document.querySelector("button").addEventListener("click", () => {
  TexttoSpeech();
});

In the above code, we create a function that will attach to the button so that when will we click on the button the text will speak by the system.

Let’s understand the code line by line ,

var speech = new SpeechSynthesisUtterance();

So in this line, we have created an instance of SpeechSynthesisUtterance WebApi. by this we can configure this instance with various properties as you can see in the code text, pitch, rate, and lang.

if ("speechSynthesis" in window) {
  // Speech Synthesis supported 🎉
} else {
  // Speech Synthesis Not Supported 😣
  alert("Sorry, your browser doesn't support text to speech!");
}

By this snippet of code, we are checking whether Speech Synthesis is supported by the browser or not. If not then we will alert the message.

Let’s understand TexttoSpeech Function

function TexttoSpeech() {
  const text = document.getElementById("text").value;
  if (text.trim() != "") {
    speech.text = text;
    speech.rate = 1;
    speech.pitch = 10;
    speech.lang = "en-US";
    speechSynthesis.speak(speech);
  } else {
    alert("Please Enter Text");
  }
}

By the above code, you can easily understand we are configuring the things for text-speech.

First, we are getting texts from the input field by the below snippet of code.

const text = document.getElementById("text").value;

Then we are checking for whether the text value is empty or not if not then we are setting basic things for speech text.

For covert Speech, to Text, we need to use speechSynthesis Web API and call speak function to speech text.

speechSynthesis.speak(speech);

Let’s recap

In this blog we have learned, How can we convert Text to Speech In JavaScript.We have explored SpeechSynthesisUtterance Web API and how to use this API.

We created an HTML page with a single input field and button and we also created a new JavaScript file and linked it to the HTML file.
We created a new SpeechSynthesisUtterance object and a function that converts text to Speech.

Conclusion

While the Web Speech API is still experimental technology, SpeechSynthesisUtterance is one of them. it’s always fun finding out how far we can push the web technologies to solve new challenges that we face. I tried to make this blog seem easy to follow and I hope you definitely learn something new today.