Switch To HTML5 and Start Using Voice Search In Blogger 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