这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

Coding 一定很累吧，快来跟我一起 Djing ！！！

我的思路是通过监听键盘按下事件，在用户按下对应键时，找到相应的按键元素和音频元素，通过添加和移除 CSS 类实现按键效果，并播放关联的音频文件。同时，通过事件监听器确保在按键元素的过渡动画结束时，移除添加的类，实现按键效果的平滑消失。

话不多说，上代码！

HTML 框架

我们在页面上添加一行按键（A-L），每个按键对应不同的乐器，再用audio元素存放音频存放地址，和对应按键的键盘码，以便于后续 JS 实现。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>做个快乐的DJ</title>

    <link rel="stylesheet" href="./common.css">

</head>

<body>

    <div class="keys">

        <div class="key" data-key="65">

            <div>A</div>

            <span class="sound">clap</span>

        </div>

        <div class="key" data-key="83">

            <div>S</div>

            <span class="sound">hihat</span>

        </div>

        <div class="key"  data-key="68">

            <div>D</div>

            <span class="sound">kick</span>

        </div>

        <div class="key"  data-key="70">

            <div>F</div>

            <span class="sound">openhat</span>

        </div>

        <div class="key"  data-key="71">

            <div>G</div>

            <span class="sound">boom</span>

        </div>

        <div class="key"  data-key="72">

            <div>H</div>

            <span class="sound">ride</span>

        </div>

        <div class="key"  data-key="74">

            <div>J</div>

            <span class="sound">snare</span>

        </div>

        <div class="key"  data-key="75">

            <div>K</div>

            <span class="sound">tom</span>

        </div>

        <div class="key" data-key="76">

            <div>L</div>

            <span class="sound">tink</span>

        </div>

    </div>

    <audio src="./sounds/clap.wav" data-key="65"></audio>

    <audio src="./sounds/hihat.wav" data-key="83"></audio>

    <audio src="./sounds/kick.wav" data-key="68"></audio>

    <audio src="./sounds/openhat.wav" data-key="70"></audio>

    <audio src="./sounds/boom.wav" data-key="71"></audio>

    <audio src="./sounds/ride.wav" data-key="72"></audio>

    <audio src="./sounds/snare.wav" data-key="74"></audio>

    <audio src="./sounds/tom.wav" data-key="75"></audio>

    <audio src="./sounds/tink.wav" data-key="76"></audio>

<script src="./index.js"></script>

</body>

</html>

简单介绍一下：

<div class="keys"> : 包含所有敲击乐按键的容器。
<div class="key" data-key="xx"> : 单个按键元素，包括按键显示的字母和音频描述，data-key属性存放按键的键盘码。
<audio> : 包含音频文件路径和与之关联的按键。

CSS 样式

CSS 样式包含两个部分，重置样式 跟 业务样式。

/* CSS Reset 重置样式*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

    margin: 0;

    padding: 0;

    border: 0;

    font-size: 100%;

    font: inherit;

    vertical-align: baseline;

}

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section {

    display: block;

}

body {

    line-height: 1;

}

ol, ul {

    list-style: none;

}

blockquote, q {

    quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

    content: '';

    content: none;

}

table {

    border-collapse: collapse;

    border-spacing: 0;

}

/*业务样式*/

html{

    height: 100vh;

    font-size: 10px;

    background: url('./background.png') bottom center;/*载入图片*/

    background-size: cover; /*让图片覆盖窗口*/

}

body, html{

    font-family: sans-serif;

}

.keys{

    display: flex;

    align-items: center;

    justify-content: center;/*元素居中*/

    min-height: 100vh;

}

.key{

    border: 0.4rem solid rgb(1, 60, 106);

    border-radius: 0.5rem;

    margin: 1rem;

    font-size: 1.5rem;

    padding: 1rem 0.5rem;

    transition:all 0.7s ease;

    width:10rem;

    text-align: center;

    color: rgb(6, 55, 94);

    box-shadow: 0 0 2rem rgb(0, 75, 121)

}

.playing{ /*触发按键效果*/

    transform: scale(1.1);

    border-color: rgb(248, 117, 117);

    box-shadow: 0 0 2rem rgb(255, 84, 84)

}

.key div{

    font-size: 4rem;

}

.sound{

    font-size: 1.2rem;

    text-transform: uppercase;

    letter-spacing: normal;

    color: rgb(0, 145, 143);

}

简单介绍一下：

