Saw this post about Chrome voice searching in HTML forms on Google’s blog today. Very cool, so I had to give it a try. If you check the “Search” box in the upper right corner of the page, you’ll see a little icon (if you’re using a dev version of Chrome). Click it to do a search-by-voice.
What I didn’t expect was how totally easy it is to implement. Seriously, it’s less than a line of code.
Example. Say your search box (possibly in your theme’s searchform.php file) looks like this:
<form id="searchform" action="<?php bloginfo('home'); ?>/" method="get"> <input id="s" name="s" size="20" type="text" value="<?php _e('Search') ?>..." /> </form>
All you have to do is to add some bits to the input element box. Specifically, you add x-webkit-speech speech onwebkitspeechchange=”this.form.submit();”. That’s it. Seriously:
<form id="searchform" action="<?php bloginfo('home'); ?>/" method="get"> <input id="s" name="s" size="20" type="text" value="<?php _e('Search') ?>..." x-webkit-speech speech onwebkitspeechchange="this.form.submit();" /> </form>
Note that this won’t validate, if you care about that sort of thing. Works fine though.