HTML5 Audio Soundboard

Thursday, August 6, 2009

By rdoherty

A few months ago, one of my famous web developer co-workers had an oh-so-special bug filed against him requesting sound bites of some of his more famous sayings. He closed this bug with great success and all was well.

Fast forward to today and not all is well. While we have our sound clips, they are not easily accessible; lying dormant on our hard drives and MP3 players. Well folks, today I have solved this problem. I give you the ClouserW soundboard:

(Firefox 3.5 or higher required)

The page itself is pretty simple, I use PHP to get a list of all the sound clips from a folder and insert an <audio> tag for each one. The real magic happens in JavaScript with jQuery:

$("audio").removeAttr("controls").each(function(i, audioElement) {
    var audio = $(this);
    var that = this;
    $("#doc").append($('<button>'+audio.attr("title")+'</button>')
        .click(function() {
            that.play();
        ));
});

What I’m doing is first getting all the <audio> tags from the DOM and removing their ‘controls’ attribute. What this does is removes all default UI supplied by the browser. I’m doing this instead of simply not putting the attribute there for users with JavaScript turned off. Edit: Controls do not show up if JavaScript is turned off due to bug 449358.

Appended to that is .each(), which allows me to iterate over all of the <audio> tags individually. It will call the function I pass it once per each <audio> tag it finds.

var audio = $(this); creates a new jQuery object from a normal DOM node, which gives me a few functions that make getting information from it easier.

var that = this; is a closure to keep track of the current audio element inside the function for later execution. (Closures are outside of the realm of this blog post, if you’re interested in learning more about this powerful feature of JavaScript I recommend reading this tutorial).

I then append a button to <div id=”doc”>. The button’s text is taken from the title attribute of the <audio> tag.

Last, but not least, I attach a click handler to the button that uses the play() function of the audio tag I created a reference to above to play the soundclip.

No muss, no fuss. And no Flash

Tags: audio, clouserw, html5

This entry was posted on Thursday, August 6th, 2009 at 10:28 pm and is filed under Web Development. You can follow any responses to this entry through the RSS 2.0 feed.

morgamic

August 6, 2009 at 11:01 pm

Is that a women’s jacket?!

#207711

Ian M

August 7, 2009 at 1:40 am

Works in Firefox 3.5 but not working in latest Chrome beta

#207714

August 7, 2009 at 4:26 am

So apparently, my company’s website classifies your website (http://ryandoherty.net/) as ‘Adult’. Hope you found that as amusing as I did.

Guess I’ll have to check the actual application of your php/jquery and html5 out after work. /facepalm

#207736

August 7, 2009 at 6:08 am

interesting… but who’s that ugly dood in teh picture?

#207738

Jeff Balogh

August 7, 2009 at 7:21 am

I don’t see any audio controls with Javascript off. Does require js? I didn’t see anything about that in the spec…maybe it’s a bug?

#207741

John Slater

August 7, 2009 at 7:27 am

That’s amazing. And I’m honored that my photo (http://www.flickr.com/photos/intothefuzz/2721341322) was used to represent Wil in all his glory.

#207742

August 7, 2009 at 8:39 am

audo/video without Javascript is bug 449358, https://bugzilla.mozilla.org/show_bug.cgi?id=449358. Nice try with the controls, though. The future thanks you.

#207743