重置样式：
- 设置了各种 HTML 元素的默认样式，例如清除列表项、删除引用等，以确保在不同浏览器中获得一致的基本外观。就不过多赘述了。
业务样式：
- rem 是相对于根元素（html 元素）字体大小的单位。这里我们设置默认的根元素字体大小为 10 px，那么.key类的字体大小 1.5 rem 即为15 px。
- .key 类定义了按键的基本样式，包括边框、圆角、阴影、字体大小等。其中transition:all 0.7s ease;这行代码表示所有样式属性在变化时都会以持续 0.7 秒的时间，并采用渐变的速度曲线，从而产生平滑的过渡效果。
- .playing 类定义了按键在播放音频时的样式，增加了缩放和边框颜色的变化，以及阴影效果。其中transform: scale(1.1);表示将元素沿着 X 和 Y 方向同时放大到原始大小的 1.1 倍，使交互更加生动有趣。通过 JS 对这个类的添加和移除，实现按键打击效果，直接化身 DJ 。

JS 实现

// 播放音频和添加按键效果的函数

function playSound(e) {

    const keyCode = e.keyCode;

    const key = document.querySelector(`.key[data-key="${keyCode}"]`);//匹配按键

    // 如果按键存在，添加 playing 类

    key && key.classList.add('playing');

    const audio = document.querySelector(`audio[data-key="${keyCode}"]`);//匹配音频

    // 如果音频存在，重置播放时间并播放音频

    audio && (audio.currentTime = 0, audio.play());

}

// 获取所有带有 .key 类的元素

const keys = Array.from(document.querySelectorAll('.key'))

// 对每个按键添加 transitionend 事件监听器

keys.forEach(key => {

    key.addEventListener('transitionend', function(e) {

        // 如果触发的事件不是 transform，则返回

        if (e.propertyName !== 'transform') return;

        // 移除 playing 类

        this.classList.remove('playing');

    })

})

// 添加全局键盘按下事件监听器，触发 playSound 函数

window.addEventListener('keydown', playSound)

我们挑出几个重点讲讲：

document.querySelector(`.key[data-key="${keyCode}"]`)：

反引号(` `) 是 ES6 引入的模板字面量。它允许你在字符串中嵌入变量。${keyCode} 就是其中的变量插值，这里用来替换为实际的按键码值。
.key[data-key="${keyCode}"] 表示一个 CSS 选择器字符串。它表示选择具有 key 类且具有 data-key 属性值等于 keyCode 的元素。
document.querySelector() 是一个 DOM 操作方法，用于在文档中选择第一个匹配指定选择器的元素。在这里，它选择了具有指定 data-key 属性值的按键元素。

keys.forEach(key => {...}):

key.addEventListener('transitionend', function(e) {...}) ：对每个按键元素添加一个事件监听器，监听过渡动画结束事件。
if (e.propertyName !== 'transform') return; : 判断事件的 propertyName 属性是否为 'transform'，如果是，执行后续的操作，如果不是，则直接返回。
this.classList.remove('playing'); : 如果过渡动画是针对 transform 属性的，那么用 classList.remove 方法从当前元素的类列表中移除名为 'playing' 的类，以使按键效果消失。

综合起来，这段代码确保在每个按键元素上的过渡动画结束时，只处理与 transform 属性相关的事件，以移除添加的 'playing' 类，从而产生按键效果的消失过渡。

最后

Coding 很有趣，闲暇之余，试试 DJing 吧！

已将代码、图片及乐器 wav 文件放到 Gitee，感兴趣的同学可以自取，Coding不易，切勿白嫖！记得点亮 star ！！！

本文转载于:

https://juejin.cn/post/7304615395741466676

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

记录--不做码农而做 DJ 😎的更多相关文章

