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

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);
}

简单介绍一下:

  1. 重置样式:

    • 设置了各种 HTML 元素的默认样式,例如清除列表项、删除引用等,以确保在不同浏览器中获得一致的基本外观。就不过多赘述了。
  2. 业务样式:

    • 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}"]`):

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

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

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

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

最后

Coding 很有趣,闲暇之余,试试 DJing 吧!

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

本文转载于:

https://juejin.cn/post/7304615395741466676

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

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

  1. 大学?做码农?做project师?

        近期看到一个知乎里非常热闹的讨论.当中讨论到科研能力与project能力,我有非常多感想. 想说说大学CS方向的一些东西.     我不是计算机专业的,如今大二本科工科在读.     我接触编 ...

  2. [2013 eoe移动开发者大会]靳岩:从码农到极客的升级之路

    (国内知名Android开发论坛 eoe开发者社区推荐:http://www.eoeandroid.com/) 前天,2013 eoe 移动开发者大会在国家会议中心召开,eoe 开发者社区创始人靳岩在 ...

  3. 管理与技术未必不可兼得,一个20年IT老兵的码农生涯

    作者|康德胜 我是一个喜欢写代码但几乎不太有机会写代码的CTO,也是一个看得懂财务报表.通过所有CFA(金融特许分析师)考试并获得FRM(金融风险经理)认证的拿到金融MBA的CTO,如果我有幸被称作码 ...

  4. 码农"混子"的思想转变

    首先介绍一下自己,在高中的时候学校对于我们这种普通班级采取的都是放养状态,所以高中的学习真是不咋地,可能除了自己擅长的数学以外其他也就考个三四十分,后来磕磕绊绊的在打游戏之余也会学习,第一次参加高考跟 ...

  5. 做为一个.net码农,打开公司的一个项目,大叔我哭了

    先说下背景,楼主在上海,之前一直是做BS互联网开发的,今年进入这家公司,是做软件产品的小外企. 然后,啥也不说了,直接上图吧: 因为一个屏幕没有办法显示出来,所以我截了3张图,然后拼成一张,这还是我花 ...

  6. 码农,就要做有范儿的geek【网摘】

    摘要: “我是个geek,圈子里都称呼我为xx,我周一到周五亲自写写代码,指导指导新人,周末参加圈子的活动,跟别人分享一下我的经验.至于未来嘛,还没想过,反正自己技术水平在这了,呵呵,扎克伯格当年不也 ...

  7. 今天在CSDN看懂这个帖子,也是我的困惑,记录一下(过了三十的码农,你选择的是哪个,说出你的想法)

    http://bbs.csdn.net/topics/390944177 1.继续开发生涯,做资深码农,从senior.team lead.tech lead到principal,如果你无欲无求,可以 ...

  8. 【整理】待毕业.Net码农就业求职储备

    声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的.此外,除了技术 ...

  9. android码农神器 偷懒工具 android懒人框架 LoonAndroid 3 讲解

    LoonAndroid 3.0 Loonandroid是一个注解框架,不涉及任何UI效果,目的是一个功能一个方法,以方法为最小颗粒度对功能进行拆解.把功能傻瓜化,简单化,去掉重复性的代码,隐藏复杂的实 ...

  10. Android码农如何一个星期转为iOS码农(不忽悠)

    WeTest 导读 作为一个android客户端开发,如果你不懂点ios开发,怎么好意思说自己是客户端开发呢,本文讲解如何让android开发码农在一个星期上手IOS开发 --<记录自己IOS开 ...

随机推荐

  1. webgl 系列

    webgl 背景 工作所需... 目录 初识 WebGL 绘制一个点 三角形 变换矩阵和动画 渐变三角形 绘制猫 着色器语言

  2. Linux下csv转Excel xlsx文件保持身份证号后三位不被省略

    在Win下, 可以用Excel 或 WPS Spreadsheet里面的Data->Import, 将csv内容正确导入. 但是在Linux下, WPS的Spreadsheet不提供Data-& ...

  3. 【Unity3D】VideoPlayer组件

    1 简介 ​ AudioSource组件中介绍了音频的播放,本文将介绍基于 VideoPlayer 组件实现视频播放. ​ VideoPlayer 属性面板如下: Source:视频源类型,有 2 种 ...

  4. 【Unity3D】灯光组件Light

    1 灯光简介 ​ 在 Hierarchy 窗口右键,选择 Light,再选择具体的灯光类型,在 Inspector 窗口查看灯光组件如下: Type:灯光类型,主要有:Directional(平行光) ...

  5. Swoole从入门到入土(23)——多进程[进程池Process\Pool]

    Swoole提供的进程池为Process\Pool,基于 Swoole\Server 的 Manager 管理进程模块实现.可管理多个工作进程.该模块的核心功能为进程管理,相比 Process 实现多 ...

  6. [攻防世界][Web]ics-06

    打开靶机对应的url,展开是一个网站的样子,其实啥也么有 所有tab都点一遍,发现只有报表中心有内容,url为 http://61.147.171.105:49797/index.php?id=1 猜 ...

  7. SQL Server初体验

    概述 基于SQL Server 2019 Developer免费版搭建一个本地的开发环境. 下载安装 安装文件下载地址:https://www.microsoft.com/zh-cn/sql-serv ...

  8. Basic语言开发笔记:Basic语言介绍、环境搭建、基本语法示例与程序实例

    若该文为原创文章,未经允许不得转载原博主博客地址:https://blog.csdn.net/qq21497936原博主博客导航:https://blog.csdn.net/qq21497936/ar ...

  9. pep8相关规范

    https://www.jianshu.com/p/ffcc66bab3ce 导包规范: 1.首先是标准库,如 import os 2.然后是第三方库,如 from django.conf impor ...

  10. XILINX SDK烧录FLASH报错不支持旧版hw_server

    最近频繁遇到SDK报错,说是不支持hw_server旧版本,此时打开vivado识别的时候也是一样报错,可能原因是我电脑安装了多个版本的VIVADO导致的,那么怎么解决呢? 打开任务管理器,kill ...