Easy Way To Add Speech Recognition To your Website
WordPress

How To Add Speech Recognition To Your Website

If you’ve used the speech recognition system of Google search engine, you will know that a microphone icon is displayed in the search field and clicking on it activates the speech recognition mode. It just follows a simple progress path, firstly google gets the information from the microphone and then it starts recognizing those words that we are looking for and then returns the results. No typing is required. Well in this article we will show you the easiest way to add the same speech recognition system to search your WordPress blog.

We are going to explain you in a step wise manner so that it could be easier to understand.


Also See: How To Boost Up Your Slow WordPress Blog Or Website

Steps To Add Speech Recognition :

Step 1 :  Go the ‘Editor’ section of your WordPress website which is located in the ‘Appearance’ section.

How To Add Speech Recognition To Your Website

Step 2 : Now click on the ‘searchform.php’ file which is displayed in the right side bar. If have many files in your right bar then just press Ctrl+F and type searchform.php.

How To Add Speech Recognition To Your Website

Step 3 : Now locate the line with the input element, which is similar to the following:

How To Add Speech Recognition To Your Website

First of all, we’ll simplify the above code as follow:

How To Add Speech Recognition To Your Website

Now just add ‘x-webkit-speech’ at the end of the label input text, Make sure that your code is similar to this after this change.

How To Add Speech Recognition To Your Website

There, that’s all. Easy, right? Ah! But Currently it only works in Google Chrome Not using Google Chrome? Well , you should install it right away and should be your default browser in order to enjoy the best user experience and utilities like this.

Also See: The Best WordPress Plugins That Every WordPress Blogs Should Have

Next? Surely you were waiting for more because it seemed like too easy. OK, then we go for more.


So far, all the words you speak through your microphone were displayed in the search field, but the search did not start until you press the Enter key. This gave us the opportunity to correct the text if not transcribed correctly.

Let’s look at how to make search start automatically after dictating the words, avoiding press Enter.

We start from the previous line:

How To Add Speech Recognition To Your Website

This will take care of detecting when you finished dictating the words to search and then submits the form automatically. The resulting line is as follow:

How To Add Speech Recognition To Your Website

That’s it. Enjoy and check the performance of your voice search. In case of any difficulty, do contact us either by commenting or Mail.

Remember that it only works in Google Chrome and you obviously need a microphone connected to your computer.

As this method is valid for all types of forms in a webpage, just use ‘x-webkit-speech’ and ‘onwebkitspeechchange’ in any field where you enter the search terms manually.

Also See: How To Choose A Perfect WordPress Theme For Your Website

Also See: How To Write Good Content For Your Blog That Drives Huge Traffic

Leave a Reply

Your email address will not be published. Required fields are marked *