Open the Google web site on your personal computer and you’ll notice a tiny microphone icon embedded within the search box. Click the icon, say one thing and your voice is quickly transcribed into words. not like earlier speech recognition merchandise, you not ought to train the browser to know your speech and, for people who don’t apprehend typing, speech is commonly a quicker mode of input than the keyboard.

Sounds like magic, right? Well, did you recognize that you just also can embrace similar speech recognition capabilities to your own web site with many lines of code. guests will search your web site, or maybe fill forms, exploitation simply their voice. each Google Chrome and Firefox browsers support the speech recognition API.

Web Speech Recognition

Before we dive into the actual implementation, let’s play with a working demo. If you are viewing this page inside Google Chrome (desktop or mobile), click the voice icon inside the search box and say a search query. You may have allow the browser to access your microphone. When you are done speaking, the search results page will open automatically.
Add Voice Recognition to your Website
The HTML5 Web Speech API has been around for few years now but it takes slightly more work now to include it in your website.
Earlier, you could add the attribute x-webkit-speech to any form input field and it would become voice capable. The x-webkit-speech attribute has however been deprecated and you are now required to use the JavaScript API to include speech recognition. Here’s the updated code.

We have the CSS to place the microphone image inside the input box, the form code containing the input button and the JavaScript that does all the heavy work.