JavaScript Tutorial

A few days ago I noticed something I had never noticed before in one of my Medium articles, the ‘listen’ button at the top of the post. When I clicked it my article was read aloud by the browser. I thought this was a cool feature and wondered how I could build something like this myself.

Research

A bit of research led me to the Web Speech API. This API has two different components. Speech Recognition and Speech Synthesis. Today we’re only interested in the latter.

Additionally, I came across the browser support for this API. We can use the Speech API in all modern browsers without a problem.

Features

The SpeechSynthesis API allows us to instruct the browser to convert passed-in text to speech. We are able to pause/resume this speech at will and can control the voices, speaking rate, and pitch.

The available voices depend on the browser and operating system that you are currently using.

Let’s go through the JavaScript code and see how the demo works.

Checking Browser Support

At the start of this script, we check if the browser supports the SpeechSynthesis API. If the browser does not support this API our entire script will not work, so we exit out of the functionality.

Setting the Browsers Voice Options

Here we loop through the browser-provided voices and create an option for each of them in our select. If there are no voices available in the browser an alert is thrown and the method does nothing.

Getting the Selected Voice Option

Get the first selected option from the select and use its name to find the option from the voices array.

Playing and Pausing the Text to Speech

When the user clicks on the play button we check if the browser's SpeechSynthesis object is currently in a paused state. If it is, we simply resume speaking.

If it is not in a paused state we create a new instance of SpeechSynthesisUtterance. We pass in the text and selected voice, and call the speak method.

When the user clicks on the pause button we simply call the pause() method on the SpeechSynthesis API.

Additional Options

We have a number of other options within this API under our control.

• Pitch — Get and set the pitch of the voice, making it deeper or higher.
• Rate — Get and set the speed at which the text will be spoken.
• Volume — Get and set the volume at which the text will be spoken.
• Lang — Get and set the language of the text that will be spoken.

Resources

Conclusion

The Web Speech API is a very interesting addition to a web developer’s toolkit. I hope this demo and explanation were useful to you. Let me know in the comments what you would use this API for!