Skip to content

Commit 554191d

Browse files
author
“Andrew
committed
::sparkles:: added rewind of key noise
1 parent fe83039 commit 554191d

File tree

2 files changed

+144
-117
lines changed

2 files changed

+144
-117
lines changed

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

Lines changed: 69 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,86 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
6-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<title>JS Drum Kit</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

1012

11-
<div class="keys">
12-
<div data-key="65" class="key">
13-
<kbd>A</kbd>
14-
<span class="sound">clap</span>
15-
</div>
16-
<div data-key="83" class="key">
17-
<kbd>S</kbd>
18-
<span class="sound">hihat</span>
19-
</div>
20-
<div data-key="68" class="key">
21-
<kbd>D</kbd>
22-
<span class="sound">kick</span>
23-
</div>
24-
<div data-key="70" class="key">
25-
<kbd>F</kbd>
26-
<span class="sound">openhat</span>
27-
</div>
28-
<div data-key="71" class="key">
29-
<kbd>G</kbd>
30-
<span class="sound">boom</span>
13+
<div class="keys">
14+
<div data-key="65" class="key">
15+
<kbd>A</kbd>
16+
<span class="sound">clap</span>
17+
</div>
18+
<div data-key="83" class="key">
19+
<kbd>S</kbd>
20+
<span class="sound">hihat</span>
21+
</div>
22+
<div data-key="68" class="key">
23+
<kbd>D</kbd>
24+
<span class="sound">kick</span>
25+
</div>
26+
<div data-key="70" class="key">
27+
<kbd>F</kbd>
28+
<span class="sound">openhat</span>
29+
</div>
30+
<div data-key="71" class="key">
31+
<kbd>G</kbd>
32+
<span class="sound">boom</span>
33+
</div>
34+
<div data-key="72" class="key">
35+
<kbd>H</kbd>
36+
<span class="sound">ride</span>
37+
</div>
38+
<div data-key="74" class="key">
39+
<kbd>J</kbd>
40+
<span class="sound">snare</span>
41+
</div>
42+
<div data-key="75" class="key">
43+
<kbd>K</kbd>
44+
<span class="sound">tom</span>
45+
</div>
46+
<div data-key="76" class="key">
47+
<kbd>L</kbd>
48+
<span class="sound">tink</span>
49+
</div>
3150
</div>
32-
<div data-key="72" class="key">
33-
<kbd>H</kbd>
34-
<span class="sound">ride</span>
35-
</div>
36-
<div data-key="74" class="key">
37-
<kbd>J</kbd>
38-
<span class="sound">snare</span>
39-
</div>
40-
<div data-key="75" class="key">
41-
<kbd>K</kbd>
42-
<span class="sound">tom</span>
43-
</div>
44-
<div data-key="76" class="key">
45-
<kbd>L</kbd>
46-
<span class="sound">tink</span>
47-
</div>
48-
</div>
4951

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

60-
<script>
61-
function removeTransition(e) {
62-
if (e.propertyName !== 'transform') return;
63-
e.target.classList.remove('playing');
64-
}
62+
<script>
63+
function removeTransition(e) {
64+
if (e.propertyName !== 'transform') return;
65+
e.target.classList.remove('playing');
66+
}
6567

66-
function playSound(e) {
67-
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
68-
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
69-
if (!audio) return;
68+
function playSound(e) {
69+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
70+
const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
71+
if (!audio) return;
7072

71-
key.classList.add('playing');
72-
audio.currentTime = 0;
73-
audio.play();
74-
}
73+
key.classList.add('playing');
74+
audio.currentTime = 0;
75+
audio.play();
76+
}
7577

76-
const keys = Array.from(document.querySelectorAll('.key'));
77-
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
78-
window.addEventListener('keydown', playSound);
79-
</script>
78+
const keys = Array.from(document.querySelectorAll('.key'));
79+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
80+
window.addEventListener('keydown', playSound);
81+
</script>
8082

8183

8284
</body>
85+
8386
</html>

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

Lines changed: 75 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,66 +1,90 @@
11
<!DOCTYPE html>
22
<html lang="en">
3+
34
<head>
4-
<meta charset="UTF-8">
5-
<title>JS Drum Kit</title>
6-
<link rel="stylesheet" href="style.css">
5+
<meta charset="UTF-8">
6+
<title>JS Drum Kit</title>
7+
<link rel="stylesheet" href="style.css">
78
</head>
9+
810
<body>
911

1012

