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…

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 13, 2011, in HTML5 and tagged , , , , . Bookmark the permalink. 2 Comments.

  1. “Speak Now” on bookmarklet click would be great.

  1. Pingback: HTML5 speech support « < @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: