Skip to content

Commit f09941c

Browse files
SudarshanVSSudarshanVS
authored
Add files via upload
1 parent ce59274 commit f09941c

File tree

17 files changed

+190
-0
lines changed

17 files changed

+190
-0
lines changed

‎images/crash.png‎

19.1 KB
Loading

‎images/floor-tom1.png‎

27.8 KB
Loading

‎images/floor-tom2.png‎

28.5 KB
Loading

‎images/kick.png‎

51.9 KB
Loading

‎images/snare.png‎

16.8 KB
Loading

‎images/tom1.png‎

23.5 KB
Loading

‎images/tom2.png‎

22.6 KB
Loading

‎index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en" dir="ltr">
3+
<head>
4+
<meta charset="utf-8">
5+
<link rel="preconnect" href="https://fonts.gstatic.com">
6+
<link href="https://fonts.googleapis.com/css2?family=Monoton&display=swap" rel="stylesheet">
7+
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
8+
<link rel="stylesheet" href="./styles.css">
9+
<title>Drum Kit</title>
10+
</head>
11+
<body>
12+
<h1>Drum Kit</h1>
13+
<div id="drum-kit" class="container">
14+
15+
<div id="crash" class="instrument">
16+
<audio id ="aud-crash" src="./sounds/crash.mp3">
17+
</audio>
18+
<ul>
19+
<li><img id="crash" src="./images/crash.png" alt="crash"><button class="keystroke">Q</button></li>
20+
<li><label for="crash">Crash</label></li>
21+
</ul>
22+
</div>
23+
24+
<div id="kick" class = "instrument">
25+
<audio id ="aud-kick" src="./sounds/kick-bass.mp3">
26+
</audio>
27+
<ul>
28+
<li><img src="./images/kick.png" alt="crash"><button class="keystroke">W</button></li>
29+
<li><label for="kick">Kick Drum</label></li>
30+
</ul>
31+
</div>
32+
33+
<div id="snare" class = "instrument">
34+
<audio id = "aud-snare" src="./sounds/snare.mp3">
35+
</audio>
36+
<ul>
37+
<li><img src="./images/snare.png" alt="crash"><button class="keystroke">E</button></li>
38+
<li><label for="snare">Snare</label></li>
39+
</ul>
40+
</div>
41+
42+
<div id="tom1" class="instrument">
43+
<audio id = "aud-tom1" src="./sounds/tom-1.mp3">
44+
</audio>
45+
<ul>
46+
<li><img src="./images/tom1.png" alt="crash"><button class="keystroke">R</button></li>
47+
<li><label for="tom1">Left Tom</label></li>
48+
</ul>
49+
</div>
50+
51+
<div id="tom2" class="instrument">
52+
<audio id = "aud-tom2" src="./sounds/tom-2.mp3">
53+
</audio>
54+
<ul>
55+
<li><img src="./images/tom2.png" alt="crash"><button class="keystroke">A</button></li>
56+
<li><label for="tom2">Right Tom</label></li>
57+
</ul>
58+
</div>
59+
60+
<div id="floor-tom1" class="instrument">
61+
<audio id = "aud-floor-tom1" src="./sounds/floor-tom-1.mp3">
62+
</audio>
63+
<ul>
64+
<li><img src="./images/floor-tom1.png" alt="crash"><button class="keystroke">W</button></li>
65+
<li><label for="floor-tom1">Floor Tom 1</label></li>
66+
</ul>
67+
</div>
68+
69+
<div id="floor-tom2" class="instrument">
70+
<audio id = "aud-floor-tom2" src="./sounds/floor-tom-2.mp3">
71+
</audio>
72+
<ul>
73+
<li><img src="./images/floor-tom2.png" alt="crash"><button class="keystroke">D</button></li>
74+
<li><label for="floor-tom2">Floor Tom 2</label></li>
75+
</ul>
76+
</div>
77+
78+
</div>
79+
<script src="./index.js" charset="utf-8"></script>
80+
</body>
81+
82+
</html>

‎index.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
var insts = document.querySelectorAll(".instrument");
2+
3+
for(var i = 0; i < insts.length; i++)
4+
insts[i].addEventListener("click", playAudio);
5+
6+
7+
8+
function playAudio(){
9+
var audioId = "aud-" + this.id;
10+
document.getElementById(audioId).play();
11+
}
12+
13+
14+
document.querySelector("body").addEventListener("keypress", keyPress);
15+
16+
function keyPress(key){
17+
18+
// alert(key.keyCode);
19+
20+
switch(key.keyCode){
21+
22+
case 113 || 81:
23+
document.getElementById("crash").click();
24+
break;
25+
26+
case 119 || 87:
27+
document.getElementById("kick").click();
28+
break;
29+
30+
case 101 || 69:
31+
document.getElementById("snare").click();
32+
break;
33+
34+
case 114 || 82:
35+
document.getElementById("tom1").click();
36+
break;
37+
38+
case 97 || 65:
39+
document.getElementById("tom2").click();
40+
break;
41+
42+
case 115 || 83:
43+
document.getElementById("floor-tom1").click();
44+
break;
45+
46+
case 100 || 68:
47+
document.getElementById("floor-tom2").click();
48+
break;
49+
}
50+
51+
52+
}

‎sounds/crash.mp3‎

33.8 KB
Binary file not shown.

0 commit comments

Comments
 (0)