Make use of HTML5 Speech Input Fields

Category: 

HTML 5 came to the World Wide Web with a lot of new properties and new features. With HTML5 a new facility or feature "Text Speech Recognition" came. In this tutorial I am going to use the power of this new feature in a HTML5 powered web page. Soon I will also integrate this facility to this website's Search Form.

But, till now, only Google Chrome Supports this(as of May 2011). The other browsers are not suppored yet. 

So lets get started. This feature can be achieved only by adding an attribute to your input type text. 

  1. First, Create a input type text and then add the property called "x-webkit-speech". This will do. Nothing much.
    <input type="text" x-webkit-speech="x-webkit-speech" autocomplete="off" class="search_input" />

     

  2. So, that is it. Now, lets use it in a Real life application. What about the Google Maps?
  3. I hope you all know how to setup Google Map. So setting up and configuring of Google Map is out of this tutorial's scope. I will just display the demo of the form and how it works.
  4. Click Here to View the Demo.
  5. Click Here to Download the Code.

I hope this one can help some of us. Please let me know your views on the article. 

Rate this content: 

Average: 3 (22 votes)

Comments

hum hum

speaking a place name on the map return me some Portuguese equivalent word... only thing that work was saying: Woody wood picker

Add new comment