Skip to content

Commit bf95bc5

Browse files
soyainesoyaine
committed
complete exercise 02 and the guide
1 parent 5f3cd02 commit bf95bc5

File tree

18 files changed

+704
-2
lines changed

18 files changed

+704
-2
lines changed

‎01 - JavaScript Drum Kit/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ by [缉熙Soyaine](https://github.com/soyaine)
88

99
模拟一个打鼓的页面。用户在键盘上按下 ASDFGHJKL 这几个键时，页面上与字母对应的按钮变大变亮，对应的鼓点声音响起来。
1010

11-
## 关键点
11+
## 关键要点
1212

1313
1. 键盘事件
1414
2. 播放声音
@@ -47,7 +47,7 @@ by [缉熙Soyaine](https://github.com/soyaine)
4747

4848
### ``forEach`` 与箭头函数
4949

50-
使用 ``document.querySelector`` 获取一组符合 CSS 选择符的元素快照，类型为 NodeList，对其进行遍历时可采用 ``forEach`` 方法。
50+
使用 ``document.querySelector`` 获取一组符合 CSS 选择符的元素快照，类型为 NodeList（此对象是对于文档的实时运行的动态查询），对其进行遍历时可采用 ``forEach`` 方法。
5151

5252
```javascript
5353
// Code from http://es6-features.org/#StatementBodies

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

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
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>
31+
</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>
49+
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>
59+
60+
<script>
61+
function removeTransition(event) {
62+
if (event.propertyName !== 'transform') return; // 过滤其中一种事件
63+
event.target.classList.remove('playing'); // 移除高亮的样式
64+
}
65+
66+
function playSound(event) {
67+
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // 根据触发按键的键码，获取对应音频
68+
const key = document.querySelector(`div[data-key="${event.keyCode}"]`); // 获取页面对应按钮 DIV 元素
69+
if (!audio) return; // 处理无效的按键事件
70+
71+
key.classList.add('playing'); // 改变样式
72+
audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
73+
audio.play(); // 播放相应音效
74+
}
75+
76+
const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素
77+
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听
78+
window.addEventListener('keydown', playSound);
79+
</script>
80+
81+
82+
</body>
83+
</html>

‎01 - JavaScript Drum Kit/index-SOYAINE.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">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
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>
31+
</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>
49+
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>
59+
60+
<script>
61+
function removeTransition(event) {
62+
if (event.propertyName !== 'transform') return; // 过滤其中一种事件
63+
event.target.classList.remove('playing'); // 移除高亮的样式
64+
}
65+
66+
function playSound(event) {
67+
const audio = document.querySelector(`audio[data-key="${event.keyCode}"]`); // 根据触发按键的键码，获取对应音频
68+
const key = document.querySelector(`div[data-key="${event.keyCode}"]`); // 获取页面对应按钮 DIV 元素
69+
if (!audio) return; // 处理无效的按键事件
70+
71+
key.classList.add('playing'); // 改变样式
72+
audio.currentTime = 0; // 每次播放之后都使音频播放进度归零
73+
audio.play(); // 播放相应音效
74+
}
75+
76+
const keys = Array.from(document.querySelectorAll('.key')); // 获取页面所有按钮元素
77+
keys.forEach(key => key.addEventListener('transitionend', removeTransition)); // 添加 transition 事件监听
78+
window.addEventListener('keydown', playSound);
79+
</script>
80+
81+
</body>
82+
</html>

‎01 - JavaScript Drum Kit/index-START.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+
<title>JS Drum Kit</title>
6+
<link rel="stylesheet" href="style.css">
7+
</head>
8+
<body>
9+
10+
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>
31+
</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>
49+
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>
59+
60+
<script>
61+
62+
</script>
63+
64+
</body>
65+
</html>

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

130 KB
Binary file not shown.

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

63.4 KB
Binary file not shown.

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

50.9 KB
Binary file not shown.

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

15.2 KB
Binary file not shown.

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

238 KB
Binary file not shown.

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

429 KB
Binary file not shown.

0 commit comments

Comments
 (0)