How to add speech recognition to any website with HTML5

speech-webkit-demoSince Apple’s Siri voice recognition/voice control has again got back in focus of the crowd.  But Siri is far from being the only working voice control solution. There were already a number implementations before, some good some bad, and there is still far more than just Siri.

How you can “install” a voice recognition into your website with just one line of code, is what I want to show you today. The whole thing is based on HTML5 and is established as an  input element-tag.

And this is how it works:

<input type="text" x-webkit-speech />

Who wants to see the speech recognition in action, should go over there.  The only downside of this solution is the fact, that this speech recognition is far from cross-browser compatible. So at the moment it’s only implemented in Google’s Chrome browser. However, I could imagine to use the speech recognition, for example, for the search window on my blog.

And so that users of other browsers do not stand there without looking, you could display the classic text input field via browser switch for all other users.

What do you think about this new html tag? Will the speech recognition prevail and would you use it on your website?

2 Comments

  1. Very Informative Post, Dude,
    Thanks

  2. Simply awesome.
    I found a Speech Input Field in a blog. then started to search about it. Found this one. Soon going to implement it to my website’s search :)

Leave a Reply to Vinayak Cancel reply

Please be polite. We appreciate that. Your email address will not be published and required fields are marked