Add Free Speech Recognition To Your Website Using HTML5!

Voice Recognition
Every website has some sort of a text input field, which the visitors can use either to interact with the author or other visitors, or to perform a search. Users can either input text in search boxes, comment fields, or contact forms. This input, of course, comes from keyboards, i.e. the 'written text' input. But don't you sometimes get the feeling that in this digital era where technology is taking giant leaps, things should be a bit automated? Automated in terms of ease-of-use for the users. Well fortunately, there is another, cooler input method you can employ to provide your blog visitors a better user-experience, and that is speech recognition, all thanks to HTML 5!

Speech recognition is great. And so is HTML 5! It gives your blog a wider range of functionality. Now, instead of typing keywords and phrases in search boxes, all the users need to do is connect their microphones to their computers, and speak the words right into it! Sounds great, huh? Well let's see how you can do that.

Adding speech input to search box

You might all be familiar with Google search boxes. Search boxes have the 'input' HTML attribute, and this is what the following piece of code support. Just copy the code below into the HTML of your website, and you'll see a search box right there!

<form method="get" action="http://www.google.com/search">
 <input type="text" name="q" size="40" x-webkit-speech />
 <input type="submit" value="Google Search" />
</form>
Try out this feature by clicking on the microphone button next to the search box below!


Adding speech input to comment fields

Comment fields are different from other input fields. For one, they don't have to go and look for something, and second, they have the 'textarea' input type. Here is the code for such kinds of fields.
<textarea name="comment_box" id="comment_box" cols="30" rows="8"> </textarea>
<input style="width:20px; height:40px; border:0px; background-color:transparent;" id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech />
<script type="text/javascript">
function transcribe (words) {
   document.getElementById("comment_box").value = words;
   document.getElementById("mic").value = "";
   document.getElementById("comment_box").focus();
}
</script>
Here is the above code in action



How does it work?

When you speak into your microphone, that sound is temporarily recorded and sent to Google servers, where it is transcribed and sent back as text. The real magic is done by the 'x-webkit-speech' attribute, This attribute works with <input> type fields, as you saw in the first code snippet.

For other kinds of text fields, such as textarea, as in the second code snippet, There's a simple workaround using JavaScript. Text comes into a temporary input type field, and is then copied into the other field.

It doesn't seem to work with me, what do I do?

Well, to start with, you need to have Google Chrome to use this functionality. Currently, only Google Chrome supports the speech input HTML 5 API. So if you are not using Google Chrome, you might not see the microphone button.

Finally, you need to understand that this isn't some kind of Siri as you get in an iPhone. So it might not be as efficient. But it can come in handy. And Google is trying to improve this service. So we could expect some real improvement in the near future. Thanks for reading, and tell us what you think about this feature. And stay tuned for more such tricks :)

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

15 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. This comment has been removed by the author.

    ReplyDelete
  2. Hi Qasim. .

    Really a good post for bloggers. Well i too wanted to write a post on how to use windows 7 inbuilt speech recognition tool to write lengthy blog posts. But however i not got enough time due to exams but this is really a good post pal. .well done. Today i completed series about top 20 blogging mistakes.

    Top 20 Blogging Mistakes That Ruins Your Blog

    ReplyDelete
  3. But all the browsers dont support HTML 5.0
    got any thing to instead of it ?

    eColumns | Columns on Android, Apple and the Web.

    ReplyDelete
  4. hi Qasim Nice tips like every day but the pb is not most browsers support HTML 5 . thanks or this nice share keep it up

    ===>الربح من الانترنت<=====

    ReplyDelete
  5. wow this is so great... thanks for the good post... i have a doubt... im using disqus commenting system... can i implement it in disqus??? is it possible???

    ReplyDelete
  6. @miloud bougrine and @Amin Motiwala, I mentioned this in the post that only Google Chrome supports this feature as yet. Hopefully, we'll soon see support in more browsers

    ReplyDelete
  7. Hi Qasim,
    Feedburner feed of my blogspot blog not updating since two months. I have 100+ readership. I am worried, help me to solve this problem.

    Feed address of my blog is http://feeds.feedburner.com/PscExamQuestionsAndAnswers

    ReplyDelete
  8. Liked your blog.

    Thanks
    Santanu Debnath
    www.manidipa-kitchen.blogspot.com

    ReplyDelete
  9. Good post Qasim... but waiting for more browsers support.
    Recently Posted stylish stay connected social widget

    ReplyDelete
  10. nice widget

    Vote for next president of India?

    http://www.fblatest.in/2012/05/vote-for-next-president-of-india.html

    ReplyDelete
  11. Nice but check my one-
    http://goo.gl/b1JDv

    ReplyDelete
  12. Where should i add the comment field code ?

    ReplyDelete
  13. Nice Post Bro carry on your good work.
    Thanks for share information
    Technology, Free Software and Best Tutorials.
    God Bless you...!

    ReplyDelete
  14. This comment has been removed by the author.

    ReplyDelete
  15. Very helpful i have test its working.

    Compliance

    ReplyDelete