HTML5 speech support

I remember at the beginning of this year when I read about the google chrome’s experiments to add support of HTML5 speech recognition, they put it for the public by running chrome with extra parameter flag passed to the application.

    %LocalAppData%\Google\Chrome\Application\chrome.exe --enable-speech-input

That was very interesting & inspiring for me. and from 2 weeks ago with the release of version 11 they enabled it finally & added it to the translation service. and I was going to blog about it and explain how to add it to you web applications.. & Yess, I got very busy and forgot 🙂 .. Yesterday, at Google’s famous conference –google IO– and exactly at the second day key note speech they talked about it =D .. so I am going to write a brief of how to add it to your apps and extra stuff.

=-=

Simply, If you want to have the speech recognition in your web app, all you have to do is add an extra attribute to the input tag to enable speech recognition input =d

<input type="text" x-webkit-speech />

Thats pretty simple, Just adding an extra attribute will get it work !! <thanks HTML5>

Lets see it in action <google translate>, open google translate , point source language from “detect language” to “english” and press the mic icon and SPEAK !:D


<note: the speech recognition attribute is attached to an input (not textarea) as you could think, <inspect element & see ;)> ..

I thought if there is any other properties related to this in the DOM element, so Lets use the developer tools in google chrome press CTRL + SHIFT + J to open chrome’s console. lets use the embedded method console.dir() that will populate every method/property in a given Element.

console.dir( document.createElement('input') );

here is the props/methods that could be related:

webkitSpeech: false
onwebkitspeechchange: null

So, using these prop you can attach event, test if the browser support speech recogniztion etc..

here is how to test if the browser support it or not:

if ("webkitSpeech" in document.createElement('input')){
//do something
}

what about other browsers than chrome & safari (browsers that doesn’t use the webkit layout engine):

In google ‘s translate input element, they put two attributes related to the speech : speech &  x-webkit-speech , and if you read the API Draft you will find that speech is standard. and you have to put both attributes, now lets add some extra stuff to our test:

var newElement = document.createElement('input');
if ("webkitSpeech" in newElement || "Speech" in newElement){
//do something
}

and extra attrubite to the first exmaple :

<input type="text" x-webkit-speech speech />

Finally , add the value [ =”” ] fo the sake of xhtml strict specification:

<input type="text" x-webkit-speech="x-webkit-speech" speech="speech" />


What about a small piece of code or even chrome extension that enables any input text in any webpage we are in to be speech recognition ready ??

I ‘ll go study now and may be tonight I’ll write a simple bookmarklet and post it tomorrow.

Thanks

Advertisements

About alaasdk

ASP.NET Developer, javascript geek and JQuery lover. IT Head at @acesegypt. Studying #Business and #Accounting in #Commerce school! #Cycling is my #1 transportation way. Living in a room in which you can't see walls from #Whiteboards.

Posted on May 12, 2011, in HTML5 and tagged , , , , . Bookmark the permalink. 2 Comments.

  1. I am looking into using google speech recognition software and modifying it so that the user does not have to click on the microphone to input text. I want to make a blind person user friendly website. Let me know if you figure anything else out that you havent mentioned already. thanks!

  1. Pingback: html5 speech bookmarklet « < @alaasdk />

Leave a Reply

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

%d bloggers like this: