用 JavaScript 实现网页鼓乐器，相关的初始代码在 JavaScript30 官网和 GitHub 上已经存在。我把 sound 文件夹下的音频全部替换掉了，一些相关解释也直接在注释中标明。

下面是最终成品地址，可能有些卡顿，音频加载也比较慢：

结果展示

index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JS Drum Kit</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div class="keys">
    <div data-key="65" class="key">
      <!--<kbd> 标签定义键盘文本-->
      <kbd>A</kbd>
      <span class="sound">clock</span>
    </div>
    <div data-key="83" class="key">
      <kbd>S</kbd>
      <span class="sound">pin</span>
    </div>
    <div data-key="68" class="key">
      <kbd>D</kbd>
      <span class="sound">gong</span>
    </div>
    <div data-key="70" class="key">
      <kbd>F</kbd>
      <span class="sound">ding-dong</span>
    </div>
    <div data-key="71" class="key">
      <kbd>G</kbd>
      <span class="sound">pulse</span>
    </div>
    <div data-key="72" class="key">
      <kbd>H</kbd>
      <span class="sound">robot</span>
    </div>
    <div data-key="74" class="key">
      <kbd>J</kbd>
      <span class="sound">wooden fish</span>
    </div>
    <div data-key="75" class="key">
      <kbd>K</kbd>
      <span class="sound">toaster</span>
    </div>
    <div data-key="76" class="key">
      <kbd>L</kbd>
      <span class="sound">bell</span>
    </div>
  </div>

  <audio data-key="65" src="sound/clock.mp3"></audio>
  <audio data-key="83" src="sound/pin.mp3"></audio>
  <audio data-key="68" src="sound/gong.mp3"></audio>
  <audio data-key="70" src="sound/ding-dong.mp3"></audio>
  <audio data-key="71" src="sound/pulse.mp3"></audio>
  <audio data-key="72" src="sound/robot.mp3"></audio>
  <audio data-key="74" src="sound/wooden fish.mp3"></audio>
  <audio data-key="75" src="sound/toaster.mp3"></audio>
  <audio data-key="76" src="sound/bell.mp3"></audio>

  <script>
    function removeTransition(e) {
      if (e.propertyName !== 'transform') return;
      e.target.classList.remove('playing');
    }

    function playSound(e) {
      const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
      const key = document.querySelector(`div[data-key="${e.keyCode}"]`);
      if (!audio) return;

      key.classList.add('playing');
      audio.currentTime = 0;
      audio.play();
    }
    const keys = Array.from(document.querySelectorAll('.key'));
    keys.forEach(key => key.addEventListener('transitionend',
      removeTransition));
    window.addEventListener('keydown', playSound);

    /*
    1. forEach() 方法用于调用数组的每个元素，并将元素传递给回调数。
    语法：array.forEach(function(currentValue, index, arr),thisValue)
    2. addEventListener() 方法用于向指定元素添加事件句柄。
    element.addEventListener(event, function, useCapture)
    transitionend：该事件在 CSS 完成过渡后触发。
    3. 箭头函数
    x => x * x
    上面的箭头函数相当于：
    function (x) {
        return x * x;
    }
    */
  </script>

</body>

</html>

style.css:

html {
  font-size: 10px;
  background: white bottom center;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex: 1;  /*让所有弹性盒模型对象的子元素都有相同的长度，且忽略它们内部的内容*/
  min-height: 100vh;
  /*align-items 属性定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式*/
  align-items: center;
  justify-content: center;  /*元素在页面主轴上的排列，此处居中*/
}

.key {
  border: 4px solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  /*
  语法 transition: property duration timing-function delay;
  transition-property   规定设置过渡效果的 CSS 属性的名称。
  transition-duration   规定完成过渡效果需要多少秒或毫秒。
  transition-timing-function    规定速度效果的速度曲线。
  transition-delay  定义过渡效果何时开始。
  */
  width: 10rem;
  text-align: center;
  color: white;
  background: rgba(0, 0, 0, 0.5);
  text-shadow: 0 0 .5rem black;
  /*语法 text-shadow: h-shadow v-shadow blur color; */
}

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

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: greenyellow;
}

参考：
JavaScript Drum Kit 中文指南

