Dynamic Spoken Audio With Google’s Text-To-Speech API

As part of my article per week commitment for Project 52, I hope to create regular tutorials and examples on how to use emerging technologies throughout the year. This example uses jQuery, the HTML 5 audio tag, HTML 5 dataset attribute, and the Google Text To Speech API to provide an audible message when actions are performed.

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.