We'll start by connecting the form up to speak whatever you enter in the text input when you submit. Open up the HTML file you downloaded earlier in your text editor. Let's take the starter code we downloaded earlier and turn this into a small app where we can input the text to be spoken and choose the voice that the browser says it in. If you send more than one utterance to the speak method they will be spoken one after another. This queues up the utterance to be spoken and then starts the browser speaking. Then we passed the utterance to the speak method of the speechSynthesis object.

We created a SpeechSynthesisUtterance which contained the text we wanted to be spoken. Your browser will speak the text ' Hello, this is your browser speaking.' in its default voice. On any web page, open up the developer tools console and enter the following code: The Speech Synthesis APIīefore we start work with this small application, we can get the browser to start speaking using the browser's developer tools. Let's get started with the API by getting the browser to talk to us for the first time. Open the HTML file in your browser and you should see this: Make sure they are in the same folder and the CSS file is named style.css. Once you're ready, create a directory to work in and download this HTML file and this CSS file to it. A modern browser ( the API is supported across the majority of desktop and mobile browsers).If you want to build this application as we learn about the SpeechSynthesis API then you'll need a couple of things: Follow on to find out how to get your web application speaking back to you.

With the SpeechSynthesis API we can command the browser to read out any text in a number of different voices.įrom 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. The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition.

Wojak text to speech