f Add Speech Recognition to input boxes in HTML | Information Ground
Hello Friends!
We are moved to new address http:/technomi.com Please update your bookmarks.

Add Speech Recognition to input boxes in HTML

Posted by Unknown | | Category: , |

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 textboxes 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 he voice input feature, the attribute x-webkit-speech should be added to the input boxes.

Example:

<input type="text" x-webkit-speech 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 the live example.

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 />

Sign up for our daily email newsletter:

Delivered by FeedBurner

Currently have 0 Response to 'Add Speech Recognition to input boxes in HTML'


Leave a Reply

Comments are moderated and only those comments which are related to topic will be published.

Subscribe to: Post Comments (Atom)

Related Useful Articles