Category Archives: HTML5

html5 speech bookmarklet

As I promised in the last post, I made this simple bookmarklet that will change any textbox to be speech recognition enabled ūüėÄ

Just click CTRL + SHIFT + B to open the bookmarks bar, right click it and press add page..¬†¬†write “enable speech” in name and paste the following code in URL

javascript:(function(x) { var i, current; for (i in x) { current = x[i]; if (current.type == "text") { current.setAttribute("x-webkit-speech", "x-webkit-speech"); current.setAttribute("speech", "speech"); } } })(document.getElementsByTagName("input"));

NOW .. open up any website that contains a textbox and click the bookmarklet and you will find that small speech icon in the textbox.

Enjoy =D

Here is a screen shot for google.com after clicking on the bookmarklet ūüėÄ

google enabled speech

plug in your mic and “speak now” =d

Note: make sure you have chrome version 11 or later.

coding time,

(function(x) {
        var i, current;
        for (i in x) {
            current = x[i];
            if (current.type == "text") {
                current.setAttribute("x-webkit-speech","x-webkit-speech");
                current.setAttribute("speech","speech");
            }
        }
    })(document.getElementsByTagName("input"));

I made a self executing anonymous function, and passed all input elements to it.. filtered them with If statement to get only the textboxes.. finally addin the two attributes, Very simple =D

Try it, and tell me if you have any problems.

you can FORK it on github.com

thanks…

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

HTML5 data-* attribute

Weeks ago I was enjoying my¬†free time playing around in twitter’s response html & ajax requests =D .. I have found a “data-*” attribute in the html metadata¬†.. It reminded me with the old days when I used to write attributes from my own mind in ASP.NET Repeater to the repeated elements. just to use it later in Jquery click handler or something.. later on I found that this is just realted to HTML5’s¬†dataset¬†I read about years but actually I forgot it,¬†horrible¬†memory !
may be writing a couple of lines here won’t let me forget it again !=)

the good part is I started digging in W3C Draft to refresh my memory and know the changes dropped to it.
//so lets talk a little bit about it !

HTML5 is not just a markup language .. HTML5  comes with new JavaScript APIs that works with its new features.. in our example here (the dataset) ..

lets write some markup to play around with:

<div id="container">
  <span data-color="black">Samsung 23' LCD</span>
  <span data-color="silver">BenQ 19' LCD</span>
</div>

Now If you are familiar with simple DOM methods you will know that its simply possible to access these custom attributes with getAttribute() and change the values of it by setAttribute()

example:

 var target = document.getElementsByTagName("span")[0];
 alert(target.getAttribute("data-color")); //black
 target.setAttribute("data-color", "blue");
 alert(target.getAttribute("data-color")); //blue

Till now we have nothing new, only a couple of “hand-made” attributes and normal getAttribute &¬†setAttribute Methods..
its time now to look at HTML5 related API

HTML5 provide a new property called dataset that returns DOMStringMap (name-value pairs object)

See the highlighted lines:

    var target = document.getElementsByTagName("span")[0];
    alert(target.getAttribute("data-color")); //black

    target.setAttribute("data-color", "blue");
    alert(target.getAttribute("data-color")); //blue

    alert(target.dataset.color); // blue

    target.dataset.color = "red";
    alert(target.dataset.color); // red

the dataset property¬†gives you an access to the custom attributes you have made in the markup, the keys inside the dataset object doesn’t have “data-” part so “data-ballSize” would be “dataset.ballSize”.

Jquery data-* support:

We already know the .DATA()¬†method in Jquery (added with V.1.2.3 -2008) .. a couple of months ago Jquery added support for HTML5’s dataset, lets see an example for that.

    var target = $("span:first");
    var myData = target.data;
    alert(myData.color); //black

myData will have All values of inserted in any data- attribute as JSON Object.

or you can directly get the values and use it. Like..

    var target = $("span:first");
    var myValue = target.data("color");
    alert(myValue); //black

ThankQ for reading, Hope you enjoyed it.