11-
<div class="keys">
12-
<div data-key="65" class="key">
13-
<kbd>A</kbd>
14-
<span class="sound">clap</span>
15-
</div>
16-
<div data-key="83" class="key">
17-
<kbd>S</kbd>
18-
<span class="sound">hihat</span>
19-
</div>
20-
<div data-key="68" class="key">
21-
<kbd>D</kbd>
22-
<span class="sound">kick</span>
23-
</div>
24-
<div data-key="70" class="key">
25-
<kbd>F</kbd>
26-
<span class="sound">openhat</span>
27-
</div>
28-
<div data-key="71" class="key">
29-
<kbd>G</kbd>
30-
<span class="sound">boom</span>
13+
<div class="keys">
14+
<div data-key="65" class="key">
15+
<kbd>A</kbd>
16+
<span class="sound">clap</span>
17+
</div>
18+
<div data-key="83" class="key">
19+
<kbd>S</kbd>
20+
<span class="sound">hihat</span>
21+
</div>
22+
<div data-key="68" class="key">
23+
<kbd>D</kbd>
24+
<span class="sound">kick</span>
25+
</div>
26+
<div data-key="70" class="key">
27+
<kbd>F</kbd>
28+
<span class="sound">openhat</span>
29+
</div>
30+
<div data-key="71" class="key">
31+
<kbd>G</kbd>
32+
<span class="sound">boom</span>
33+
</div>
34+
<div data-key="72" class="key">
35+
<kbd>H</kbd>
36+
<span class="sound">ride</span>
37+
</div>
38+
<div data-key="74" class="key">
39+
<kbd>J</kbd>
40+
<span class="sound">snare</span>
41+
</div>
42+
<div data-key="75" class="key">
43+
<kbd>K</kbd>
44+
<span class="sound">tom</span>
45+
</div>
46+
<div data-key="76" class="key">
47+
<kbd>L</kbd>
48+
<span class="sound">tink</span>
49+
</div>
3150
</div>
32-
<div data-key="72" class="key">
33-
<kbd>H</kbd>
34-
<span class="sound">ride</span>
35-
</div>
36-
<div data-key="74" class="key">
37-
<kbd>J</kbd>
38-
<span class="sound">snare</span>
39-
</div>
40-
<div data-key="75" class="key">
41-
<kbd>K</kbd>
42-
<span class="sound">tom</span>
43-
</div>
44-
<div data-key="76" class="key">
45-
<kbd>L</kbd>
46-
<span class="sound">tink</span>
47-
</div>
48-
</div>
4951

50-
<audio data-key="65" src="sounds/clap.wav"></audio>
51-
<audio data-key="83" src="sounds/hihat.wav"></audio>
52-
<audio data-key="68" src="sounds/kick.wav"></audio>
53-
<audio data-key="70" src="sounds/openhat.wav"></audio>
54-
<audio data-key="71" src="sounds/boom.wav"></audio>
55-
<audio data-key="72" src="sounds/ride.wav"></audio>
56-
<audio data-key="74" src="sounds/snare.wav"></audio>
57-
<audio data-key="75" src="sounds/tom.wav"></audio>
58-
<audio data-key="76" src="sounds/tink.wav"></audio>
52+
<audio data-key="65" src="sounds/clap.wav"></audio>
53+
<audio data-key="83" src="sounds/hihat.wav"></audio>
54+
<audio data-key="68" src="sounds/kick.wav"></audio>
55+
<audio data-key="70" src="sounds/openhat.wav"></audio>
56+
<audio data-key="71" src="sounds/boom.wav"></audio>
57+
<audio data-key="72" src="sounds/ride.wav"></audio>
58+
<audio data-key="74" src="sounds/snare.wav"></audio>
59+
<audio data-key="75" src="sounds/tom.wav"></audio>
60+
<audio data-key="76" src="sounds/tink.wav"></audio>
61+
62+
<script>
63+
window.addEventListenr('keydown', function(e) {
64+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
65+
if (!audio) return;
5966

60-
<script>
67+
adio.play();
68+
})
6169

62-
</script>
70+
function removeTransition(e) {
71+
if (e.propertyName !== 'transform') return;
72+
e.target.classList.remove('playing');
73+
}
6374

75+
function playSound(e) {
76+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
77+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
78+
if (!audio) return
79+
audio.currentTime = 0;
80+
audio.play();
81+
key.classList.add('playing');
82+
}
83+
const keys = Array.from(document.querySelectorAll('.key'));
84+
keys.forEach(key => key.addEventListener('transitionend', removeTransition));
85+
window.addEventListener('keydown', playSound);
86+
</script>
6487

6588
</body>
89+
6690
</html>

0 commit comments

Comments
 (0)