Written By:
iamabhishek
8 minute read
JavascriptText to SpeechWeb Development

JavaScript Text to Speech using SpeechSynthesis Interface

Posted in Programming   LAST UPDATED: JUNE 8, 2020

To add a text to speech feature on your webpage using Javascript, we need to use the Web Speech API, which can be used to synthesis speech which is converting text to speech, and we can also use it to recognize speech to convert speech to text. We will cover the speech to text in our next post, for this one, we will learn how we can convert text to an audio in JavaScript.

Javascript text to speech example

We will be using the following interfaces/properties in this tutorial:

  1. SpeechSynthesis

  2. SpeechSynthesisUtterance

  3. window.speechSynthesis

Let us see what are these, one by one.

JavaScript SpeechSynthesis Interface

This is the main controller interface for the speech synthesis service which controls the synthesis or creation of speech using the text provided. This interface is used to start the speech, stop the speech, pause it and resume, along with getting the voices supported by the device.

Following are the methods available in this Interface:

speak(): Add the utterance(object of SpeechSynthesisUtterance) in the queue, which will be spoken when there is no pending utterance before it. This is the function, we will be using too.

pause(): To pause the current ongoing speech.

resume(): To resume the paused speech.

cancel(): To cancel all the pending utterances or speech created, which are not yet played.

getVoices(): To get list of all supported voices which the device supports.

JavaScript SpeechSynthesisUtterance Interface

This is the interface in which we actually create the speech or utterance using the text provided, setting a language type, volume, pitch of the voice, rate of speech, etc. Once we have created an object for this interface, we provide it to the SpeechSynthesis object's speak() method to play the speech.

Following are the properties provided by this interface to configure it(we have used all of them in our code example):

lang: To get and set the language of speech.

pitch: To get and set the pitch of the voice at which the utterance will be spoken.

rate: To get and set the speed at which the utterance will be spoken.

volume: To get and set the volume.

text: To get and set the text which has to be spoken.

voice: To get or set the voice to be used.

JavaScript window.speechSynthesis Property

This property of the Javascript window object is used to get the reference of the speech synthesis controller interface, on which we call the speak() method.

Now, let's jump into the code, to see all this in action.

NOTE: This feature is an experimental feature and is supported in limited browsers but the latest versions of Chrome, Firefox, Safari and Opera should support this.

JavaScript Text to Speech

Here is the JS code sample, which shows how to use the SpeechSynthesisUtterance and SpeechSynthesis interfaces to initialize and configure the utterance that will be spoken aloud in the browser.

let speech = new SpeechSynthesisUtterance();

speech.lang = "en-US";
speech.text = msg;
speech.volume = 1;
speech.rate = 1;
speech.pitch = 1;                

window.speechSynthesis.speak(speech);

Now let's see the code in action below.

In the code above, you will see all the properties. I would recommend you to play around with properties and methods to see how this works.

Conclusion:

In this tutorial we learned how to convert text to speech in your webpage using JavaScript's Web Speech API. I hope you enjoyed this tutorial. If you faced any problem while implementing this, do share it with us in the comment section below and we will try to help you out.


IF YOU LIKE IT, THEN SHARE IT

RELATED POSTS