Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 0056951

Browse files
Day 01 files
1 parent bdbc490 commit 0056951

File tree

13 files changed

+152
-0
lines changed

13 files changed

+152
-0
lines changed

‎Day 01 - Drum Kit/background.jpg

853 KB
Loading[フレーム]

‎Day 01 - Drum Kit/index.html

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>JS Drum Kit</title>
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h1>Drum Kit</h1>
13+
<div class="keys">
14+
<div class="key" data-key="65">
15+
<kbd>A</kbd>
16+
<span class="sound">clap</span>
17+
</div>
18+
<div class="key" data-key="83">
19+
<kbd>S</kbd>
20+
<span class="sound">hihat</span>
21+
</div>
22+
<div class="key" data-key="68">
23+
<kbd>D</kbd>
24+
<span class="sound">kick</span>
25+
</div>
26+
<div class="key" data-key="70">
27+
<kbd>F</kbd>
28+
<span class="sound">openhat</span>
29+
</div>
30+
<div class="key" data-key="71">
31+
<kbd>G</kbd>
32+
<span class="sound">boom</span>
33+
</div>
34+
<div class="key" data-key="72">
35+
<kbd>H</kbd>
36+
<span class="sound">ride</span>
37+
</div>
38+
<div class="key" data-key="74">
39+
<kbd>J</kbd>
40+
<span class="sound">snare</span>
41+
</div>
42+
<div class="key" data-key="75">
43+
<kbd>K</kbd>
44+
<span class="sound">tom</span>
45+
</div>
46+
<div class="key" data-key="76">
47+
<kbd>L</kbd>
48+
<span class="sound">tink</span>
49+
</div>
50+
</div>
51+
</div>
52+
53+
<audio data-key="65" src="sounds/clap.wav"></audio>
54+
<audio data-key="83" src="sounds/hihat.wav"></audio>
55+
<audio data-key="68" src="sounds/kick.wav"></audio>
56+
<audio data-key="70" src="sounds/openhat.wav"></audio>
57+
<audio data-key="71" src="sounds/boom.wav"></audio>
58+
<audio data-key="72" src="sounds/ride.wav"></audio>
59+
<audio data-key="74" src="sounds/snare.wav"></audio>
60+
<audio data-key="75" src="sounds/tom.wav"></audio>
61+
<audio data-key="76" src="sounds/tink.wav"></audio>
62+
63+
<script src="index.js"></script>
64+
</body>
65+
</html>

‎Day 01 - Drum Kit/index.js

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
function playSound(e) {
2+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
3+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
4+
if (!audio) {
5+
return; //stop running the function
6+
}
7+
8+
audio.currentTime = 0; //rewind to the start
9+
audio.play();
10+
key.classList.add("playing");
11+
}
12+
13+
function removeTransition(e) {
14+
if (e.propertyName !== "transform") {
15+
return; //skip it if it's not transform
16+
}
17+
e.target.classList.remove("playing");
18+
}
19+
20+
const keys = Array.from(document.querySelectorAll(".key"));
21+
keys.forEach((key) => key.addEventListener("transitionend", removeTransition));
22+
23+
window.addEventListener("keydown", playSound);

‎Day 01 - Drum Kit/sounds/boom.wav

130 KB
Binary file not shown.

‎Day 01 - Drum Kit/sounds/clap.wav

63.4 KB
Binary file not shown.

‎Day 01 - Drum Kit/sounds/hihat.wav

50.9 KB
Binary file not shown.

‎Day 01 - Drum Kit/sounds/kick.wav

15.2 KB
Binary file not shown.

‎Day 01 - Drum Kit/sounds/openhat.wav

238 KB
Binary file not shown.

‎Day 01 - Drum Kit/sounds/ride.wav

429 KB
Binary file not shown.

‎Day 01 - Drum Kit/sounds/snare.wav

32.6 KB
Binary file not shown.

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /