Adding some awesome speech abilities to our website


Speech abilities. How awesome would it be. Well, it is no wonder any more. It is possible with HTML 5 speech input API, using which you can allow users to “speak” instead of just typing.

The speech input is possible in search bars, text areas, etc. It is quite awesome. Let me walk you through how you can add speech input to your website.

NOTE: There is only one problem. Currently, only chrome is the browser that has speech input abilities. No other browser is able to understand the speech input. However, they just skip it, causing no problems. However, lets continue.

FIRST, WHY SHOULD WE HAVE SPEECH ABILITIES ?

Well, there is no denying that we, as web-designers should implement the latest and greatest technologies that enhance user experience and lowers page weight resulting in awesome websites. Well, speech input is one of them.

  • Having speech input increase your site’s accessibility. Some disabled people will be able to use your website using voice.
  • Speech input is much faster than typing out all the words.
  • This enhances user experience. People can now “say” what they want to, without typing everything. This is specially helpful when commenting. Instead of typing everything, people can speak. This is very nice when people want to write some big comments.

ARE THERE ANY NEGATIVE POINTS ?

Well, not a lot. Meaning, they won’t disturb your current layout.

  • Since only chrome supports it, it is  still a problem in other browsers. Meaning, it will not work.
  • When other browsers can’t use speech, and when you say that your site supports it, it may turn a few people against your site.

SO, LETS GET TO THE CODE

Enough talking, we ant speech recognition. Let’s get to it:-

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

Let’s dig a little deeper. The action here that makes the speech input enabled is the x-webkit-speech attribute of the input tag. Until now, only search boxes can be made to understand the speech input.

But, I have heard that using javascript, you can use the x-webkit-speech property to use the speech input in other text areas. (I’ll have to make a video on it 🙂 )

So, looks like you are reading, aren’t you ? Well, sorry to disturb. But, you do know that you can get every new piece of content from WDA by E-mail, didn’t you ?

Enter your email address to follow this blog and receive notifications of new posts by email.

SOME USE CASES FOR THE SPEECH INPUT

So as to say, every website should be using the speech input. But the only problem is that currently only chrome supports the speech input, no other browser. Others will still have to type. However, i have found some use cases:-

  • Websites which are specifically tailored towards physically disabled people.
  • Modern websites (specially business websites).
  • Websites looking to enhance user experience.

FULL IMPLEMENTABLE CODE AND EXAMPLE

Here is the full code:-

<html>
<head>
<title>
Speech input Test
</title>
</head>
<body>
<form method="get" action="http://www.google.com/search">
 <input type="text" name="q" size="30" x-webkit-speech/>
 <input type="submit" value="Google Search" />
</form>
</body>
</html>

Note: The code above is for reference and for use. It isn’t usable for your site search. I will find that out soon. Till then, if you know or found a solution, contact me or tell me in the comments below.

EXAMPLE HERE → (Works only in chrome)

Related reading:- How to use google drive to host your website for free

WRAPPIN’ IT UP

So, here I introduced you to the speech input. Currently available only for chrome, it is very handy and it enhances user experience. I covered the code, and am looking for options on how we can use it for our own websites (like in the comment box, search form or contact message).

The code I provided you currently works only with google search. I am looking for more options.

What do you think of the speech input ? Should there be more support for it ? Answer me these and share your thoughts in the comments below.

Related :-

Share this post with your friends, by using the buttons for sharing below this post.

Like what you read ? Well, then sign up for the e-mail newletter.

Enter your email address to follow this blog and receive notifications of new posts by email.

2 thoughts on “Adding some awesome speech abilities to our website

Add your Awesome voice. Let's have a meaningful conversation. And remember, don't be a spammer (We hate 'em).

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s