You know what the Harlem Shake is right? It’s been going around the internet like a sore thumb for the past week or so, with everyone taking to YouTube, Twitter, Facebook and anywhere else for this 30 second clip.

This morning I looked into taking it to the next level, and have made two of the websites I look after join in the party.

First there was the SRA’s website.

Triggered by a click on the top right hand corner entitled “Do the Harlem Shake”. My favourite thing about this clip is the photo of Ben Cooper, Controller of BBC Radio 1 and 1Xtra. Because he’s looking directly at the camera when the image shakes around it looks like his head is!

After that I then decided to do it to RajarSmilies. I knew it would look brilliant, as essentially the only thing on the homepage there is just a mixture of smiley faces! See below…

Rather than wait for a user to click a button to launch this I decided to load it up straight away. RajarSmilies is a much smaller site than the SRA’s and particularly at “down time” doesn’t receive many hits. This was one way of getting a few more people to look at it.

How can I do this?

Nuts and bolts, this is just a bit of Javascript, a bit of jQuery in the RajarSmilies version. Then on top of that is some fancy CSS3 work that does the animation.

I suggest you follow this tutorial which is where I based the basics of this from. However that doesn’t cover the sound.

To add the sound I initially used a HTML5 element bit of script.

var audioElement = document.createElement('audio');
audioElement.setAttribute('src', 'harlemshake.mp3');
audioElement.setAttribute('autoplay', 'autoplay');
//audioElement.load()
$.get();
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);

However, I soon found out that this wasn’t cross browser compatible. So I went on the hunt – I knew other people must have come across this problem before and I then found SoundManager by Schillmania. This is really simple to install.

And that’s it. You can download all the files I used from here. You’ll have to put them together in the right order though! Any questions, I’m happy to answer them.