HTML5 Voice Search for your blog! (Chrome only)

Posted by Tom Schultz on June 22, 2011 Leave a comment (0) Go to comments

HTML5 Voice Search How To

A while ago Google added their voice search to google.com. This feature has been around for a while on Android and proven to be quite useful.

The HTML5 drafts have begun defining the api for voice search.

http://lists.w3.org/Archives/Public/public-xg-htmlspeech/2011Feb/att-0020/api-draft.html

If you have Google Chrome and you’ve tried the voice search, then you might want to add it to your site!

Believe it or not, it’s really simple! I added it to this website in about 30 minutes from not knowing anything about to full implementation.

How to do it!

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <script type="text/javascript">     
            function startSearch(event) {       
               document.getElementById("searchform").submit();     
            }   
        </script>
        <form action="#" method="get" id="searchform">
            <input title="Search"  type="text" name="q"  x-webkit-speech="" x-webkit-grammar="builtin:search" onwebkitspeechchange="startSearch()" />
        </form>
    </body>
</html>