Rimshot with HTML5

A little while ago I was involved in a conversation with someone about being able to have a button on your computer to trigger a rimshot noise, or a ‘wah-wah-wahhh’ (yes, of course I was in a pub).

I pondered this for a few minutes, thinking it could be done using a bookmarklet and an overkill amount of JavaScript to inject a flash MP3 player of some sort. I promptly returned to my pint forgetting about the idea.

In a moment of bordem the idea returned to me this weekend, and then I remembered we now have the <audio> tag (actually we’ve had it for over 18 months).

Now the bookmarklet is no code at all!

Drag the bookmarklet up to your bookmark bar, and if the browser supports HTML5, then you can fire off a rimshot or ‘wah-wah-wahh’ next time you near something daft in the office!

2009-07-07 I’ve since updated the bookmarklet to load both .wav and .ogg with correct mime types (Google code was serving it as application/x-octstream (thing – you know what I mean) ), and I’ve switched around the order in which they’re being served. Apparently Safari is quite good at just getting the audio just to work, whereas Firefox is a little more picky!

2009-07-06 Upon further testing, this works (for me) in Safari 4, but silently fails in Firefox 3.5 – which I’m investing and will post my findings



I’m running the sound files off of a Google code project, so if you want some other daft sound, ping me and we’ll add it in (or if you have better sound files).

11 Responses to “Rimshot with HTML5”

  1. Appears Firefox doesn’t want to play WAVs. I changed the sources to a couple OGGs and it works fine.

  2. @Morgan – aye, that was the first problem, Firefox didn’t want to play the WAV. Also, I found that Safari is happy to sniff the file regardless of the headers and work out if it’s an audio file it can play, but Firefox requires the right headers, otherwise it silently fails.

    So I’ve fixed svn on google to serve the file up correctly as audio/ogg.

  3. @Yansky – actually yeah, that’s what sparked my memory on the rimshot thing :)

  4. It will be nice to have such sounds available in our arsenal. Even if it only works on “modern browsers”, it’s fine as it’s just progressive enhancement in most cases.

    The earlier flash equivalents would be http://instantrimshot.com and http://sadtrombone.com

  5. You are correct that Firefox doesn’t do any content sniffing when it comes to the audio and video elements. It relies on the correct mime type being served.

    The audio element works with Ogg Vorbis or WAV files. The latter need to have the audio data encoded in PCM format inside the WAV.

  6. Firefox does support Wave files, but only if they are uncompressed PCM. The files you’re trying to use are actually in a weird extended-Wave format and contain compressed MP3 data.

    The reason your bookmarklets don’t work is that you specify the Wave source before the Ogg source. Swap them and it will work fine in both browsers. Firefox thinks it can play the Wave, only to later discover it’s not PCM and fail. It fires an “error” event, so you can listen for that. The failure isn’t… uh… silent.

  7. Wait a second, you were a pub?!

    Ok, now I’m just being silly. Interesting, even though it doesn’t work in Firefox (yet) :)

  8. @Zirro – hmm, perhaps I am a pub!

    More seriously though, I’ve switched around the inserts so .ogg is going first, and testing it appears to work in FF3.5 and Safari. Interesting bugs though.

  9. Technically, that’s not a rimshot. A rimshot has a very distinctive sharp ‘crack’ to it, created by hitting the rim of the snare at the same time as the skin, with one stick.

    What you’ve got there is a bucket-of-fish (snare snare kick crash), without the ‘of’.

  10. Seems like a bug in Firefox then; it should try the next <source> if it finds that it cannot play the first one (even if it does support the container format).

Leave a Reply
Not required

CODE: Please escape code and wrap in <pre><code>, doing so will automatically syntax highlight