Skip to content

Commit 4e12b99

Browse files
aashu0148aashu0148
committed
Drum player added :)
1 parent 42f13fd commit 4e12b99

File tree

11 files changed

+108
-0
lines changed

11 files changed

+108
-0
lines changed

‎JavaScript Drum/index.html

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Day3</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
11+
<body>
12+
<div class="keys">
13+
<div class="key" data-key="65">A</div>
14+
<div class="key" data-key="83">S</div>
15+
<div class="key" data-key="68">D</div>
16+
<div class="key" data-key="70">F</div>
17+
<div class="key" data-key="71">G</div>
18+
<div class="key" data-key="72">H</div>
19+
<div class="key" data-key="74">J</div>
20+
<div class="key" data-key="75">K</div>
21+
<div class="key" data-key="76">L</div>
22+
</div>
23+
<audio src="./sounds/boom.wav" data-key="65"></audio>
24+
<audio src="./sounds/clap.wav" data-key="83"></audio>
25+
<audio src="./sounds/hihat.wav" data-key="68"></audio>
26+
<audio src="./sounds/kick.wav" data-key="70"></audio>
27+
<audio src="./sounds/openhat.wav" data-key="71"></audio>
28+
<audio src="./sounds/snare.wav" data-key="72"></audio>
29+
<audio src="./sounds/tink.wav" data-key="74"></audio>
30+
<audio src="./sounds/tom.wav" data-key="75"></audio>
31+
<audio src="./sounds/ride.wav" data-key="76"></audio>
32+
33+
<script>
34+
function animate(keyCode) {
35+
let key = document.querySelector(`.key[data-key="${keyCode}"]`);
36+
key.classList.add("playing");
37+
key.addEventListener("transitionend", () => {
38+
key.classList.remove("playing");
39+
});
40+
}
41+
function keyPressed(e) {
42+
let keyCode = e.keyCode;
43+
let audio = document.querySelector(`audio[data-key="${keyCode}"]`);
44+
if (audio == null) return;
45+
audio.currentTime = 0;
46+
audio.play();
47+
animate(keyCode);
48+
}
49+
document.addEventListener("keydown", keyPressed);
50+
</script>
51+
</body>
52+
53+
</html>

‎JavaScript Drum/sounds/boom.wav

130 KB
Binary file not shown.

‎JavaScript Drum/sounds/clap.wav

63.4 KB
Binary file not shown.

‎JavaScript Drum/sounds/hihat.wav

50.9 KB
Binary file not shown.

‎JavaScript Drum/sounds/kick.wav

15.2 KB
Binary file not shown.

‎JavaScript Drum/sounds/openhat.wav

238 KB
Binary file not shown.

‎JavaScript Drum/sounds/ride.wav

429 KB
Binary file not shown.

‎JavaScript Drum/sounds/snare.wav

32.6 KB
Binary file not shown.

‎JavaScript Drum/sounds/tink.wav

9.17 KB
Binary file not shown.

‎JavaScript Drum/sounds/tom.wav

105 KB
Binary file not shown.

‎JavaScript Drum/style.css

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body::before {
8+
content: '';
9+
position: absolute;
10+
background: url("https://cdn.pixabay.com/photo/2016/11/19/13/57/drum-set-1839383__340.jpg");
11+
height: 100vh;
12+
width: 100%;
13+
background-size: contain;
14+
z-index: -1;
15+
}
16+
17+
body {
18+
height: 100vh;
19+
width: 100%;
20+
display: flex;
21+
justify-content: center;
22+
align-items: center;
23+
color: #fff;
24+
}
25+
26+
.keys::before {
27+
content: '';
28+
position: absolute;
29+
width: 100%;
30+
height: 100%;
31+
background: #000;
32+
z-index: -1;
33+
opacity: 0.6;
34+
}
35+
36+
.keys {
37+
position: relative;
38+
width: 100%;
39+
display: flex;
40+
justify-content: space-evenly;
41+
align-items: center;
42+
}
43+
44+
.key {
45+
font-weight: bolder;
46+
font-size: larger;
47+
padding: 15px;
48+
border: 4px solid transparent;
49+
transition: 0.3s;
50+
}
51+
52+
.playing {
53+
transform: scale(1.4);
54+
border: 4px solid yellow;
55+
}

0 commit comments

Comments
 (0)