A Cool Demo:用键盘演奏架子鼓....

前言

在这个数字音乐盛行的时代，你是否想过，只需轻轻敲击键盘，便能奏响动感十足的架子鼓声？想象一下，无需复杂的乐器，也不必腾出整个房间放置鼓组，只凭借指尖在熟悉的字母键之间跳跃，就能创造出令人振奋的节奏——这一切，即将在你接下来的阅读和实践中成为现实。

我们将携手HTML、CSS、JavaScript这三大前端巨头，从零开始，一步步构建一个既好玩又富有趣味的虚拟键盘架子鼓。HTML负责构建网页的骨架，CSS为它穿上时尚的外衣，而JavaScript则是赋予这个页面灵魂的魔术师，让静态的元素跃动起来，响应你的每一次按键，奏出激昂的鼓点。

别担心，你不需要任何音乐理论基础，也不必是编程高手，只要跟随本文的指引，带着一颗探索未知的心，就能亲手打造出属于自己的音乐小天地。我们保证，这不仅是一次编程实践的旅程，更是一场关于声音与代码的奇妙邂逅。

现在，深呼吸，让我们启程，开启这场音乐与代码交织的冒险吧！

                                    **成品效果图**

成品与键盘的交互效果为①点击键盘的A键时，页面中的A呈现黄色高亮，并且发出CLAP的声音

思路

①html:将三个div(两个文字内容A,CLAP以及音频audio)封装在一个div中,并给div加上属性data-key='65'65为键位'A'的ASCALL码值，在事件监听中起作用。

    <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>

②css:将div盒子设置为display:flex；align-items: center; justify-content:center ;使盒子居中放置，再设置一个按键后高亮的样式.playing{transform: scale(1.1); border-color: #ffc600; box-shadow: 0 0 5px #ffc600; }在按键事件发生时切换状态，其他的div样式细节如下：

html{
    font-size: 10px;      /*css inhert*/
    background: url('./iu.jpg') bottom center;
    background-size: cover;
    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;
}

③js：监听按键后触发的ASCALL码---> window.addEventListener('keyup',playSound)const playSound=()=>{ console.log('sound'); --按A键时输出65 const keyCode=event.keyCode; 通过ascall码得到key对象--->const ele=document.querySelector(.key[data-key="${keyCode}"]) const aud=document.querySelector(audio[id="${keyCode}"]) 最后通过if判断拿到对象是否为空，如果不为空则进行事件的活动--->if(ele){ ele.classList.add('playing') aud.play(); setTimeout(()=>{ ele.classList.remove('playing'); // aud.pause(); },800) }完整js代码如下

const keys=document.querySelectorAll('.key')
//监听键盘

for(var i=0;i<keys.length;i++){
    let key=keys[i];
    // key.addEventListener()
}
const playSound=()=>{
    // console.log('sound');
    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');
        //    aud.pause();
        },800)
    }
}

window.addEventListener('keyup',playSound)

这样我们就得到了一个非常Cool的DrumpKit，能够在平时敲代码疲惫的时候研究一下音乐，放松身心....

小结

在这段充满节奏与代码的旅程尾声，你已不再是键盘敲击的旁观者，而是变身为一位能够指挥音符跳跃的前端魔术师。我们一同见证了从静默无声的代码到活力四射的架子鼓声的华丽转变，而这一切，仅仅始于对HTML、CSS、JavaScript这三剑客的巧妙运用。

回顾这段历程，我们不仅仅构建了一个互动式的虚拟鼓机，更重要的是，解锁了前端开发的无限可能。每一个按下的键盘键位，不仅是旋律的触发，更是你对技术掌握的印证。通过实践，你学会了如何让静态页面活灵活现，理解了响应式设计的魅力，以及如何利用JavaScript捕获用户交互，创造出丰富多样的动态效果。

如果你是一位刚踏入前端世界的新手，或是对编程艺术抱有浓厚兴趣的探索者，那么这份独特的“键盘演奏架子鼓”体验，无疑是激励你深入学习、不断创新的最佳范例。它证明了编程不仅仅是枯燥的语法和逻辑堆砌，它能以最意想不到的方式，让创意与技术碰撞出火花，让平凡变得不凡。

所以，让我们以这场“键盘与鼓点”的交响乐为起点，继续在前端的浩瀚星海中航行，发现更多的奇遇，创造更多的奇迹。给自己的技术之旅点个赞，也为这份对编程的热爱与坚持喝彩。未来的你，定会感谢今天勇于探索、敢于创新的自己。继续加油，前端的舞台正等待着你去点亮！