likes
comments
collection
share

“我用双指成就你的梦想”--用html+css+JavaScript实现键盘演奏架子鼓[前言] 在当今这个数字化旋律飞扬

作者站长头像
站长
· 阅读数 50

[前言]

在当今这个数字化旋律飞扬的时代，你可曾幻想过，仅仅通过轻触屏幕，便能让澎湃的鼓点在你的世界里回响？设想一下，摆脱了笨重的实体乐器，也不再需要在宽敞的空间中安置一整套鼓具，仅仅依靠你在智能手机或平板上的触控操作，就能够编织出动人心弦的节拍——这样的梦想，将在你接下来的探索之旅中变为触手可及的真实。

我们将借助现代网络技术的三位一体：HTML、CSS、以及JavaScript，带你启程，逐步塑造出一个充满乐趣且引人入胜的电子键盘鼓机。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：

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

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部分代码：

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。

总结

如果你想和我一样，在编写代码的时候不那么的无聊，不妨将你们喜欢的各式各样的事物，带来代码的世界。好啦，今天的小知识就分享到这，欢迎各位掘友们一起交流，谢谢大家！

转载自:https://juejin.cn/post/7370682158103756838
评论
请登录