Club Penguin Music Jam 2011 Applause Button Recreated With Javascript

ALERT: WE HAVE MOVED TO http://codingmassacre.com!!

Code Last Updated – June 5, 2011. Latest Version 1.1.

Change Log:

1.1 Added choice of having the button in Portuguese, French, or Spanish
1.0.1: Fixes the jump to the top of a webpage if you scroll down then click the button
1.0: Initial Release

If you’ve ever been to a Music Jam Party on Club Penguin, you know that they have an “Applause” button in the bottom right corner. If you have no idea what I’m talking about, visit this flash file of the game and click the button. It’s in another language, but it works the same way.

Now, I recently came up with the idea to recreate it – you click an image and it’ll play the sound, and you can play it on any web page. I did a little research and set to work. First off, I had to get the sound for it. I had to convert it from MP3 to SWF due to lag and it’s just overall better.

After coding the sound, I had to place in images. I decided to do a onMouseOver like Club Penguin did. When your mouse is not on it, it’ll look like this:

When your mouse is on it, it’ll light up like this:

After that I styled the image so it stays in the bottom right corner no matter what. I added this code to it:

position:fixed;
float:right;
right:0px;
bottom:0px;

After that, I was done! You can see the finished result here. Now, I am releasing the code for other websites. Some code needs to be placed in the <head> section, and the other part in the <body> section. If you have Atahualpa on your blog and would like to embed it, go to the Atahualpa Theme Options. From there navigate to Add HTML/CSS Inserts. In the “HTML Inserts: Header” box, add this at the end. If you do not have Atahualpa place it in the <head> tag.

<script language="javascript" type="text/javascript"> 

function playSound(soundfile) {

document.getElementById("applause").innerHTML=

"http://+soundfile+";

}

</script>

That’s the first part. After that in Atahualpa scroll down to “HTML Inserts; Body Bottom” box, and add this at the end. If you do not have Atahualpa place it in the <body> tag.

<span id="applause"></span> 

<a onclick="playSound('http://clubpenguinmemories.com/applause.swf');"><div style="
height:100%;
width:100%;"> 

<img src="http://clubpenguinmemories.com/dark.png" onmouseover="this.src='http://clubpenguinmemories.com/lighted.png'" onmouseout="this.src='http://clubpenguinmemories.com/dark.png'";
style="position:fixed;
float:right;
right:0px;
bottom:0px; "> 

</a></div>

Now, in 1.1 I have added button support for other languages on the button. Wherever images are embedded (dark.png and lighted.png) you will need to add a few extra words to the filename. If you want it in Portuguese, make it dark-pt.png and lighted-pt.png. The second part of your code would then look like this. To see it in Portuguese, click here.

<span id="applause"></span> 

<a onclick="playSound('http://clubpenguinmemories.com/applause.swf');"><div style="
height:100%;
width:100%;"> 

<img src="http://clubpenguinmemories.com/dark-pt.png" onmouseover="this.src='http://clubpenguinmemories.com/lighted-pt.png'" onmouseout="this.src='http://clubpenguinmemories.com/dark-pt.png'";
style="position:fixed;
float:right;
right:0px;
bottom:0px; "> 

</a></div>

For the button in French, add -fr to the file, so it would be dark-fr.png and lighted-fr.png. Your second portion of code would look like this. To see it in French, click here.

<span id="applause"></span> 

<a onclick="playSound('http://clubpenguinmemories.com/applause.swf');"><div style="
height:100%;
width:100%;"> 

<img src="http://clubpenguinmemories.com/dark-fr.png" onmouseover="this.src='http://clubpenguinmemories.com/lighted-fr.png'" onmouseout="this.src='http://clubpenguinmemories.com/dark-fr.png'";
style="position:fixed;
float:right;
right:0px;
bottom:0px; "> 

</a></div>

Finally, for Spanish you would add -es to the images, so it’d be dark-es.png and lighted-es.png. Your section half of code would be like this. To see it in Spanish, click here.

<span id="applause"></span> 

<a onclick="playSound('http://clubpenguinmemories.com/applause.swf');"><div style="
height:100%;
width:100%;"> 

<img src="http://clubpenguinmemories.com/dark-es.png" onmouseover="this.src='http://clubpenguinmemories.com/lighted-es.png'" onmouseout="this.src='http://clubpenguinmemories.com/dark-es.png'";
style="position:fixed;
float:right;
right:0px;
bottom:0px; "> 

</a></div>

After that, save it. It should be embedded! If you have any questions comment on this post or talk to me on Twitter. If you would like to see it in action check it out on my Club Penguin Memories Website or my friend’s Club Penguin Times website. Enjoy, and happy coding!