The Code

HTML

<button class="audible" data-audible="Document Saved.">Save Document</button>

HTML 5 is bringing us a number of interesting new tags and attributes to play with. The two that I’ve made use of here are the audio tag, and the dataset attribute. The audio tag is pretty self explanatory, and can essentially be used to replace flash-based audio players.

The dataset attribute will come as a relief to javascript developers who’ve been misusing rel tags for years. John Resig has a nice write up on this attribute, but to sum it up, he states that the dataset attribute “allows you to write valid HTML markup (passing an HTML 5 validator) while, simultaneously, embedding data within your page.”

JavaScript

$(function(){
    $('.audible').each(function(){
        // Create Audio Element
        var text = $(this).attr('data-audible');
        text = text.replace(' ','+');
        var audible = new Audio('http://translate.google.com/translate_tts?q=' + text);
        document.body.appendChild(audible);

        // Play Audio On Click
        $(this).click(function(){
            audible.play();
            audible.currentTime = 0;
        });
    });
});

If you’re familiar with jQuery, the JavaScript here is actually pretty simple. We start by wrapping everything in the $(function(){ ... }); block so that it fires on the onReady event. Next, $('.audible').each(function(){ ... }); selects each element with the ‘audible’ class and iterates through them. For each element selected, we find the value of the ‘data-audible’ attribute, replace spaces with pluses, and pass the Google Text-To-Speech API URL, appended with the audio text, into the audio tag constructor. This produces an audio element which we then append to the body of our page. From here, all that’s left is to add the functionality to play our new audio element when our original button is clicked: $(this).click(function(){ audible.play(); });.

The final line, audible.currentTime = 0;, is meant to reset the timeline of the audio file, but I’ve yet to get it working properly (let me know if you’ve got any insights).

The Demo

View the Demo (Working in Safari and Chrome)

The example I’ve provided really isn’t an optimal use case, however, as you would probably want to serve the audio after an action is successfully performed server-side, and not simply on click. Dynamic spoken audio obviously doesn’t fit into too many sites, and it’s appeal rivals that of the blink tag or midi loops, but in the right situation it may just be useful.

The job was meant to be simple HTML manipulation; add alt tags here, meta tags there, externalize javascript, etc. After one day of training as an SEO engineer, the director of engineering informed me that a PHP developer was leaving the company and having boasted about my experience with PHP during my interview, he asked if I would be interested in taking the position. At the time, my “experience” with PHP actually didn’t amount to much more than the use of the include() function, but being an overly-ambitious twenty-something, I proudly accepted the offer.

The months that followed became an exercise in caffeine-fueled sleep deprived autodidacticism. I learned to work with user authentication, sessions, content management, and more. My six months with this company had rapidly expanded my knowledge of PHP, dynamic web development, and search engine optimization, but I had yet to explore web standards, CSS, or JavaScript in depth and was just starting to wrap my brain around table-less layouts.

The time to move on came when my wife-to-be accepted a promotion that would move her three hours out of town. I left my job to follow her, not sure if I would be continuing my career as a web developer, or starting one flipping burgers. Despite the uncertainty, it seemed the universe was looking out for me. The day we moved to town, I came across a newspaper ad for a web developer at one of the two creative agencies in the county.

At the time I thought I was taking another job manipulating HTML, but this new company would come to serve as an incubator for my web development abilities. They gave me the freedom to explore web technologies and to implement cutting edge features and functionality in client work. I began reading .net magazine, following the blogs of many great designers and developers, and digging through documentation on PHP libraries, JavaScript frameworks, and emerging technologies. In this former print and video design agency turned web studio, I quickly became an authority on web technology. The skills I learned during this time truly prepared me for a career a as a web developer.

When my fiance’s contract for her new position expired, we decided to move back to San Diego, and this meant another change for me. After taking several brief jobs with at small startups and spending a few months freelancing, I attended my first web conference, SXSW. I ended up meeting a couple of guys from a company in San Diego that happened to be in need of a web developer. Upon returning to San Diego, interviews were scheduled and executed leading me into my current position as a user interface engineer.

So far it’s been an interesting three years and I look forward to seeing what the future has in store.

I’ve installed the latest version of Wordpress with a copy of Elliot Jay Stocks’ Starkers theme and am applying just enough CSS to make this blog easy on the eyes. In order to keep myself motivated, I’ve also decided to participate in Project52, a challenge to produce fresh content on my site each week for a year.

By the end of 2010 I plan to have at least 52 unique articles; enough content to inspire a new design.