[前言]
在当今这个数字化旋律飞扬的时代，你可曾幻想过，仅仅通过轻触屏幕，便能让澎湃的鼓点在你的世界里回响？设想一下，摆脱了笨重的实体乐器，也不再需要在宽敞的空间中安置一整套鼓具，仅仅依靠你在智能手机或平板上的触控操作，就能够编织出动人心弦的节拍——这样的梦想，将在你接下来的探索之旅中变为触手可及的真实。
我们将借助现代网络技术的三位一体：HTML、CSS、以及JavaScript，带你启程，逐步塑造出一个充满乐趣且引人入胜的电子键盘鼓机。HTML作为基石，搭建起网站的框架；CSS则如同画家的调色盘，为其添上绚丽的色彩；而JavaScript，这位幕后英雄，将赋予网页以生命力，使得每一个静止的元素都能随着你的触摸而活灵活现，回应你的每一次点击，演绎出震撼人心的鼓声。
首先，让我们看一下最后的效果图
每按一个键，就会有对应的动画效果和声音，反馈和打击感十足。 话不多说，我们直接上码！
具体思路
1、html+css
（1）、做出页面效果，用div的flex属性，将align-items: center; justify-content :center; 设置主轴（水平）方向，和侧轴（竖直）方向上居中。
（2）、用transition: all .7s ease;来将JS控制的变化变得丝滑一些，不是那么的生硬。
html：
xml
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rich Web Application With HTML5</title>
<link rel="stylesheet" href="./common.css">
</head>
<body>
<div class="keys">
<div class="key" data-key="65">
<div class="title">A</div>
<span class="sound">clap</span>
<audio src="./sounds/boom.wav" id="65"></audio>
</div>
<div class="key" data-key="83">
<div class="title">S</div>
<span class="sound">hihat</span>
<audio src="./sounds/clap.wav" id="83"></audio>
</div>
<div class="key" data-key="68">
<div class="title">D</div>
<span class="sound">kick</span>
<audio src="./sounds/hihat.wav" id="68"></audio>
</div>
<div class="key" data-key="70">
<div class="title">F</div>
<span class="sound">openhat</span>
<audio src="./sounds/kick.wav" id="70"></audio>
</div>
<div class="key" data-key="71">
<div class="title">G</div>
<span class="sound">boom</span>
<audio src="./sounds/openhat.wav" id="71"></audio>
</div>
<div class="key" data-key="72">
<div class="title">H</div>
<span class="sound">sound</span>
<audio src="./sounds/ride.wav" id="72"></audio>
</div>
<div class="key" data-key="74">
<div class="title">J</div>
<span class="sound">snare</span>
<audio src="./sounds/snare.wav" id="74"></audio>
</div>
<div class="key" data-key="75">
<div class="title">K</div>
<span class="sound">tom</span>
<audio src="./sounds/tink.wav" id="75"></audio>
</div>
<div class="key" data-key="76">
<div class="title">L</div>
<span class="sound">tink</span>
<audio src="./sounds/tom.wav" id="76"></audio>
</div>
</div>
<script>
</script>
</body>
</html>
css:
css
复制代码
html{
font-size: 10px; /*css inhert*/
background: url('./pic.avif') bottom center;
background-size:100% 100%;
background-attachment:fixed;
}
html,body{
height: 100%;
}
.keys{
display: flex;
min-height: 100%;
align-items: center;
justify-content:center ;
}
.key{
width: 80px;
height: 80px;
border: 5px solid black;
border-radius: 5px;
margin: 10px;
font-size: 15px;
padding: 10px 5px;
/* 过渡动画 */ /*样式改变是慢慢改变，在0.7s内缓慢改变样式*/
transition: all .7s ease;
width: 100px;
text-align: center;
color: white;
background: rgba(0,0,0,.4);
text-shadow: 0 0 5px black; /*立体感*/
}
.title{
font-size: 40px;
}
.sound{
font-style: 12px;
text-transform: uppercase;
letter-spacing: 1px;
color: #ffc600;
}
.playing{
transform: scale(1.1);
border-color: #ffc600;
box-shadow: 0 0 5px #ffc600;
}
audio{
display: flex;
}
2、JavaScript
（1）、给每个“鼓点”加上监听事件。
（2）、const playSound = () => { - 定义了一个箭头函数playSound，这个函数将在按键松开时被调用。
（3）、const ele = document.querySelector(.key[data-key="${keyCode}"]) - 根据键码值选择对应的DOM元素。这个元素应该有一个data-key属性，其值等于键码值。
（4）、window.addEventListener('keyup', playSound) - 在窗口对象上添加一个事件监听器，监听'keyup'事件（即按键松开事件），当事件发生时调用playSound函数。
js部分代码：
javascript
复制代码
const keys=document.querySelectorAll('.key')
//监听键盘事件
for(var i=0;i<keys.length;i++){
let key=keys[i];
}
const playSound=()=>{
const keyCode=event.keyCode;
console.log(keyCode);
const ele=document.querySelector(`.key[data-key="${keyCode}"]`)
const aud=document.querySelector(`audio[id="${keyCode}"]`)
console.log(ele);
if(ele){
ele.classList.add('playing')
aud.play();
setTimeout(()=>{
ele.classList.remove('playing');
},1000)
}
}
window.addEventListener('keyup',playSound)
这样我们就完成了一个很fantastic的demo。
总结
如果你想和我一样，在编写代码的时候不那么的无聊，不妨将你们喜欢的各式各样的事物，带来代码的世界。好啦，今天的小知识就分享到这，欢迎各位掘友们一起交流，谢谢大家！
源文：“我用双指成就你的梦想”--用html+css+JavaScript实现键盘演奏架子鼓
如有侵权请联系站点删除！
