Menu Home

SpeechSynthesis

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.

The Video

We did a video on this subject, which has an application reading, amazingly, Hamlet.

Shameless Plug

You can find us everywhere!

Check out all our videos at: https://www.boringjavascript.com

Check out everything at: https://www.thevirtuoid.com

Facebook: https://www.facebook.com/TheVirtuoid

Twitter: https://twitter.com/TheVirtuoid

YouTube: https://www.youtube.com/channel/UCKZ7CV6fI7xlh7zIE9TWqgw

Categories: Boring JavaScript Javascript

thevirtuoid

Web Tinkerer. No, not like Tinkerbell.

Creator of the game Virtuoid. Boring JavaScript. Visit us at thevirtuoid.com

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: