

Run the code and, once you've given the permission, say something into your microphone. When you run that code Chrome will ask for permission to use your microphone and then, if your page is being served on a web server, remember your choice. The SpeechRecognition APIīefore we build speech recognition into our example application, let's get a feel for it in the browser dev tools.
#Sample google speech to text api how to#
With that in place, let's see how to get the browser to listen to and understand us. Make sure the files are in the same directory and then open the HTML file in the browser. Once you have those prepared, create a new directory to work in and save this starter HTML and CSS to that directory. We're going to build an example app to experience the API, if you want to build along you will need:Īnd that's it, we can do this with plain HTML, CSS and JavaScript. Let's see how the API works and what we can build with it. With speech recognition in the browser you can enable users to speak to your site across everything from a voice search to creating an interactive bot as part of the application. In 2018, Google reported that 27% of the global online population is using voice search on mobile.

We previously investigated text to speech so let's take a look at how browsers handle recognising and transcribing speech with the SpeechRecognition API.īeing able to take voice commands from users means you can create more immersive interfaces and users like using their voice. The Web Speech API has two functions, speech synthesis, otherwise known as text to speech, and speech recognition, or speech to text.
