缘起
由于童心未泯，之前在手机上玩过钢琴模拟App，但是手机屏幕太小，始终觉得不过瘾。其实对于我这个连基本乐理都不懂的“乐盲”来说，就算给我一台真正的钢琴，我也玩不转。不过是图个新鲜、权当娱乐罢了。最近刚好入手一台带触摸屏的Lenovo Yoga 4 Pro，这倒给了我新的想象空间：大屏幕玩起来是不是更带感？在Win10应用商店里搜了下，还真有各种模拟钢琴的应用，随便选了一款安装。结果非常令人失望，音效惨不忍听，还各种闪退。这里顺便吐槽下win10的应用商店，里面的很多应用不是经常安装失败，就是经常闪退，简直没法用啊。作为一名前端开发和坚定的Web支持者，客户端不好用果断转向Web啊。本着尽量不重造轮子的原则，先在网上搜了一下。百度的搜索结果几乎都是那一个例子，也不知道是哪位哥们写的，被到处引用。就那么几个键，怎么玩？Google的结果也不尽如人意，不是打不开就是加载半天。算了，还是自己动手吧。
准备
我们知道，HTML5有音频接口，播放声音自然不在话下。这模拟钢琴自然需要各种音阶的音频文件吧，于是在网上搜了一通，找齐了88键钢琴的音频文件。为什么钢琴有88个键？别问我，我是乐盲。看看这张钢琴示意图就知道了：
开工
最近一直在用Vue.js开发项目，配合Webpack神器构建打包，开发前端项目从来没有如此方便。在此要特别感谢Vue.js的作者Evan You尤雨溪（知乎）， 给我们贡献了这么好用的框架。
新建一个Vue.js项目非常简单，可以用官方推荐的脚手架命令行工具vue-cli创建新工程。首先安装这个工具：
npm install -g vue-cli
安装好后执行命令生成工程模板：
vue init webpack piano
这里我们用webpack作为构建工具，你也可以使用browserify。
就这么简单，一个Vue.js project诞生了，而且Webpack已经配置好。接下来执行命令安装相关的node模块：
npm install
如果一切顺利的话，项目就可以跑起来了：
npm run dev
访问http://localhost:8080就可以看到默认的欢迎界面。至此，项目的搭建算是完成了。
界面
现在开始写界面。虽然是乐盲，钢琴键盘上有哪些键还是要搞清楚的。对于标准的88键钢琴，总共有88个键，其中52个白色键，36个黑色键。分为低音区、中音区和高音区，每个区有三组。对于我们画界面来说，重要的是找出其中的规律。最两端的两组先不管，其他的分组看上去都是一样的：三白夹两黑跟着四白夹三黑。
怎么实现这个界面布局呢？很简单，黑白键都用button元素表示，设置好宽高、背景色和边框。白色的自然定位并排铺开，黑色的用绝对定位，计算出对应的坐标。这里有个小细节，就是黑白键的DOM元素排列最好跟各音阶的先后顺序对应，这样在计算黑键坐标就比较方便。
既然有七个组的界面是一模一样的，我们就把一组设计成一个组件好了。用Vue.js开发组件真的是太方便了，一个.vue文件包含HTML template、script和style，就构成了一个独立的组件。每组的音阶范围不一样，通过组件的props设定。来看组件的源码文件Group.vue
<template>
<div class="group">
<button :class="{'white': whites.indexOf(n) > -1, 'black': blacks.indexOf(n) > -1}" v-for="n in 12" :style="{ left: calcLeft(n) + '%' }" data-note="{{start+n}}" @click="play(start+n)"><span v-show="n === 0">C</span></button>
</div>
</template>
<script>
import {notes} from '../notes.js';
const prefix = 'data:audio/mpeg;base64,';
const base = 3;
const keys = 12;
export default {
props: {
group: {
type: Number,
default: 0
}
},
data() {
return {
// note: changing this line won't causes changes
// with hot-reload because the reloaded component
// preserves its current state and we are modifying
// its initial state.
blacks: [1, 3, 6, 8, 10],
whites: [0, 2, 4, 5, 7, 9, 11]
}
},
computed: {
start() {
return this.group * keys;
}
},
methods: {
play(index) {
var audio = new Audio(prefix + notes[index + base]);
audio.play();
},
calcLeft(index) {
var unit = 14.29;
var i = this.blacks.indexOf(index);
if(i < 2) {
return unit * (0.75 + i);
}
return unit * (1.75 + i);
},
click(index) {
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.group {
font-size: 0;
position: relative;
display: flex;
flex-grow: 1;
}
button {
14.29%;
flex: 1;
height: 300px;
display: inline-block;
border: 1px solid #ccc;
outline: 0;
padding: 0;
box-sizing: border-box;
}
button > span {
position: absolute;
bottom: 10px;
}
.white:active,
.white.active {
background: #ececec;
}
.white {
background: #fff;
}
.black {
background: #000;
border-color: #000;
height: 150px;
7.15%;
position: absolute;
}
</style>
逻辑并不复杂，关键是处理细节。按键的宽度是用百分比的，高度固定。黑键的坐标计算逻辑在方法calcLeft里，具体看代码好了，code will talk.
你可能有个疑问：音频内容哪来的？继续看。
音频处理
前面提到过，我从网上找到了钢琴的88音阶的音频文件，都是mp3格式的。但是我不想让88个音分散在88个.mp3文件里，不然在弹奏的时候一个个文件下载，可不太好。怎么办呢？我们知道图片可以转成base64的字符串显示在DOM里。其实音频文件也一样，用data:audio/mpeg;base64,XXXXXX就可以了。写了个Node程序，一次性将所有Mp3文件都转成了base64字符串数组备用：
var fs = require('fs');
var file = 'notes.json';
// function to encode file data to base64 encoded string
function base64_encode(file) {
// read binary data
var bitmap = fs.readFileSync(file);
// convert binary data to base64 encoded string
return new Buffer(bitmap).toString('base64');
}
fs.readdir('.', function(error, files) {
var content = "";
files.forEach((f, index) => {
if(/^d/.test(f)) {
var data = base64_encode(f);
content += `"${data}",
`;
}
});
fs.writeFileSync(file, content);
});
数组内容放在一个单独的文件里，作为模块引入。数组元素的顺序就是音阶从低到高的顺序。HTML5的Audio对象，支持从构造函数传入base64数据，然后调用play()就可以播放声音了。
没有触摸屏咋玩？还有键盘啊。简单起见，用三排字母按键对应中音区的三个组。监听键盘keydown事件，通过keyCode区分不同的键，播放对应的音频内容就好了。
总结
这个过程并不复杂，就是布局和音频处理需要处理一些细节。代码写得很仓促，有些地方可以重构下。完整的源码可以在我的Github找到。喜欢的欢迎star，有闲工夫也可自己改进。最终效果点击这里：http://kaysonli.github.io/piano/dist/