JavaScript can speak! Using the Speech Synthesis API

A very underutilized feature in browsers is text-to-speech. With the Speech Synthesis API, you can use JavaScript to “make the browser talk”. Here’s an example:

const message = new SpeechSynthesisUtterance(
    "Hi! This is an example of the Speech Synthesis API"
);
message.lang = "en-US";

const voices = speechSynthesis
    .getVoices()
    .filter(voice => voice.lang === "en-US");
message.voice = voices[0];

speechSynthesis.speak(message);

View example live: https://jsfiddle.net/holanicozerpa/4h2sf9gL/6/

As you can see in the example, one of the key parts of the Speech Synthesis API is the SpeechSynthesisUtterance class. An object of this class represents the text that the browser will later read aloud.

The other key part is the speechSynthesis object. It’s a global object that serves as the controller. This object, among other things, has a list of available voices. It also has the crucial speak method.

When you create the SpeechSynthesisUtterance, you can set the text in two ways. The first one is to put the text in the constructor (like in the example), and the second one is to use the text property.

While it’s not required, you should also set the language. This is to prevent international users listen to the text in the wrong language and incorrect pronunciation.

In Firefox and Chrome, setting the text and the language is enough. If you use the speechSynthesis.speak method, sending the utterance as a parameter, you will hear the text. But that probably won’t work on Safari. You should also set which voice to use.

Fortunately, you can use the speechSynthesis.getVoices() method to get the list of available voices. It returns an array of SpeechSynthesisVoice objects. Each of this object has a lang property, and you should pick a voice with the same language as the utterance object.

Lastly, you can associate the voice to the utterance object using the voice property. Once you do that, speech synthesis will also work in Safari.