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.
If you liked this article, you'll love my JavaScript Newsletter.
Every other Monday, I'll send you easy and actionable steps to level up your JavaScript skills. Check it out: https://nicozerpa.com/newsletter
Top comments (0)