Skip to content

Commit ba68698

Browse files
xiaobenlikexiaobenlike
committed
备份
1 parent 92d0d27 commit ba68698

3 files changed

Lines changed: 250 additions & 1 deletion

File tree

‎01 - JavaScript Drum Kit/index-XIAOBENLIKE-PLUGIN.html‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
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+
61+
<script type="text/javascript">
62+
// 启用严格模式
63+
"use strict";
64+
/*
65+
以插件的方式实现
66+
目的：按下相应的按键，发出对应的声音，并改变对应元素的class
67+
分析：
68+
交互：按下按钮
69+
dom操作：改变class
70+
内部逻辑：播放声音，判断是否是按下的对应按键
71+
*/
72+
const TOOLS = (()=>{
73+
return {
74+
// 删除class
75+
removeClass: function(ele, className){
76+
// classList ie10
77+
ele.classList.remove(className);
78+
},
79+
// 添加class
80+
addClass: function(ele, className){
81+
ele.classList.add(className);
82+
}
83+
};
84+
})();
85+
/*
86+
功能分析：
87+
1、Dom操作：改变样式
88+
2、交互: 按下
89+
3、自身逻辑：判断是否是指定按键=>播放音乐
90+
居然不能new！=> 要使用class!
91+
*/
92+
const DRUM = (conf)=>{
93+
const KEY = document.querySelector(conf.key),
94+
AUDIO = document.querySelector(conf.audio);
95+
const Action = ()=>{
96+
// 监听按下按键
97+
window.addEventListener("keydown", );
98+
// 监听transition结束
99+
}
100+
101+
const Item = {
102+
press: (event)=>{
103+
const _this = Item;
104+
//判断是否是当前的按键
105+
const flag = _this.ifSelf();
106+
if(flag){
107+
_this.play();
108+
}
109+
},
110+
play: ()=>{
111+
TOOLS.addClass(KEY, conf.className);
112+
AUDIO.currentTime = 0;
113+
AUDIO.play();
114+
}
115+
};
116+
//初始化
117+
this.init = ()=>{
118+
Action();
119+
}
120+
}
121+
const conf = {
122+
audio: "audio[data-key=65]",
123+
ele: "div[data-key=65]",
124+
className: "playing"
125+
}
126+
// const clap = new DRUM(conf);
127+
128+
</script>
129+
130+
</body>
131+
</html>

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

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
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+
61+
<script type="text/javascript">
62+
// 启用严格模式
63+
"use strict";
64+
/*
65+
目的：按下相应的按键，发出对应的声音，并改变对应元素的class
66+
分析：
67+
交互：按下按钮
68+
dom操作：改变class
69+
内部逻辑：播放声音，判断是否是按下的对应按键
70+
*/
71+
const TOOLS = (()=>{
72+
return {
73+
// 删除class
74+
removeClass: function(ele, className){
75+
// classList ie10
76+
ele.classList.remove(className);
77+
},
78+
// 添加class
79+
addClass: function(ele, className){
80+
ele.classList.add(className);
81+
}
82+
};
83+
})();
84+
const DRUM = (()=>{
85+
return {
86+
press: (event)=>{
87+
const code = event.keyCode;
88+
// querySelector ie11
89+
const audio = document.querySelector(`audio[data-key="${code}"]`),
90+
key = document.querySelector(`div[data-key="${code}"]`);
91+
92+
// 不存在则返回
93+
if(!audio) return;
94+
95+
// 存在：播放音乐 + 改变样式
96+
DRUM.sing(audio);
97+
TOOLS.addClass(key, "playing")
98+
},
99+
sing: (ele)=>{
100+
//归0
101+
ele.currentTime = 0;
102+
ele.play();
103+
},
104+
stop:(event)=>{
105+
TOOLS.removeClass(event.target, "playing");
106+
}
107+
};
108+
})();
109+
// 交互
110+
window.addEventListener("keydown",DRUM.press,false);
111+
const keys = Array.from(document.querySelectorAll("div[data-key]"));
112+
keys.forEach((v)=>{
113+
v.addEventListener("transitionend", DRUM.stop, false);
114+
});
115+
</script>
116+
117+
</body>
118+
</html>

‎01 - JavaScript Drum Kit/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
html {
22
font-size: 10px;
3-
background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;
3+
/*background:url(http://i.imgur.com/b9r5sEL.jpg) bottom center;*/
44
background-size: cover;
55
}
66
body,html {

0 commit comments

Comments
 (0)