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.
