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.
$(document).ready(function() {
//create the audio tag using jquery
//include the drum kit mp3s
var drum1 = document.createElement('audio');
drum1.setAttribute('src', 'audio/drum1.mp3');
var drum2 = document.createElement('audio');
drum2.setAttribute('src', 'audio/drum2.mp3');
var drum3 = document.createElement('audio');
drum3.setAttribute('src', 'audio/drum3.mp3');
var drum4 = document.createElement('audio');
drum4.setAttribute('src', 'audio/drum4.mp3');
var drum5 = document.createElement('audio');
drum5.setAttribute('src', 'audio/drum5.mp3');
var drum6 = document.createElement('audio');
drum6.setAttribute('src', 'audio/drum6.mp3');
var drum;
$('.drum').click(function() {
//find the drum it and play the respective audio
drum = $(this).attr('id');
drum = eval(drum);
if (drum.ended) {
drum.play();
} else {
try {
drum.currentTime = 0;
} catch (e) {}
drum.play();
}
});
});
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:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Drum Set using jQuery - Blog.Theonlytutorials.com</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
//create the audio tag using jquery
//include the drum kit mp3s
var drum1 = document.createElement('audio');
drum1.setAttribute('src', 'audio/drum1.mp3');
var drum2 = document.createElement('audio');
drum2.setAttribute('src', 'audio/drum2.mp3');
var drum3 = document.createElement('audio');
drum3.setAttribute('src', 'audio/drum3.mp3');
var drum4 = document.createElement('audio');
drum4.setAttribute('src', 'audio/drum4.mp3');
var drum5 = document.createElement('audio');
drum5.setAttribute('src', 'audio/drum5.mp3');
var drum6 = document.createElement('audio');
drum6.setAttribute('src', 'audio/drum6.mp3');
var drum;
$('.drum').click(function() {
//find the drum it and play the respective audio
drum = $(this).attr('id');
drum = eval(drum);
if (drum.ended) {
drum.play();
} else {
try {
drum.currentTime = 0;
} catch (e) {}
drum.play();
}
});
});
</script>
</script>
</head>
<body>
<center>
<h2>A Simple Drum Kit Example using jQuery</h2>
<img src="images/drum.png" class="drum" id="drum1" border="0" />
<img src="images/drum.png" class="drum" id="drum2" border="0" />
<img src="images/drum.png" class="drum" id="drum3" border="0" />
<img src="images/drum.png" class="drum" id="drum4" border="0" />
<br />
<img src="images/drum.png" class="drum" id="drum5" border="0" />
<img src="images/drum.png" class="drum" id="drum6" border="0" />
<br />
<a href="https://blog.theonlytutorials.com">Tutorial By blog.theonlytutorials.com</a>
</center>
</body>
</html>
And more over, Here is the Download link (music files and images included):
