How To Add Dictation To Your Website (Only Chrome)

How well it would be, if your website visitors can say their query instead of typing them? This post will help you guys. Currently the visitors to your website need to use the keyboard to enter text in the various input fields. 

All you need to do is to add the following code (Code that has to be added is colored in ORANGE) in your existing search code. And your site will able to accept voice based input. 

<form method="get" action="http://www.google.com/search">
 <input type="text" name="q" size="30" x-webkit-speech />
 <input type="submit" value="Google Search" />
</form>

Currently this feature is only be available in Google Chrome and person using any other browser will not see the microphone icon at the end of search box. 

This announcement of HTML speech API was done by Google on their Official Chrome Blog. It reads 

Today, we’re updating the Chrome beta channel with a couple of new capabilities, especially for web developers. Fresh from the work that we’ve been doing with the HTML Speech Incubator Group, we’ve added support for the HTML speech input API. With this API, developers can give web apps the ability to transcribe your voice to text. When a web page uses this feature, you simply click on an icon and then speak into your computer’s microphone. The recorded audio is sent to speech servers for transcription, after which the text is typed out for you. Try it out yourself in this little demo. Today’s beta release also offers a sneak peek of GPU-accelerated 3D CSS, which allows developers to apply slick 3D effects to web page content using CSS.

Live Preview Of HTML Speech API

 

(Note: Non-Chrome Users will see this search box as standard search box.)

You have read this article Hacks / How to's with the title How To Add Dictation To Your Website (Only Chrome). You can bookmark this page URL http://angryblackmf.blogspot.com/2012/08/how-to-add-dictation-to-your-website.html. Thanks!