likes
comments
collection
share

html5：如何实现drum Kit架子鼓想象一下，用户只需轻轻点击屏幕，便能模拟出鼓组中各个部件的真实音效，今天我们就

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

前言

在数字音乐与Web技术飞速融合的今天，将传统乐器的魅力以全新的互动形式带入网络空间成为了一种趋势。其中，HTML5作为现代网页开发的核心技术，以其强大的多媒体处理能力和跨平台兼容性，为在线音乐教育、娱乐体验开辟了无限可能。在这篇深度解析文章中，我们将共同踏上一场别开生面的创作之旅，探索如何利用HTML5技术，从零开始构建一个既富有趣味性又不失专业感的在线Drum Kit（电子架子鼓）。

想象一下，用户只需轻轻点击屏幕，便能模拟出鼓组中各个部件的真实音效，无论是深沉的底鼓、清脆的军鼓，还是悦耳的镲片，一切尽在指尖跳跃之间。这样的互动体验，不仅能激发音乐爱好者的创作灵感，也让编程爱好者有机会深入了解HTML5音频处理、事件监听及响应式设计的精髓。

今天我们就用html+css+javascript来实现电子架子鼓。我们先来看看效果图。

html5：如何实现drum Kit架子鼓想象一下，用户只需轻轻点击屏幕，便能模拟出鼓组中各个部件的真实音效，今天我们就

实现过程

1. html结构

一个页面我们先做结构，这个页面结构很简单，只有九个盒子。用一个keys容器容纳九个按键小盒子key，每个小盒子key中包裹着title和sound。

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>
        </div>
        <div class="key" data-key="83">
            <div class="title">S</div>
            <span class="sound">hihat</span>
        </div>
        <div class="key" data-key="68">
            <div class="title">D</div>
            <span class="sound">kick</span>
        </div>
        <div class="key" data-key="70">
            <div class="title">F</div>
            <span class="sound">openhat</span>
        </div>
        <div class="key" data-key="71">
            <div class="title">G</div>
            <span class="sound">boom</span>
        </div>
        <div class="key" data-key="72">
            <div class="title">H</div>
            <span class="sound">sound</span>
        </div>
        <div class="key" data-key="74">
            <div class="title">J</div>
            <span class="sound">snare</span>
        </div>
        <div class="key" data-key="75">
            <div class="title">K</div>
            <span class="sound">tom</span>
        </div>
        <div class="key" data-key="76">
            <div class="title">L</Leg></div>
            <span class="sound">tink</span>
        </div>
    </div>
    <script src="./common.js"></script>
</body>
</html>
2. css样式

通过设置 html 元素的 font-size 为 10px，为后续的相对单位字体大小设定一个基准。 html 的背景被设置为一张图片（background.jpg），该图片被放置在页面底部中央，并通过 background-size: cover; 确保图片覆盖整个容器，适应不同屏幕尺寸。html 和 body 的高度均设为 100%，确保页面填满整个视口。

.keys 类用于创建一个弹性布局（display: flex;），justify-content: center;和text-align: center;使得内部元素能够水平和垂直居中对齐。这个容器用于包含所有鼓键元素，保证它们在页面上整齐排列。

.key 类定义了每个鼓键的基本样式，包括边框、圆角、内外边距、字体大小、过渡动画等，使鼓键具有基本的视觉外观和触感反馈。transition 属性添加了过渡效果，当鼓键状态改变时（例如被点击时），其尺寸和边框颜色会有平滑的变化。text-shadow 为鼓键上的文字提供了阴影效果，增强了视觉上的立体感。

.playing 类被应用于被激活（正在播放声音）的鼓键，通过改变其缩放比例、边框颜色和阴影效果，给予用户明确的反馈，表明当前所选的鼓键。

/* css reset */
html{
    font-size: 10px;/* css inhert 继承属性 */
    background: url('./background.jpg') bottom center;
    background-size: cover;
}
html, body{
    height: 100%;
}

.keys {
    display: flex;
    min-height: 100%;
    align-items: center;
    justify-content: center;
}
.key {
    border: 4px solid black;
    border-radius: 5px;
    margin: 10px;
    font-size: 15px;
    padding: 10px 5px;
    /* 过渡动画 */
    transition: all .7s ease;
    width: 100px;
    text-align: center;
    color: white;
    background: rgba(0,0,0,.4);
    text-shadow: 0 0 5px black; /* 带来立体感 阴影 */
}

.key .title {
    font-size: 40px;
}
.sound {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ffc600;
}

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

先选取所有拥有.key类的DOM元素，就是那些键盘按钮， 然后为按钮添加监听事件。

定义一个函数const playSound = (event) => {}，当用户按键盘后，它会获取对应的键码值，然后查找与该键码值匹配的.key元素，找到对应的元素后，它会添加playing类来触发CSS中的动画效果，并在短暂延迟后移除该类，以实现按钮被按下的视觉反馈效果。

window.addEventListener('keyup', playSound);用来监听全局的键盘按键抬起事件，当用户释放任何键盘键时，会调用playSound函数。

const keys = document.querySelectorAll(".key");

for (let i = 0; i < keys.length; i++) {
    let key = keys[i];
}

const playSound = (event) => {
    const keyCode = event.keyCode;  
    const ele = document.querySelector(`.key[data-key="${keyCode}"]`);
    if (ele) {
        ele.classList.add('playing');
        setTimeout(() => {
            ele.classList.remove('playing');   // 在800毫秒后移除'playing'类，恢复原状
        }, 800);
    }
}

window.addEventListener('keyup', playSound);

结语

至此，我们就成功的写出了电子架子鼓，希望你们可以从我的文章中学到一些知识，你们也快去实现吧！

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