Most languages they offer have a male and female option, though some like Mandarin Chinese have only one or the other. Not only can you choose the language in which your content is spoken, but you can also choose which voice speaks it. Later, we'll add the ability to choose the voice to use.īetween the tags at the bottom of the HTML we'll start by listening for the DOMContentLoaded event and then selecting some references to the elements we'll need.Amazon has its thumb in nearly every pie on the internet, so why not text to speech, too? Their Polly app through AWS is one of the most advanced options out there. 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.
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.
0 kommentar(er)
