Rimshots for all – using HTML5 audio and CSS3 to make instantrimshot.com

I’ve been annoyed with the plethora of articles lately showing off HTML5 vs. Flash and building actually worse solutions using open technology. Therefore I thought I’ll have a go at it myself, too.

Instant rimshot is a fun site that has a button that plays a rimshot (the “babumm-tish” after a bad gag at a comedy club) when you press a large red button. I thought this is a good target to convert to CSS and HTML5 and I give you HTML5 instant rimshot.

In essence this was fun, although Remy had beaten me to it some time ago.

As the background for my work I used HTML5Doctor’s Audio in the browser article and Robert Nyman’s CSS gradient example and I have to say a few things about this:

• There are not many HTML5 audio tutorials out there – if you Google for HTML5 audio you get video examples – and a lot of them not working.
• HTML5 articles do not seem to get many fixes – the audio one above for example has a bug in the detection code (mentioned in the comments)
• I had a hard time making the button work with the sound playing from start to end when you click the button. If you try the “version that loads the audio once and then calls the play() method onclick”:http://isithackday.com/html5-rimshot/rimshot.html you will find that the second time you hit the button it plays the “badumm” twice in Firefox – why I don’t know. Therefore I needed to create a new audio object every time you click the button – which in Safari means it keeps loading the MP3.
• The necessary browser support forking and the repetition of the file in MP3 and OGG format is simply annoying – if there is a new technology we should demand from browser makers to bloody well do it right and not as a repetition of the late 90ies madness. I guess the latest announcement on I/O solves that issue – but Safari would still need a plugin to play.
• The same applies to CSS gradients – progressively enhancing the button (on Firefox < 3.6 and on Opera it gets a plain colour) was another annoyance. Westciv’s gradient generator was a good helper for that.
• Another interesting bug I found was that you cannot position things absolutely inside a BUTTON element in Firefox. Originally I had the button link as a button but gave up soon enough – see the example here.

All in all I love the idea of the open web and HTML5 leading the way into the future but I am seeing us wasting a lot of time trying to make things work cross-browser and if the final result for the end user is not much better then it will be hard to convince our bosses that the effort is worth the time and money.

What we need for that first and foremost are good examples and not “look what we can do” tutorials that neither use HTML5 nor CSS3 but jQuery to simulate the lot whilst we still call it “HTML5 solutions”.

Tags: annoying, audio, browsers, flash, html5