Convert Text to Speech in JavaScript

In this tutorial, I will explain how to convert text to speech in JavaScript using SpeechSynthesisUtterance.

We can simply do this in JavaScript but to make it easier to understand we will show this by taking input text from an HTML form.

First of all, we have to create a simple web form using HTML. There should be an input box and a button. In the input box user can enter the text that they want to convert into speech. Users need to click the button to convert text to speech.

<form id="codespeedy">
            <input type="text" id="input" placeholder="Enter Text Here" />
            <button type="submit" id="convert">Speak</button>
</form>

In the above program, I have created a form element with id codespeedy. Inside the form element, I have created input tag with id input to input the text which I want to convert into speech. And then a button that can be clicked to convert the text into speech.

Let’s move to the JavaScript part. Following two interfaces will be used to convert text into speech.

• SpeechSynthesisUtterance: This interface essentially specifies how to speak, what to speak and what the voice that is actually being spoken. Lang, pitch, rate, text, voice, and volume are some properties of SpeechSynthesisUtterance.
• SpeechSynthesis: This interface retrieves information of synthesis voices that are available on the device. Speak, getVoices, pause, resume, and cancel are some methods of SpeechSynthesis.

Here’s a simple JavaScript code

const textInputField = document.querySelector("#input")
const form = document.querySelector("#codespeedy")
const utter = new SpeechSynthesisUtterance()
const synth = window.speechSynthesis

form.onsubmit = (event) => {
    event.preventDefault()
    ourText = textInputField.value
    utterThis.text = ourText
    synth.speak(utterThis)
    textInputField.value = ""
}

In the above code, I have declared variable textInputField to access the value of the input tag that I created in the HTML code.

Then I declared another variable form that will select form by its id codespeedy and submit when the user clicks speak button.

SpeechSynthesisUtterance object used to speak the speech and  SpeechSynthesis object performs speech service from the text in the browser.

After clicking the speak button and submitting the form event.preventDefault() prevents from reloading the browser.

ourText = textInputField.value to get input from the user, whatever text user puts in the input to convert into speech.

utterThis.text sets the user’s input value for utter.

synth.speak(utterThis)  to utter whatever input is given by the user.

textInputField.value after submitting the form resets the text input field.

Properties in SpeechSynthesisUtterance

This is an interface of  Web Speech API which represents a speak request. Now we will see some properties of SpeechSynthesisUtterance and how they works when we need to convert a text to speech.

• text: The text that we want to be spoken can be set by this property. This property allows you to set the text inside the code instead of taking input.

  utter.text = "Hey Codespeedy";

• lang: This property allows us to specify the language of the output (utterance).

  utter.lang = "en";

• volume: This property gives us the ability to adjust the volume of the output (utterance). The range of the volume property is from 0 to 1. If you don’t set the property the default value will be 1.

  utter.volume = 0.5;

• rate: This property sets the speed of the utterance or defines at which speed the text will be spoken. The range of the rate property is from 0.1 to 10. The default value is 1.

  utter.rate = 3;

• pitch: This property controls the highness and lowness of the sound(utterance). The range of the pitch property is from 0 to 2. The default value of the pitch property is 1.

  utter.pitch = 1.5;

• voice: Voice property defines which voice will be used to utterance (speak).

  utter.voice = getVoices()[0];

  getVoices() is a method of SpeechSynthesis interface, which returns a list of available voices on the current user’s device.