本文是“小网站”系列的第 7 篇。本系列介绍一些作者主观认为值得把玩的“小网站”，愿朋友们多少都能有所收获。这个系列会长期更新，对这个系列感兴趣的朋友可关注，不迷路。

--- 今日介绍 ---

音乐键盘（Patatap）

把玩点：

• 无聊时打发时间;

• 音乐爱好者及节奏创作者的小工具;

• 计算机平面绘画及2D动画的样板;

主观评价：趣味性 3.5 星，技术性 3.5 星

网址： www.patatap.com

--- 使用指北 ---

建议在电脑上使用，手机上使用有patatap软件下载，苹果商城中就有。

小网站打开有点缓慢，因为需要加载的资源有些多，界面显示0/26,为什么是26，稍后就明白了。

打开后界面相当朴素，灰色的底色，顶部就一行提示“Press any key，A to Z or spacebar,and turn up speakers",中文意思就是“随便按任意键，字母A到Z，或者空格键，并且把音响声音调大”。

使用相当的简单，按一下键盘上的字母，比如“w”，就会出现一段节拍，同时界面快速出现一个动画，再快速消失，再次按下“w”，节拍还是这个节拍，但动画却与上次不相同，原来动画是随机的。

随机就意味着有很多可能。

按下最大的空格键，界面颜色就会发生变化，键对应的节拍也会随着变化，节拍切换 + 不同颜色背景 + 随机动画 = 无限可能

小网站的作者叫Jono(乔诺)，正如他本人所说：使用平面设计和计算机编程来探索技术的表现力。像画家一样，我观察，然后我描绘我所看到的东西。然后我一遍又一遍地重复这个过程。信息是我的颜料，技术是我的画笔，而制造物品和经验是我的画布。

个人最喜欢的几个节拍与动画分别是：w、o、b、p、y、k等，可惜本人不太懂韵律，不知道有没有大神打出一串字符，带来一段好听的旋律...

开始愉快的玩耍吧！

--- 干货知识 ---

本小节属于技术解析环节，纯技术性干货，适合技术人员，非行业人士可忽略。

按下键盘、播放对应的mp3节拍声音，这个难度不算大，小网站实现真正有挑战的地方有两点：

• SVG动画

• 不同按键对应的图形出现、运动、消失算法；

采用的第三方库脚本在third-party目录下，分别是：

• has.js 检测浏览器环境的；

• jquery.js 老牌的前端开发框架；

• tween.js 用JS开发的一个补间动画库，支持数字、对象的属性和 CSS 样式属性的赋值，通过平滑的方式修改属性，从而使用平滑的动画效果，内置多种曲线模式；

• two.js 是一个JS的API，可以用代码创建2D形状。two.js与渲染器无关，相同的API即可以使用Canvas来绘制，也可以使用SVG、WebGL来绘制，这就很强了。

作者自己写的代码在src目录下，有三个核心文件：

• animations.js 采用第三方库来实现的具体动画

• sound.js 采用H5原始的接口播放声音

• main.js 主启动脚本，串联所有资源，绑定按键，执行动画，定时擦除等等。

什么？要问我那个炫酷的三边形变四边形再变五边六边七边形的代码实现在哪里？main.js第210行与692行自己跟踪吧，只能说到这里了...

正要结束本文前，突然发现这个小网站的作者Jono，网名（推特）为@jonobr1，不仅如此它还是上面介绍的has.js作者，还是two.js这个框架的作者，在2012-2013就完成了这个框架，更是大名鼎鼎tween.js的合作开发者之一，大牛阿，有兴趣的同学可围观作者的网站：jonobr1.com

本系列长期更新！首发公众号：土卫六

喜欢的朋友感谢点赞、分享、收藏三连！