J. Pedro Ribeiro

Fun with Browser APIs: Speech Synthesis

May 09, 2018

On the previous post, I showed how you can use the Web Speech API to translate speech to text using Speech Recognition. Today, I'm going to talk about the the API's other interface: Speech Synthesis.

What is it about?

This interface enables synthetic voices to read plain text. The list of synthetic voices depends on which device you're using and you can get a list of the available ones by running the getVoices method.

A simple example of this API goes like this:

const utter = new SpeechSynthesisUtterance(myTextField.value); utter.voice = window.speechSynthesis.getVoices()[0]]; // Picked the 1st available voice, which is also default window.speechSynthesis.speak(utter);

You can also set other properties of your SpeechSynthesisUtterance instance, like pitch, volume, rate, volume and more.

Conclusion

On this GitHub repo you can see the full implementation of the example above including a selector for all synthetic voices available on your device.


J. Pedro Ribeiro

Hello!
I’m a Brazilian frontend developer living in London. This website features some of my latest projects and my thoughts on anything web related.
You can find me on Twitter, Instagram, and LinkedIn.
Wanna talk? Send me a message.