一步一步教你实现一个完整的网页版架子鼓
推荐超级课程：
我们将实现一个网页版的架子鼓，可以让用户通过键盘按键来实现击打架子鼓的功能。 每个不同的架子鼓的部位时，我们还会改变对应的背景颜色来区分不同的声音。
代码实现
首先，我们要实现响应用户按键对应的架子鼓部位的发声逻辑。 创建一个drum.js文件，
$(function(){
var dir = 'sounds/';
var ext = 'mp3';
# 各个部位对应的不同背景色
var sounds = {
'kick': { color: '0056b9' },
'snare': { color: 'ab47cb' },
'snare_low': { color: 'eaa8ff' },
'sticks': { color: 'a3d771' },
'tom_high': { color: '489dff' },
'tom_mid': { color: '0a7bff' },
'tom_low': { color: '016fde' },
'hihat_open': { color: 'ff5817' },
'hihat_closed': { color: 'ff7964' },
'cymbal_crash_l': { color: 'ffbf4d' },
'cymbal_crash_r': { color: 'ffbf4d' },
'cymbal_chinese': { color: 'ff5817' },
};
# 对应键盘的按键key
var map = {
32: 'kick', // space
71: 'snare', // g
72: 'snare', // h
70: 'snare_low', // f
86: 'snare_low', // v
66: 'snare_low', // b
78: 'snare_low', // n
74: 'snare_low', // j
67: 'sticks', // c
77: 'sticks', // m
53: 'tom_high', // 5
54: 'tom_high', // 6
82: 'tom_high', // r
84: 'tom_high', // t
89: 'tom_high', // y
56: 'tom_mid', // 8
57: 'tom_mid', // 9
85: 'tom_mid', // u
73: 'tom_mid', // i
79: 'tom_mid', // o
75: 'tom_low', // k
76: 'tom_low', // l
186: 'tom_low', // +
188: 'tom_low', // <
190: 'tom_low', // >
65: 'hihat_open', // a
83: 'hihat_open', // s
68: 'hihat_closed', // d
90: 'hihat_closed', // z
88: 'hihat_closed', // x
50: 'cymbal_crash_l', // 2
51: 'cymbal_crash_l', // 3
81: 'cymbal_crash_l', // q
87: 'cymbal_crash_l', // w
69: 'cymbal_crash_l', // e
189: 'cymbal_crash_r', // =
187: 'cymbal_crash_r', // ~
80: 'cymbal_crash_r', // p
219: 'cymbal_crash_r', // @{
221: 'cymbal_crash_r', // }
13: 'cymbal_chinese', // Enter
};
var objects = {};
$.each(sounds, function( sound, option ){
var path = dir + sound + '.' + ext;
objects[sound] = new Audio(path);
});
# 当按键按下时，播放声音
$(window).keydown(function(key){
var sound = map[key.keyCode];
if (!sound){ return }
var audio = objects[sound];
audio.pause();
audio.currentTime = 0;
audio.play();
flash(sounds[sound].color);
return false;
});
# 改变对应背景色
function flash(color){
$("body")
.css({ 'background-color': "#"+color })
.animate({ backgroundColor: "#999" });
}
});
然后，我们写一个简单的架子鼓页面，来启用我们的drum.js的架子鼓程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>架子鼓</title>
<link href='http://fonts.googleapis.com/css?family=Lato:700' rel='stylesheet' type='text/css'>
<style type="text/css">
body {
color: #fff;
background-color: #999;
text-align: center;
font-family: 'Lato', cursive;
}
h1 {
font-size: 400%;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="assets/jquery.color-2.1.2.min.js"></script>
<script src="assets/drum.js" type="text/javascript"></script>
</head>
<body>
<h1>键盘架子鼓</h1>
<img src="assets/map.gif" />
</body>
</html>
最终的实现效果： 键盘架子鼓
