How To Brew Tech-Latte

Adding Speech Recognition to your Website

Every new innovation these days are mind-blowing and simply out-of-the-world creations. Take a look at Carolyn’s latest poll – Which Tech is on Your Wish List where you will see the list of technological inventions she has mentioned which couldn’t have been imagined by the common man. The minds behind these great ideas and concepts are continuously at work to simplify our lives by advancements and inventions.

You might have already heard and experienced the wonderful Speech Recognition feature of iPhone 4S – SIRI and also might have noticed a similar feature on Google’s search page. (see below)









That made me think is it possible to add such a voice-enabled feature to every website or blog. Most of our websites will have a page or form where readers can enter or type something for searching or entering a comment, can we enhance our sites to allow users to speak their thoughts out!!!Further reading and learning made me realize it is quite easy to achieve that.

Let us consider the Search Box, and see how we can implement this feature. All you have to do is add one single keyword highlighted below to your form and it does the trick.

Search Form
<input type=”text” alt=”search this site” name=”s”
id=”s” size=”26″ x-webkit-speech />

You can also see that DailyMorningCoffee home page has this feature implemented for the search on the right sidebar. All you have to do is speak clearly and the spoken word or sentence is taken to google servers and gets translated as text for searching my entire website. Also one should be aware that currently only Google Chrome supports this feature and if you are using any other browsers it may not get enabled.

Now, as you can see the keywords of “x-webkit-speech” is within the <input> tag and to enable this in any other field like a text box area or your comments section, we may need to do some slight modifications like below:

<script type=”text/javascript”>
function transcribe(words) {
document.getElementById(“speech”).value = words;
document.getElementById(“mic”).value = “”;

<textarea cols=”50″ id=”speech” ></textarea>

<input id=”mic” onwebkitspeechchange=”transcribe(this.value)” x-webkit-speech>

The change above is still having the keyword within the <input> tag but the javascript above that will capture the spoken words and paste them into any text area of your choice.

Do share your thoughts on implementing this on a personal blog or website, do you think it is advisable and will it add any value to your readers?I think the google voice recognition software recognizes an accent more prone among Americans, I do have a hard time making my car bluetooth system understand what I am telling due to my rich Indian accent. Is this a drawback to this awesome feature?

About the author

Praveen Rajarao

Praveen Rajarao is an Entrepreneur and in his spare time blogs on his website – and His topics range from blogging to technology to affiliate programs and making money online and how-to guides. Daily Morning Coffee is also accepting Guest Posts from Professional Bloggers at this time, take a look at “Write For DMC” page for more details on the same.


Click here to post a comment

CommentLuv badge

This blog uses premium CommentLuv which allows you to put your keywords with your name if you have had 3 approved comments. Use your real name and then @ your keywords (maximum of 2)

Like DMC on FB

Get your Keurig Starter Kit Today! 50% off coffee makers +25% off beverages + free shipping, Shop Now!

Recent Comments