Blog Archives

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.


JQuery 1.6 release & backward compatibility !

Today, and as you see from the blog post title 😀 , JQuery 1.6 has been released !

But this time not like 1.5 release, there is no much new features as 1.5 had (deferred obj., jqXHR.. etc)..

so what we have here with 1.6 ??

case-mapping of data- attributes:

Its just a change in the way data- attributes object properties creation, in earler versions data-max-value will create an object with a property like max-value but now with 1.6 , the object would be maxValue..  So what about backward compatibility ?!” , people must start fixing there already written code. !

new methods: .prop(), .removeProp():

Jquery added 2 new methods to its default JQuery object, those methods will work with DOM attributes, I know whats on your mind now –.attr() huh!- yeah, the .attr() used to be the only method that works with elements attributes/properties (beside .val() & other task-specific methods) , It might be confusing so lets define both first:

attribute:  is the initial value shipped with the DOM element ex. <input type=text value=”initialValue”>
property:  it is the dynamic value, ie. any value added by user or changed programmatically.

now JQuery put an end to this, and gave us brand new methods for properties to keep the attr() method for its real work.. so from on when you call .attr(“”) you will get the initial value only !!
that means having the same code will run differently when updating to the new version. backward compatibility ?!

Here is a simple example I have made for more explanation:

=#1= open this fiddle [uses Jquery 1.5.2]
write something in the textbox, and click the “click here to test” button

you will notice that the result is same as you wrote.

in the other side:

=#2= open this fiddle [uses Jquery 1.6]
write something in the textbox, and click the “click here to test .attr()” button

you will notice that the result is the initial value of the textbox.

BUT .. If you clicked the other button which uses the new .prop() method will get you the current value of the textbox.

Finally.. this new version of jquery doesn’t have any other major new features,all other changes are bugfixes, Performance Improvements and some new methods.

you can check all new methods and changes to the API at this link.


update: my twitter timeline got something related:

check this tweet of @jeresig (founder of jquery).

After a discussion on Hacker News regarding the attr boolean changes in jQuery 1.6, we just landed a fix:

Its good to know also that @jeresig is moving from mozilla to the famous online academy – Khan academy -.

ThankQQ for your time 🙂