制作Drumkit网页乐器：HTML5、CSS3与JavaScript实战解析

常乐hhh
1,379 阅读5分钟

前言

在数字音乐与网页技术日益融合的今天，利用HTML、CSS和JavaScript DIY一个虚拟鼓套装不仅是一种创新的尝试，也是对音乐和技术热爱的完美结合。本文将引领你踏上一场代码与节奏的交响之旅，亲手打造一款互动性强、界面美观的在线鼓机。无需任何物理材料，只需你的创意和一行行代码，即可敲击出属于你自己的音乐节拍。

上一篇文章中，我们已经diy了一个属于自己的时钟，然而本文，我将带着你们一起做一个独属于自己的drumpkit。let's just do it

废话不多说，直接开干

开始制作

规划布局（HTML）

我们首先从HTML开始，它是网页的骨架。先定义了一个包含多个按键的鼓垫keys，每个按键key对应一个键盘字母键title（如A、S、D等）和对应的声音sound（如clap、hihat、kick等），并通过data-key和data-sound自定义属性绑定了键盘码和声音文件路径。

具体代码如下：

<div class="keys">
        <div class="key" data-key="65" data-sound="./sounds/clap.wav">
            <div class="title">A</div>
            <span class="sound">clap</span>
        </div>
        <div class="key" data-key="83" data-sound="./sounds/hihat.wav">
            <div class="title">S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key" data-key="68"data-sound="./sounds/kick.wav">
            <div class="title">D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key" data-key="70"data-sound="./sounds/openhat.wav">
            <div class="title">F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key"  data-key="71"data-sound="./sounds/boom.wav">
            <div class="title">G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key" data-key="72"data-sound="./sounds/ride.wav">
            <div class="title">H</div>
            <span class="sound">ride</span>
        </div>
        <div class="key" data-key="74"data-sound="./sounds/snare.wav">
            <div class="title">J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key" data-key="75"data-sound="./sounds/tom.wav">
            <div class="title">K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76"data-sound="./sounds/tink.wav">
            <div class="title">L</div>
            <span class="sound">tink</span>
        </div>
    </div>

看到这么多相同的地方，在vscode上我们可以利用Emmet与模块化思维

什么是 Emmet与模块化思维

Emmet 是前端开发中的一个神器，尤其在 Visual Studio Code 中，它通过简洁的缩写语法极大地加速了 HTML 和 CSS 的编写过程。例如，在上面那种场景中，我们只需要输入.keys > (.key>(.title+span.sound))*9，Emmet 自动展开为包含这些元素的容器代码。这不仅提升了编码速度，也让代码结构更加清晰。

美化界面（CSS）

  1. 整体重置 (CSS Reset)

    设置整个页面的基础字体大小为10px，给整个页面设置背景图片，图片位于底部中心，且自动缩放以覆盖整个背景。

    /*css reset*/
html{
    font-size: 10px;/*css inhert*/
    background:url('./background.jpg') bottom center ;
    background-size: cover;
}

  2. 布局调整

    确保html和body的高度占满全屏，这对于接下来的全屏布局很重要。

    html,body{
    height: 100%;
}

  3. 键盘布局

    使用弹性布局使其内容在垂直方向居中对齐，同时保证至少高度为全屏，方便居中显示所有按键。

     ```css
 .keys{
     display: flex;
     min-height: 100%;
     align-items: center;
     justify-content: center;
 }
 ```

  4. 单个按键样式

    设置按键的基本样式，包括边框、圆角、内外边距、字体大小、文本居中、字体颜色、背景色以及文本阴影，让按键看起来有立体感。

    过渡动画的设计：当按键状态改变时，它的所有样式变化都会在0.7秒内平滑过渡，增加交互的流畅度。

    .key{
    border: 4px solid #000;
    border-radius: 10px;
    margin: 15px;
    font-size: 30px;
    padding: 10px 5px;
    transition: all .7s ease;/*过渡动画*/
    width: 150px;
    text-align: center ;
    color: white;
    background: rgba(0, 0, 0, .4);
    text-shadow: 0 0 10px #000;/*字体阴影，带来立体感（xyz加颜色）*/
}

  5. 按键标题与音效文字

    字体大小会被设置为100px;设置与音效有关的文字样式，包括字体大小、全部转为大写字母、字母间隔，以及黄色字体颜色，让信息突出且易于阅读。

    .key.title{
    font-size: 100px;
}
.sound{
    font-size: 15px;
    text-transform: uppercase;/*字体大写*/
    letter-spacing: 1px;
    color: #ffc600;
}

  6. 按键激活状态

    当按键处于激活或播放状态时，它的大小会略微放大（1.1倍），边框变为黄色，并添加一个淡黄色的阴影效果，使得用户能明显感知到按键已被点击或激活

     .playing{
    transform: scale(1.1);
    border-color: #ffc600;
    box-shadow: 0 0 5px #ffc600;
}

注入生命（JavaScript）

最后，JavaScript赋予了网页生命。我们遍历所有鼓垫按键，并为整个页面添加了一个键盘弹起(keyup)事件监听器

const keys=document.querySelectorAll('.key');
const keysounds=document.getElementById('keysounds');

// 为键盘按键绑定事件处理函数

const playSound = (event)=>{
    const keyCode = event.keyCode;
    const ele=document.querySelector(`.key[data-key="${keyCode}"]`);
    if (ele) {//安全
    
         // 添加激活样式
        ele.classList.add('playing');
        
        // 播放声音
        const keysound = ele.getAttribute(`data-sound`)
        keysounds.src=keysound; //音频播放，动态改变音频路径
        keysounds.currentTime = 0;//每次播放从头开始
        keysounds.play();
        
        // 激活效果限时移除
        setTimeout(()=>{
            ele.classList.remove('playing');
        },800)
        
    }
}

window.addEventListener('keyup',playSound);
  • addEventListener方法用于监听DOM事件，这里是监听键盘按键释放，实现即时响应。
  • ele.classList.add('playing')利用JavaScript操作DOM元素，如添加或移除类，实现动态样式变换。

HTML、CSS和JavaScript三剑客的打造已经完成了，不过别忘记在html中加入css、js的调用以及音频的上传

CSS与JS的放置策略

<!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>
    <audio id="keysounds" src="./sounds/"></audio>
    <script src="./common.js" ></script>
</body>
</html>

为了确保页面能够迅速展现在用户面前，CSS 文件应当放置在文档的头部。这样做可以让浏览器尽早开始渲染页面，即使是在脚本和图片等其他资源还在加载时，用户也能看到基本的页面框架，显著提升首次渲染速度。

相反，JavaScript 文件则推荐放置在<body>标签的底部。因为脚本执行会阻塞页面的渲染，将其置于底部可以确保页面内容先行渲染，从而达到“内容优先”的用户体验优化目标。

okok，来看看实际成果吧🥰🥰

image.png

可还行昂，喜欢的话自己也可以去DIY一个哦🥰(●'◡'●)

avatar
文章
阅读
粉丝