SpeechSynthesis

By thevirtuoid on October 19, 2021 • ( Leave a comment )

Hi everyone, and welcome to another exciting edition of Boring JavaScript! Today, we’re going to teach your browser how to talk back to you using the SpeechSynthesis API.

Don’t like to read? Then watch the video.

You Talk Too Much, You Worry Me To Death

Using speechSynthesis is a very simple process. You tell it to start speaking some text, you can pause it, and you can stop it. Really. That’s about it.

Let’s take a look at some code and show you the different parts:

const sayIt = document.getElementById('say-it');
const textToSpeech = document.getElementById('text-to-speech');

const speakTheText = (event) => {
	const utterance = new SpeechSynthesisUtterance(textToSpeech.value);
	speechSynthesis.speak(utterance);
};

sayIt.addEventListener('click', speakTheText);

The purpose of this code is to listen for a click on an HTML button element (Line 10), and when clicked, execute the function called ‘speakTheText’ (Line 4). It is that function which contains everything we need.

Line 5 is where we create a ‘SpeechSynthesisUtterance’ of the text we wish to hear the browser say. This class creates a new ‘Utterance’, where, if we wish, we can set things like speed of the speech, the voicing, the volume, and so on (that is beyond the scope of this article).

Line 6 is where the action begins. We use the variable ‘speechSynthesis’ (located on the global ‘window’ variable) to give an action to the speech. Two things are important to note here:

‘speechSynthesis’ is a single global variable. It is associated with your browser, not the text you entered (that is the SpeechSynthesisUtterance). Therefore, if you have multiple utterances, each one must go through ‘speechSynthesis’ – meaning you cannot have two utterances speaking at the same time.
The ‘speak()’ method queues the utterance and doesn’t play it immediately. If there is another utterance playing, that will must be finished first before the one you added will be played. If there is no other utterance playing (or queued), your utterance will play immediately.

Let Me Stop You Right There.

You can also pause, resume, and stop the speaking from occurring. Those are real easy to use, and are part of the ‘speechSynthsis’ object. They are:

pause() – pauses the current utterance that was speaking.
resume() – if the current utterance is paused, this will resume the speaking.
cancel() – stops the speaking and importantly, removes ALL utterances from the queue.

And that’s pretty much it! Have fun.