Skip to content

Commit 7873095

Browse files
btwshivambtwshivam
authored
Add a Music Kit App #731 
1 parent 28f2ce3 commit 7873095

File tree

17 files changed

+239
-0
lines changed

17 files changed

+239
-0
lines changed

‎Drum/shivam200446/images/crash.png‎

19.1 KB
Loading

‎Drum/shivam200446/images/kick.png‎

51.9 KB
Loading

‎Drum/shivam200446/images/snare.png‎

16.8 KB
Loading

‎Drum/shivam200446/images/tom1.png‎

23.5 KB
Loading

‎Drum/shivam200446/images/tom2.png‎

22.6 KB
Loading

‎Drum/shivam200446/images/tom3.png‎

27.8 KB
Loading

‎Drum/shivam200446/images/tom4.png‎

28.5 KB
Loading

‎Drum/shivam200446/index.html‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>MUSIC Kit</title>
7+
<link rel="stylesheet" href="styles.css">
8+
<link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet">
9+
</head>
10+
11+
<body>
12+
<h1 id="title">MUSIC 🥁 KiT</h1>
13+
<div class="set">
14+
<button class="w drum">w</button>
15+
<button class="a drum">a</button>
16+
<button class="s drum">s</button>
17+
<button class="d drum">d</button>
18+
<button class="j drum">j</button>
19+
<button class="k drum">k</button>
20+
<button class="l drum">l</button>
21+
</div>
22+
23+
24+
<script src="index.js" charset="utf-8"></script>
25+
26+
<footer>
27+
Made with ❤️.
28+
</footer>
29+
</body>
30+
</html>

‎Drum/shivam200446/index.js‎

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
var numberOfDrumButtons = document.querySelectorAll(".drum").length;
2+
3+
for (var i = 0; i < numberOfDrumButtons; i++) {
4+
5+
document.querySelectorAll(".drum")[i].addEventListener("click", function() {
6+
7+
var buttonInnerHTML = this.innerHTML;
8+
9+
makeSound(buttonInnerHTML);
10+
11+
buttonAnimation(buttonInnerHTML);
12+
13+
});
14+
15+
}
16+
17+
document.addEventListener("keypress", function(event) {
18+
19+
makeSound(event.key);
20+
21+
buttonAnimation(event.key);
22+
23+
});
24+
25+
26+
function makeSound(key) {
27+
28+
switch (key) {
29+
case "w":
30+
var tom1 = new Audio("sounds/tom-1.mp3");
31+
tom1.play();
32+
break;
33+
34+
case "a":
35+
var tom2 = new Audio("sounds/tom-2.mp3");
36+
tom2.play();
37+
break;
38+
39+
case "s":
40+
var tom3 = new Audio('sounds/tom-3.mp3');
41+
tom3.play();
42+
break;
43+
44+
case "d":
45+
var tom4 = new Audio('sounds/tom-4.mp3');
46+
tom4.play();
47+
break;
48+
49+
case "j":
50+
var snare = new Audio('sounds/snare.mp3');
51+
snare.play();
52+
break;
53+
54+
case "k":
55+
var crash = new Audio('sounds/crash.mp3');
56+
crash.play();
57+
break;
58+
59+
case "l":
60+
var kick = new Audio('sounds/kick-bass.mp3');
61+
kick.play();
62+
break;
63+
64+
65+
default: console.log(key);
66+
67+
}
68+
}
69+
70+
71+
function buttonAnimation(currentKey) {
72+
73+
var activeButton = document.querySelector("." + currentKey);
74+
75+
activeButton.classList.add("pressed");
76+
77+
setTimeout(function() {
78+
activeButton.classList.remove("pressed");
79+
}, 170);
80+
81+
}

‎Drum/shivam200446/sounds/crash.mp3‎

33.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)