x-webkit-speech: Add Mic Speech Input Icon in a Text Input Box

Learn how to add a mic / mike / microphone icon in an input box for speech input. This feature is supported via x-webkit-speech attribute in webkit browsers.

HTML5 is perhaps the most radical and important update of the Hypertext Markup Language since it was formalized back in 1990. This latest update by W3C has come with a great number of new and exciting features. One among these newly added features is the ability to enter text in an input box using speech recognition.

To enable speech recognition in an input box –you need to declare this feature explicitly. x-webkit-speech is the attribute which needs to be added to an input element. For example:

<input type=”text” name=”s” size=”20″ x-webkit-speech/>

At present, this attribute works only in browsers that support WebKit. Google Chrome, Opera and Safari are among a host of other but smaller browsers that support WebKit.

The attribute places a microphone (aka mic or mike) icon inside and to the right hand side of an input box. When you click this icon –a small box appears below the icon indicating that now you can speak.

Screenshot: Speech input facility through x-webkit-speech

Screenshot: Speech input facility through x-webkit-speech

Clearly speak the words you want to enter into the box. Speech recognition facility of your browser will try to recognize the spoken words. If successful, the words will be automatically typed into the input box. If your words could not be recognized –you’ll be told so and you can give it another try by speaking again.

x-webkit-speech is a step forward towards making web more accessible to users with all sorts of abilities and disabilities. Speech recognition makes entering text an easier task for people with visual impairment and conditions that prohibit easy typing with fingers.

This feature is available only for input box and not for textarea. However there is a workaround that you can use to add mic icon and speech input facility in a textarea as well. We have published an article about adding mic speech input icon to a textarea.