Google search text box has a voice recognition feature which is very helpful for inputting long sentences and difficult words.

This feature can be brought to normal input text boxes also. But this feature works only in browsers which use the webkit rendering engine (ex: Google Chrome version 11 and above).

In order to add the voice input feature, the attribute x-webkit-speech should be added to the input boxes.

Example:

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

This will add a “Mic” icon to the input box. After clicking the mic, the user can talk to input the data.

Below is a live example.

Other browsers

If you are viewing from other browser, you will see the below output.
Webkit voice input

The onwebkitspeechchange attribute:

There is a attribute called “onwebkitspeechchange” which allows to trigger a javascript event when the voice input is over.

Example

<script type="text/javascript">
function voiceInputOver(val){
alert("Voice input is complete");
alert("Your input is " + val);
}
</script>
<input onwebkitspeechchange="voiceInputOver(this.value)" x-webkit-speech />

Demo


This is a very useful feature which will soon become popular in all browsers by default.

  • http://www.mylocalsearchmarketingexpert.com Joel

    Awesome post! I always use the speak now feature when I’m search on google and to be able to incorporate that feature into my own website is very useful. However, I have been having problems inserting it into wordpress. How can I insert this feature in a page, for example?

  • Pingback: HTML5 WebKit Speech Input by Edd Turtle()

  • Pingback: HTML5 WebKit Speech Input | Designed by a Turtle()

  • fghg

    hghgf

  • Sravanthi Naraharisetti

    can any one help me out..? how should i take voice as input in my html page and display it on screen (browser)..?

  • Pingback: Giant Geek Blog » HTML5 speech input()