语雀地址: https://www.yuque.com/javascript30/article/drumkit

hi，我是木易，关于我上传搬运js30的视频，已经快有三年了，没想到过了这么久，依然有人通过学习小组来添加我的学习交流群，我还是有一点感慨的。

由于之前的视频没有中文字幕，我决定今年重新将js30的视频制作一遍，加上动画与解说

但是视频的工作量太大，为了给小伙伴们更好的体验，我决定先编写js30的解析写好思路，再制作视频。

本片文章是js30的第一个项目：打击鼓

实现效果

模拟一个打鼓的页面。用户在键盘上按下 ASDFGHJKL 这几个键时，页面上与字母对应的按钮变大变亮，并播放对应的鼓点声音

技术分析

• 按下键盘（监听键盘事件）

• 对应的按钮变大变变亮（改变按键css样式）

• 播放鼓点声音（控制对应的audio标签播放声音）

实现步骤

1. 通过键盘事件 keydown 获取对应的元素

◼ 我们首先来监听 keydown 事件，实现按下按键打印出对应的元素（按键和audio元素）

原版课程中作者使用 keyCode 来获取对应的元素，现在已经不推荐这样做了

KeyboardEvent.keyCode 可以获取对应的按键 Unicode 编码，但是该属性已弃用，推荐使用 KeyboardEvent.code

这里我们使用 code 来获取对应的元素

现在我们按下 A 会打印出这样的结果

2. 播放声音

◼ 获取对应的 audio 元素后，我们来使用 play()方法 播放对应的鼓声，这里我们使用了 currentTime 来实现连续按下按键连续播放的效果，如果不加 currentTime = 0，默认播放有类似节流的效果

currentTime 是 AudioContext 的一个只读属性，返回表示只增不减的硬件时间戳的双精度浮点数，可以用来控制音频回放，实现可视化时间轴等等。该值从 0 开始。

◼ 现在如果我们按下A~L 以外的按键会控制台会报错，我们需要加一些约束条件，当我们没有获取到对应的元素时就退出键盘事件

◼ 添加对应的逻辑判断

3. 按下键盘时改变对应的键盘样式

◼ 当按下键盘时就给对应的盒子添加对应的样式，这里是定义了一个 playing类选择器， 并给对应的盒子添加 transition 动画来实现相应的效果

◼ 按下键盘时就添加 playing样式，动画结束时就移除 playing样式，这里我们有三种做法

监听 audio 结束

◼ 当 audio 播放结束时我们移除样式

定时器控制样式

根据动画时长来控制样式

◼ 我们知道动画持续时间是70ms

◼ 添加定时器，触发事件时我们就添加定时器移除样式，触发事件很频繁时可能看不到样式就移除了，所以我们在触发事件时先移除定时器，再添加一个定时器

transitionend事件控制样式

◼ 获取所有的 键盘元素 然后添加 transitionend 事件，动画结束时移除对应样式

◼ transitionend 会触发多次，为了避免多次执行去除样式的操作，我们可以添加对应的约束条件，减少去除样式的次数

◼ 注意不要通过 transform 或 box-shadow 进行判断，这样会导致频繁触发样式无法消失，暂不清楚bug来源

◼ 进行如下配置将没有上述 bug

完整代码

◼ 这里给出最后一种实现方式的代码

◼ 将代码进行一些封装

其他效果实现

◼ 如果我们想要按下后播放一次的效果（不频繁播放），可以定义一个开关来实现

资料和练习素材都在群里：943158724