J. Pedro Ribeiro

Hello! My name is J. Pedro Ribeiro.
I’m a Brazilian web designer & front-end developer.
This website features some of my latest projects and my thoughts on html, css, design and anything web related.

2018 May

Fun with Browser APIs: Speech Synthesis

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

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.