The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition. With the SpeechSynthesis API we can command the browser to read out any text in a number of different voices.

From a vocal alerts in an application to bringing an Autopilot powered chatbot to life on your website, the Web Speech API has a lot of potential for web interfaces. Follow on to find out how to get your web application speaking back to you.

What you'll need

If you want to build this application as we learn about the SpeechSynthesis API then you'll need a couple of things:

A modern browser (the API is supported across the majority of desktop and mobile browsers)

A text editor

Once you're ready, create a directory to work in and download this HTML file and this CSS file to it. Make sure they are in the same folder and the CSS file is named style.css . Open the HTML file in your browser and you should see this:

Let's get started with the API by getting the browser to talk to us for the first time.

The Speech Synthesis API

Before we start work with this small application, we can get the browser to start speaking using the browser's developer tools. On any web page, open up the developer tools console and enter the following code: