We will be using the following interfaces/properties in this tutorial:
Let us see what are these, one by one.
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.
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
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.
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.
Here is the JS code sample, which shows how to use the
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.