Fun with Browser APIs: Speech Synthesis
May 09, 2018
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
A simple example of this API goes like this:
const utter = new SpeechSynthesisUtterance(myTextField.value); utter.voice = window.speechSynthesis.getVoices()]; // 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.
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.
I’m a Brazilian front-end 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.