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; 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
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
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.