|How to Add Speech Recognition to your Website Or Blog|
Discover the best way to enable speech recognition in your website using the HTML5 web speech API. Your website website will be able to fill text areas and input form fields using their voice.
Get started by opening Google website on your desktop computer and you’ll find a little microphone icon embedded inside the search box. Click the icon, make a speech or say anything you like, your voice is quickly transcribed into words. Unlike earlier speech recognition products, you no longer have to train the browser to understand your speech and, for those who don’t know touch typing, speech is often a faster mode of input than the keyboard.
Does it sound like magic? However, know that you can also include the same speech recognition capabilities to your own website with a few lines of code. Visitors can search your website, or even fill forms, using just their voice. Both Google Chrome and Firefox browsers support the speech recognition API.
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 made public and activated few years now but it takes slightly more work now to include it in your website.
The Dictation App also uses the speech recognition API though it writes the transcribed text to textarea field instead of an input box.
- You can decide to change the value of the recognition.lang feature from ‘en-US’ to another language (like hi-In for Hindi or fr-FR for Français). See the complete list of supported languages.
- If the HTML form / search box is embedded inside an HTTPS website, the browser will not repeatedly ask for permission to use the microphone.