Skip to content

Commit a73dc6d

Browse files
iselcqiselcq
committed
Add script to enable sound and animation
1 parent b147ab2 commit a73dc6d

1 file changed

Lines changed: 75 additions & 59 deletions

File tree

‎01 - JavaScript Drum Kit/index-START.html‎

Lines changed: 75 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,67 +1,83 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
6-
<link rel="stylesheet" href="style.css">
7-
<link rel="icon" href="https://fav.farm/🔥" />
8-
</head>
9-
<body>
10-
11-
12-
<div class="keys">
13-
<div data-key="65" class="key">
14-
<kbd>A</kbd>
15-
<span class="sound">clap</span>
16-
</div>
17-
<div data-key="83" class="key">
18-
<kbd>S</kbd>
19-
<span class="sound">hihat</span>
20-
</div>
21-
<div data-key="68" class="key">
22-
<kbd>D</kbd>
23-
<span class="sound">kick</span>
24-
</div>
25-
<div data-key="70" class="key">
26-
<kbd>F</kbd>
27-
<span class="sound">openhat</span>
28-
</div>
29-
<div data-key="71" class="key">
30-
<kbd>G</kbd>
31-
<span class="sound">boom</span>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css" />
7+
<link rel="icon" href="https://fav.farm/🔥" />
8+
</head>
9+
<body>
10+
<div class="keys">
11+
<div data-key="65" class="key">
12+
<kbd>A</kbd>
13+
<span class="sound">clap</span>
14+
</div>
15+
<div data-key="83" class="key">
16+
<kbd>S</kbd>
17+
<span class="sound">hihat</span>
18+
</div>
19+
<div data-key="68" class="key">
20+
<kbd>D</kbd>
21+
<span class="sound">kick</span>
22+
</div>
23+
<div data-key="70" class="key">
24+
<kbd>F</kbd>
25+
<span class="sound">openhat</span>
26+
</div>
27+
<div data-key="71" class="key">
28+
<kbd>G</kbd>
29+
<span class="sound">boom</span>
30+
</div>
31+
<div data-key="72" class="key">
32+
<kbd>H</kbd>
33+
<span class="sound">ride</span>
34+
</div>
35+
<div data-key="74" class="key">
36+
<kbd>J</kbd>
37+
<span class="sound">snare</span>
38+
</div>
39+
<div data-key="75" class="key">
40+
<kbd>K</kbd>
41+
<span class="sound">tom</span>
42+
</div>
43+
<div data-key="76" class="key">
44+
<kbd>L</kbd>
45+
<span class="sound">tink</span>
46+
</div>
3247
</div>
33-
<div data-key="72" class="key">
34-
<kbd>H</kbd>
35-
<span class="sound">ride</span>
36-
</div>
37-
<div data-key="74" class="key">
38-
<kbd>J</kbd>
39-
<span class="sound">snare</span>
40-
</div>
41-
<div data-key="75" class="key">
42-
<kbd>K</kbd>
43-
<span class="sound">tom</span>
44-
</div>
45-
<div data-key="76" class="key">
46-
<kbd>L</kbd>
47-
<span class="sound">tink</span>
48-
</div>
49-
</div>
50-
51-
<audio data-key="65" src="sounds/clap.wav"></audio>
52-
<audio data-key="83" src="sounds/hihat.wav"></audio>
53-
<audio data-key="68" src="sounds/kick.wav"></audio>
54-
<audio data-key="70" src="sounds/openhat.wav"></audio>
55-
<audio data-key="71" src="sounds/boom.wav"></audio>
56-
<audio data-key="72" src="sounds/ride.wav"></audio>
57-
<audio data-key="74" src="sounds/snare.wav"></audio>
58-
<audio data-key="75" src="sounds/tom.wav"></audio>
59-
<audio data-key="76" src="sounds/tink.wav"></audio>
6048

61-
<script>
49+
<audio data-key="65" src="sounds/clap.wav"></audio>
50+
<audio data-key="83" src="sounds/hihat.wav"></audio>
51+
<audio data-key="68" src="sounds/kick.wav"></audio>
52+
<audio data-key="70" src="sounds/openhat.wav"></audio>
53+
<audio data-key="71" src="sounds/boom.wav"></audio>
54+
<audio data-key="72" src="sounds/ride.wav"></audio>
55+
<audio data-key="74" src="sounds/snare.wav"></audio>
56+
<audio data-key="75" src="sounds/tom.wav"></audio>
57+
<audio data-key="76" src="sounds/tink.wav"></audio>
6258

63-
</script>
59+
<script>
60+
document.addEventListener("keydown", (evt) => {
61+
const audio = document.querySelector(
62+
`audio[data-key="${evt.keyCode}"]`
63+
);
64+
const key = document.querySelector(`.key[data-key="${evt.keyCode}"]`);
65+
if (!audio) return;
66+
key.classList.add("playing");
67+
audio.currentTime = 0;
68+
audio.play();
69+
});
6470

71+
const keys = document.querySelectorAll(".key");
72+
keys.forEach((key) =>
73+
key.addEventListener("transitionend", removeTransition)
74+
);
6575

66-
</body>
76+
function removeTransition(evt) {
77+
if (evt.propertyName == "transform") {
78+
this.classList.remove("playing");
79+
} else return;
80+
}
81+
</script>
82+
</body>
6783
</html>

0 commit comments

Comments
 (0)