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 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") {

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


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. 3 Comments.

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

  2. Hello! This is just a little off topic however, I might use some assistance from an established author.

    Is it challenging to organize a site? I’m not really tremendously techincal nevertheless I will
    likely figure everything out relatively quick.

    I am just focused on starting my very own, yet I have been uncertain of where to begin.
    Could you have any information or suggestions?
    Many thanks….! Do you use Twitter? I wish to follow you if that might be alright.

    I have really took pleasure in your blog post am looking forward to any additional posts.

  1. Pingback: HTML5 speech support « < @alaasdk />

Leave a Reply

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

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

Google photo

You are commenting using your Google 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 )

Connecting to %s

%d bloggers like this: