Add Speech Recognition To Website Using HTML5

Every website has some sort of a text input field, which the visitors can use either to interact with the author or other visitors, or to perform a search. Users can either input text in search boxes, comment fields, or contact forms. This input, of course, comes from keyboards, i.e. the 'written text' input. But don't you sometimes get the feeling that in this digital era where technology is taking giant leaps, things should be a bit automated? Automated in terms of ease-of-use for the users. Well fortunately, there is another, cooler input method you can employ to provide your blog visitors a better user-experience, and that is speech recognition, all thanks to HTML 5!

Speech recognition is great. And so is HTML 5! It gives your blog a wider range of functionality. Now, instead of typing keywords and phrases in search boxes, all the users need to do is connect their microphones to their computers, and speak the words right into it! Sounds great, huh? Well let's see how you can do that.

Adding speech input to search box

You might all be familiar with Google search boxes. Search boxes have the 'input' HTML attribute, and this is what the following piece of code support. Just copy the code below into the HTML of your website, and you'll see a search box right there!

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

Try out this feature by clicking on the microphone button next to the search box below!

 

Adding speech input to comment fields

Comment fields are different from other input fields. For one, they don't have to go and look for something, and second, they have the 'textarea' input type. Here is the code for such kinds of fields.

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

Here is the above code in action

How does it work?

When you speak into your microphone, that sound is temporarily recorded and sent to Google servers, where it is transcribed and sent back as text. The real magic is done by the 'x-webkit-speech' attribute, This attribute works with <input> type fields, as you saw in the first code snippet.

For other kinds of text fields, such as textarea, as in the second code snippet, There's a simple workaround using JavaScript. Text comes into a temporary input type field, and is then copied into the other field.

It doesn't seem to work with me, what do I do?

Well, to start with, you need to have Google Chrome to use this functionality. Currently, only Google Chrome supports the speech input HTML 5 API. So if you are not using Google Chrome, you might not see the microphone button.

Finally, you need to understand that this isn't some kind of Siri as you get in an iPhone. So it might not be as efficient. But it can come in handy. And Google is trying to improve this service. So we could expect some real improvement in the near future. Thanks for reading, and tell us what you think about this feature.