JavaScript Drum kit
用 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的更多相关文章
- js & 快捷键
js & 快捷键 demo js-keyboard-shortcuts.html https://codepen.io/webgeeker/pen/MLYrNq let isCtrl = fa ...
- JavaScript 30 - 1 学习笔记
学习JavaScirpt30的笔记! ...虽然英语不是很好,但是跟着来还是学到了一些东西. 1-------> JavaScirpt Drum Kit 功能是这样的 ,敲击键盘上面的按钮, ...
- javascript30--day01--Drum kit
相关视频链接:https://www.bilibili.com/video/av8481988/?p=3 Drum kit 做题思路(1)监听键盘事件 addEventListener(‘事件名’,执 ...
- [转载]50个Demo展示HTML5无穷的魅力
Flash和HTML5的比较已经成为现在最热门的主题之一,我们不去争论哪个好哪个不好.和HTML5在很酷的动画和简单的游戏等方面一样,除非HTML5在未来几年有一些重大发展,否则Flash在富内容网页 ...
- JavaScript资源大全中文版（Awesome最新版）
Awesome系列的JavaScript资源整理.awesome-javascript是sorrycc发起维护的 JS 资源列表,内容包括:包管理器.加载器.测试框架.运行器.QA.MVC框架和库.模 ...
- 免费素材：包含 250+ 组件的 DO UI Kit
DO UI kit 现在可以免费用于 Photoshop 和 Sketch 了.它有超过130个屏幕,10个完整的主题以及250+的组件混合以创造惊人的应用.他们都是再混合和视网膜.最重要的是他们看起 ...
- EventRay UI Kit – Web & Mobile 的素材
EventRay UI 工具包是一个免费的,可以现成使用的界面套件.包括多个为 Web 和移动应用设计的布局和 UI 元素.所有你需要做的就是下载这个 UI 工具包,点击源码下载打开的页面即可下载. ...
- HTML5 Audio and JavaScript Control
IE8 以下无效 <!DOCTYPE html> <html> <head> <meta content="text/html; charset=u ...
- 你应该知道的JavaScript中NaN的秘密
NaN,不是一个数字,是一种特殊的值来代表不可表示的值,使用typeof或其他任何与之比较的处理方式,‘NaN’则会引起一些混乱, 一些操作会导致NaN值的产生.这里有些例子: Math.sqrt(- ...
随机推荐
- python之socket编程（二）
标签(空格分隔): socket编程 SocketServer解析 SocketServer内部使用I/O多路复用,多线程,多进程来实现客户端多并发访问Socket服务端,while循环时使用I/O多 ...
- Composer更新慢的终极解决方案-转
转自:http://blog.csdn.net/fishermanmax/article/details/51975692 Packagist 镜像 请各位使用本镜像的同学注意: 本镜像已经依照 co ...
- 前端表格插件datatables
下载datatables datatables官网:https://www.datatables.net/ datatables下载地址:https://www.datatables.net/down ...
- 开始学习Docker啦--容器理论知识(一)
目录 一.容器核心技术 1.容器规范 2.容器 runtime 3.容器管理工具 4.容器定义工具 5.Registry 6.容器 OS 二.说说容器 1.什么是容器 Containers vs. v ...
- golang 日志模块（log）
log 日志 log 模块可以自定义log 对象, 也可以使用log默认对象的日志方法 func New 创建log对象 func New(out io.Writer, prefix string, ...
- 动态规划算法（Dynamic Programming，简称 DP）
动态规划算法(Dynamic Programming,简称 DP) 浅谈动态规划 动态规划算法(Dynamic Programming,简称 DP)似乎是一种很高深莫测的算法,你会在一些面试或算法书籍 ...
- String字符串相加的原理
因为String是非常常用的类, jvm对其进行了优化, jdk7之前jvm维护了很多的字符串常量在方法去的常量池中, jdk后常量池迁移到了堆中 方法区是一个运行时JVM管理的内存区域,是一个线程共 ...
- Spring 启动加载资源到内存
前言 在一些业务场景中,当容器初始化完成之后,需要处理一些操作,比如一些数据的加载.初始化缓存.特定任务的注册等等.我找到了三种方式解决下面的问题. 1.使用PostConstruct注解 这种解决方 ...
- centos7.6编译安装php7.3
刚开始搞环境装过集成,发现不好用,后来自己编译安装一些扩展啊设置的都很容易找到. 以前装过5.6.7.0发现不一样,最近出了7.3是php5速度的三倍,那有必要升级一下列. 由于之前安装过老版本,依赖 ...
- 笔记-9：使用random库生成随机数
random:主要目的是生成随机数 函数 说明 seed(a=None) 初始化随机数,默认值为当前系统时间 random() 生成一个[0.0,1.0)之间的随机数小数 randint(a,b) 生 ...