JavaScript Drum kit的更多相关文章

  1. js & 快捷键

    js & 快捷键 demo js-keyboard-shortcuts.html https://codepen.io/webgeeker/pen/MLYrNq let isCtrl = fa ...

  2. JavaScript 30 - 1 学习笔记

    学习JavaScirpt30的笔记! ...虽然英语不是很好,但是跟着来还是学到了一些东西. 1------->   JavaScirpt Drum Kit 功能是这样的 ,敲击键盘上面的按钮, ...

  3. javascript30--day01--Drum kit

    相关视频链接:https://www.bilibili.com/video/av8481988/?p=3 Drum kit 做题思路(1)监听键盘事件 addEventListener(‘事件名’,执 ...

  4. [转载]50个Demo展示HTML5无穷的魅力

    Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好.和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页 ...

  5. JavaScript资源大全中文版（Awesome最新版）

    Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...

  6. 免费素材：包含 250+ 组件的 DO UI Kit

    DO UI kit 现在可以免费用于 Photoshop 和 Sketch 了.它有超过130个屏幕,10个完整的主题以及250+的组件混合以创造惊人的应用.他们都是再混合和视网膜.最重要的是他们看起 ...

  7. EventRay UI Kit – Web & Mobile 的素材

    EventRay UI 工具包是一个免费的,可以现成使用的界面套件.包括多个为  Web 和移动应用设计的布局和 UI 元素.所有你需要做的就是下载这个 UI 工具包,点击源码下载打开的页面即可下载. ...

  8. HTML5 Audio and JavaScript Control

    IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...

  9. 你应该知道的JavaScript中NaN的秘密

    NaN,不是一个数字,是一种特殊的值来代表不可表示的值,使用typeof或其他任何与之比较的处理方式,‘NaN’则会引起一些混乱, 一些操作会导致NaN值的产生.这里有些例子: Math.sqrt(- ...

随机推荐

  1. "Could not resolve host: mirrorlist.centos.org; Unknown error"解决方法

    这两天学习历程可谓历尽坎坷,昨天在vSphere Client中安装完CentOS系统后,今天尝试在系统中安装mysql数据库. 由于刚接触Linux,所以对于一些常用指令和操作并不熟悉,也是一边百度 ...

  2. Ionic4.x 项目结构简单分析

    新建项目 e2e:端对端测试文件 node_modules :项目所需要的依赖包 resources :android/ios 资源(更换图标和启动动画) src:开发工作目录,页面.样式.脚本和图片 ...

  3. 5.7版本mysql查询报错：com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException:...this is incompatible with sql_mode=only_full_group_by

    先瞧下日志: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException ...

  4. sql 获取本周周一和周日

    版本1.0(获取周日存在问题,请勿使用,仅用于引以为戒) 存在问题,获取周日的时候,当当前时间正好是周日,会获取下一周的周日,而非本周周日. ,)),) ),, ,)),) 版本2.0 看到版本1.0 ...

  5. （八）Centos之文件搜索命令locate

    一.文件搜索命令locate locate优点是 搜索速度快 ,缺点是只能按文件名搜索: 1.1 新建一个文件   1.2 更新数据库 locate命令搜索的是 /var/lib/mlocate 下的 ...

  6. 【Leetcode_easy】674. Longest Continuous Increasing Subsequence

    problem 674. Longest Continuous Increasing Subsequence solution class Solution { public: int findLen ...

  7. 帝国cms 批量替换语句

    UPDATE www_92game_net_cnys_ecms_caipu SET titlepic=REPLACE(titlepic,'http://file.92game.net', '') ; ...

  8. 高级UI-Palette

    Google推出的Palette是用来调色的,正如其汉语意思一样,可以用来显示颜色,在显示图片的时候,会配合图片的色调来显示,这样就显得很融合,其实Palette可以分析出图片中的很多特性,例如主色调 ...

  9. JS中根据某个值进行大小排序

    //从大到小排序 function compareBigToSmall(property){ return function(a,b){ var value1 = a[property]; var v ...

  10. python中通过客户端IP拿到所在城市和当地天气信息—附带项目案例

    熟悉老一代QQ的小伙伴可能都知道,很早以前的QQ,鼠标滑到头像的位置,你的位置和IP会在详情页显示,那么这个是如何做到的呢?下面我们就来玩一玩这个东西 首先,需求分析: 1.拿到客户端IP 2.通过I ...