HTML5 Audio Soundboard

Ryan Doherty

13

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:

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 ;)

13 responses

  1. morgamic wrote on :

    Is that a women’s jacket?!

  2. Ian M wrote on :

    Works in Firefox 3.5 but not working in latest Chrome beta :(

  3. c wrote on :

    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

  4. g wrote on ::

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

  5. Jeff Balogh wrote on ::

    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?

  6. John Slater wrote on ::

    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.

  7. Jeff Balogh wrote on ::

    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.

  8. rdoherty wrote on :

    @Jeff

    Updated the post, thanks!

  9. Justin Dolske wrote on ::

    unst unst

  10. robcee wrote on ::

    more cowbell!

  11. John Resig wrote on ::

    I’ve tweaked the code that you posted to be a little more jQuery-ish:
    http://gist.github.com/164163

    Neat demo!

  12. Frédéric Wenzel wrote on ::

    So awesome!

  13. Brian King wrote on ::

    I like it.