jQuery Drum sets – HTML5 Audio tag example!

Today we are going to learn an interesting topic in jQuery. This post is going to teach you how to create a musical Drum Sets using jQuery.

This is completely a new point of view where you are going to see the power of jQuery and HTML5 and how simple it is to do some amazing stuffs.

Before going to the tutorial,  try this below example (Click on the drums to hear the sounds):

Quite Interesting isn’t it?

But you have to accept this script only works in the modern browsers which support <audio> tag. Which is introduced in HTML5.

Okay, lets see how the script is working!

Here is the entire JavaScript which is used in the above example.

Basically, onLoad of the page ie., $(document).ready(), we are creating the <audio> tag and giving the mp3 source to it.

There are 6 mp3 drum files used in this example. You can include as many as you can.

And then, on click() event we are playing the respective audio file. Sounds easy right?.
Well, here is the entire script, so you can understand even easier:

And more over, Here is the Download link (music files and images included):


About the Author


Software Engineer, Blogger etc., Visit my Youtube channel - <a href="http://www.youtube.com/agurchand">Click Here</a>

Leave a Reply

Your email address will not be published. Required fields are marked *