Speech To Text

Posted on

A welcomed addition to Webkit Browsers is the Speech to Text ability for text boxes. I am really excited about this new feature in webkit, and I cannot wait until the other mainstream browsers such as gecko and *gasp* Trident (Internet Explorer) pick up the feature. I just know that speech input is definitely going in all of my new websites!

How To Use Speech To Text

First of all, you need to be in Google Chrome Browser (only browser that currently supports speech to text input) to test it out. To enable speech to text is really simple. All you need to do is add one attribute to your textbox. The webkit only attribute is x-webkit-speech. Here is what it looks like:

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

To future proof your website, just add the html5 attribute speech to ensure that your inputs work in any browser when the api is actually supported in Firefox, Safari and Internet Explorer

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

Will All Browsers Support Speech To Text In The Future?

Probably, eventually… I hope so! I think most browsers that stay up to date will be supporting this feature soon. Besides, the “real” attribute that will eventually be supported is called speech, just like the webkit attribute but without the prefix. You can actually check out the spec for speech input in html5 yourself.

Demo Speech Input

If you are in Chrome, click the microphone icon in the textbox and speek something related to web development, Then hit enter.

Final Thoughts

I was doing some testing with the attribute and I found something pretty funny. Speech input functionality is actually available on password inputs, not very practical I’d say. I’m not the one to speek my password out in the open air… but thats just me. As far as I could tell, speech input only works on text inputs. Not textareas. And yes, I tried on radio and checkbox inputs. Hey, it was worth a try!