大学？做码农？做project师？
近期看到一个知乎里非常热闹的讨论.当中讨论到科研能力与project能力,我有非常多感想. 想说说大学CS方向的一些东西. 我不是计算机专业的,如今大二本科工科在读. 我接触编 ...
[2013 eoe移动开发者大会]靳岩：从码农到极客的升级之路
(国内知名Android开发论坛 eoe开发者社区推荐:http://www.eoeandroid.com/) 前天,2013 eoe 移动开发者大会在国家会议中心召开,eoe 开发者社区创始人靳岩在 ...
管理与技术未必不可兼得，一个20年IT老兵的码农生涯
作者|康德胜我是一个喜欢写代码但几乎不太有机会写代码的CTO,也是一个看得懂财务报表.通过所有CFA(金融特许分析师)考试并获得FRM(金融风险经理)认证的拿到金融MBA的CTO,如果我有幸被称作码 ...
码农"混子"的思想转变
首先介绍一下自己,在高中的时候学校对于我们这种普通班级采取的都是放养状态,所以高中的学习真是不咋地,可能除了自己擅长的数学以外其他也就考个三四十分,后来磕磕绊绊的在打游戏之余也会学习,第一次参加高考跟 ...
做为一个.net码农，打开公司的一个项目，大叔我哭了
先说下背景,楼主在上海,之前一直是做BS互联网开发的,今年进入这家公司,是做软件产品的小外企. 然后,啥也不说了,直接上图吧: 因为一个屏幕没有办法显示出来,所以我截了3张图,然后拼成一张,这还是我花 ...
码农，就要做有范儿的geek【网摘】
摘要: “我是个geek,圈子里都称呼我为xx,我周一到周五亲自写写代码,指导指导新人,周末参加圈子的活动,跟别人分享一下我的经验.至于未来嘛,还没想过,反正自己技术水平在这了,呵呵,扎克伯格当年不也 ...
今天在CSDN看懂这个帖子，也是我的困惑，记录一下（过了三十的码农，你选择的是哪个，说出你的想法）
http://bbs.csdn.net/topics/390944177 1.继续开发生涯,做资深码农,从senior.team lead.tech lead到principal,如果你无欲无求,可以 ...
【整理】待毕业.Net码农就业求职储备
声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的.此外,除了技术 ...
android码农神器偷懒工具 android懒人框架 LoonAndroid 3 讲解
LoonAndroid 3.0 Loonandroid是一个注解框架,不涉及任何UI效果,目的是一个功能一个方法,以方法为最小颗粒度对功能进行拆解.把功能傻瓜化,简单化,去掉重复性的代码,隐藏复杂的实 ...
Android码农如何一个星期转为iOS码农（不忽悠）
WeTest 导读作为一个android客户端开发,如果你不懂点ios开发,怎么好意思说自己是客户端开发呢,本文讲解如何让android开发码农在一个星期上手IOS开发 --<记录自己IOS开 ...

随机推荐

[Java][Spring]spring profile与maven profile多环境管理
spring profile 与 maven profile 多环境管理 spring profile Spring profile是Spring提供的多环境管理方案. 如下图: 每种环境都对应一个y ...
使用lvs实现ftp的负载均衡
操作系统:CentOS6.5_x64 问题描述使用lvs实现ftp的负载均衡为了使模型足够简单,这里只实现了loadblance,HA并未实现,可以借助keepalived实现. 具体实现 hos ...
SATA学习笔记——OOB信号
一.SATA物理层概述说OOB之前,首先得了解一下SATA结构以及物理层的含义. SATA主要包括:应用层(Application Layer), 传输层(Transport Layer),链路层( ...
SAS (Statistics Analysis System) 统计分析系统软件
SAS SAS (Statistical Analysis System) 是一个统计软件系统,由 SAS Institute 开发, 用于数据管理, 高级分析, 多元分析, 商业智能, 刑事调查和预 ...
idea自定义代码片段live template
1.介绍有时在idea编辑器经常会写同一个代码块,那么这个代码块就可以利用live template功能把它定义成可根据关键字触发的代码片段,效果如下图: 2.操作步骤此处我们就以springbo ...
[攻防世界][Web]PHP2
打开靶机对应的url 就一行字 Can you anthenticate to this website? 第一感觉就需要做目录文件扫描使用御剑和dirsearch进行扫描,发现一个文件 index ...
Docker方式快速启动一个Redis实例
安装Redis有多种方式,除了可以通过各个平台的软件包工具安装外,还可以直接从源码安装. 但是,安装Redis可能会遇到一些这样的问题,比如: 1.网络环境比较差,下载耗时比较长 2.从源码编译安装时 ...
cookie和服务器Session的区别
cookie和服务器Session的区别 cookie和服务器Session都可用来存储用户信息,cookie存放于客户端,Session存放于web服务器端. 因为cookie存放于客户端有可能被窃 ...
yum源配置脚本
# yum源配置脚本 #!/bin/bash mkdir /etc/yum.repos.d/backup mv /etc/yum.repos.d/*.repo /etc/yum.repos.d/bac ...
pwd模块
# pwd模块提供了获取UNIX平台用户的账户与密码信息(通过文件/etc/passwd),在所有的UNIX版本平台都可以用. # pwd模块返回的是一个类似元组的对象,该对象的各个属性对应于pass ...

记录--不做码农而做 DJ 😎