How To Add Google Speech Recognition Button To Your Website In Search And Contact Form

If you are a regular reader of my blog and uses Google Chrome to visit then you might have noticed that recently I have added speech recognition button on my right column search box and comment box in ever post. You all must have seen something similar on Google Homepage’s Search box also, using that speech button people can speak to search your query instead of typing each word.

So if you are also the owner of a blog or website, where want to add one such feature on your blog or website then all you need to add is a speech attribute in input type tags of your form fields and it will automatically will add a microphone icon in that input type field. E.g.:

<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="25" x-webkit-speech />
<input type="submit" value="Search"/>
</form>

At the time of writing Speech Input API was only supported by Google Chrome web browser and only in input type field, so if you or your visitors are visiting from another web browser they will see the normal input type field (without microphone icon). Here is a live demo:

In case if you want to show it in textarea type field (like comment box or for any other use) then you will not be able to add speech attribute directly as we do in input type field because currently it is only supported for input type field. So to make it work with textarea field we can take the help of JavaScript.

<textarea name="commentbox" id="commentbox" cols="30" rows="7"></textarea>
<input style="width:16px; height:36px; border:0px; background-color:transparent;" id="mic" onwebkitspeechchange="transcribe(this.value)" x-webkit-speech />
<script type="text/javascript">function transcribe(words) {document.getElementById("commentbox").value = words; document.getElementById("mic").value = ""; document.getElementById("commentbox").focus();}</script>

In above code we have given a textarea which is for comment, input type field to add speech button and JavaScript to copy the text from input type field and past it into textarea. Apart from comment box you can also use it in your contact or feedback form. Here is a live demo: