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 = “”;
document.getElementById(“speech”).focus();
}
</script>

<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?

Share on Facebook

Tweet

Follow us

Save