Switch To HTML5 and Start Using Voice Search In Blogger Sites

It's common to find a site/blog with custom search engine installed in their pages. Custom search engine is same as search engine only, but it's algorithm is quite simpler than a search engine is. It's called as a custom search engine because it just search the thing from your sites/blogs pages only.

You can measure it's importance from the fact only that all the major blogs/sites have their own custom search engine installed in their all their pages. It's importance is as a plugin serving better navigation to your readers and visitors. It's also handy thing for you too because it can bring good traffic also.

SEO Fact

There is a group of unique visitors who just wishes to fetch out one single post from your blog. Suppose you have published near about 500+ posts in your site, then may be your visitor would not compromise his time in searching whole of the thing to find out just one article for which he has been crawled from Google to your site.

In such case you may not want to fed up your visitor. To avoid this you install custom search engine in your blog.

Custom search engine have a text area where he writes text using his keyboard and then press enter or click on the search button after mentioning his query in text area given. But what if he can enter his query just by speaking the words?

Yes it is possible now to enter your queries/feedbacks using small piece of Voice Input Code in your sites.

How It Works?

It works along with a small piece of code of javascript which we sill see soon as we proceed ahead.

As click on mic and speak up, the voice recognization tool starts to analyze the words and letters you have spoken and then it transcribed text will be sent to the mic input. But with the help of javascript function a copy of the transcribed text is instantly sent to the text input area.

Get The Code

Javascript & HTML

<script id='speech-input' type='text/javascript'>
  function transcribe(words) {
    document.getElementById(&quot;sbox&quot;).value = words;
    document.getElementById(&quot;mic&quot;).value = &quot;&quot;;
    document.getElementById(&quot;sbox&quot;).focus();
  }
</script>

<input class='sbox' id='sbox' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search this blog...&quot;;}' onfocus='if (this.value == &quot;Search this blog...&quot;) {this.value = &quot;&quot;}' type='text' value='Search this blog...'/>
<input id='mic' onwebkitspeechchange='transcribe(this.value)' style='width: 15px; height:20px;border: 0px;background-color:transparent' x-webkit-speech=''/>

What Codes Speak?

• You can change the id name of the inputs according to you, but you may also have to change the input in script code corresponding to the modification you have done in inputs id name.
• See the code above id name of the text area input is sbox and id name of speech area input is mic.
• You will also notice the same id name repeated in script code. So while changing the id name remember that you also have to provide same id name to the script code also otherwise the speech recognized on speaking will not be copied to the text area.