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.
Steps To Add Speech Recognition :
Step 1 : Go the ‘Editor’ section of your WordPress website which is located in the ‘Appearance’ section.
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.
Step 3 : Now locate the line with the input element, which is similar to the following:
First of all, we’ll simplify the above code as follow:
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.
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.
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:
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:
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.