Friday , 24 May 2019

Add HTML5 Speech Recognition Search Box to Your Website or Blog

HTML5 Speech RecognitionHTML5 introduced many features for the creation of great websites. And in those awesome features one is Speech Recognition (Speech Input), yes we can easily input data through our microphone. So today you are going to learn that how to add speech input search box to your website or blog in few seconds. We just need to add three words to our search box source code and every user who is using Chrome as web browser will be able to input data through his/her microphone. So let’s add a search box which gets data through your microphone. One thing you should remember that it only works on Google Chrome, users who are using Chrome as web browser they will see a little microphone icon in the search box while others will see a simple search box. Also read my article about London Olympic Google Doodles points trick.

How to Add Speech Recognition Search Box to Website

If you have a website then definitely there is a search box to search queries for your website users. So we are going to update your search box to speech input search box where users can easily speech and text will be saved in search box then they just have to press Enter and that’s it. You can use this method to add this speech input search box to your WordPress blog. Copy the code below and paste it where you want to show your speech recognition search box.

<form method="GET" action="action.php">
<input type="text" name="search" size="30" x-webkit-speech />
<input type="submit" value="Search" />
  • Change GET to POST if you want POST method for searching.
  • Change action.php with your action file which searches the keywords for you on your website.
  • Simply if you dont want to copy/paste the complete code I shared above then just add x-webkit-speech to your input tag where users type the keywords.
  • Replace Search with the text which you want to show on search button.

How to Add Speech Recognition Search Box to Blogger

If you are thinking to add voice recognition search box to your blog on Blogger then it is also very simple I have coded everything you just need to follow the steps.

1. Go to Blogger > Layout.
2. Click on Add a Gadget.
3. Select HTML/JavaScript.
4. Copy the code below:
<form method=”get” action=”/search”>
 <input type=”text” name=”q” size=”30″ x-webkit-speech />
 <input type=”submit” value=”Search” />
5. Paste it in the selected gadget (HTML/JavaScript) and click on Save and it’s done.

How to Use Voice Recognition Search Box

All you need is to just click on little microphone icon in the search bar then speak your word or words and stop, Google Servers will process it and will show the text in the search field and you just need to press Enter and your query will be searched.


You can speak a sentence or a word it doesn’t matter and some times it doesn’t get word so it shows wrong but mostly it works well. And again yet it only works on Chrome and not any other web browser users who are using Google Chrome will see microphone icon others will see a simple search box. And you can add HTML5 speech recognition search box to any website or blog, if you are going to add it to WordPress blog then simply follow the method which I shared above about adding it to website.

Leave a Reply