- A+
前言
前段时间一时兴起想学一下吉他，但是一门乐器要演奏成“能听”的程度也不是一天两天的事情，对我这种音乐基础为 0 的人来说学习周期太长了，不想耗费太多时间在学习乐器上面，于是想找个取巧的方法。
最终方案就是做了个简单粗陋的微信小程序 Demo 去弹奏吉他乐，勉强算是成功吧，可以很简单地弹奏出乐曲。
大概一小时的学习周期（含学习简谱时间），可以弹出传统乐器学习一两个月的效果。
但是这个小程序有一个 BUG ，导致它也只能算是一个失败品。
文章最后会附上开源代码地址，且容我先抛出这块砖，希望能引来玉吧。
使用
这里贴出微信小程序的二维码，小程序的名字叫冒牌吉他手，大家可以体验一下。
主界面
本小程序有四个模式：自由模式、简单模式、灵魂模式和自动模式。
在自由模式下，您可以按 1，2，3，4，5，6，7 等七个音符按键，分别对应 do（哆）、re（来）、mi（咪）、fa（发）、sol（唆）、la（拉）、si（西）。同时可以切换高低音和节拍按键来分别控制音高和音长。
在简单模式下，程序会自动根据简谱识别出音高和音长，您只需要按七个音符按键即可。默认设置的简谱是《成都》。
在灵魂模式下，程序会自动根据简谱识别出音高、音长和音符，您只需要按一个音符按键即可。
在自动模式下，程序会自动根据简谱弹奏音乐，您无需操作。
编辑简谱时，会自动定位到简谱最末尾的位置，且只支持新增和删除。
删除：点击删除按钮会直接删除最末尾的简谱符号。
新增：按下相应的音符键，会结合当前的高低音和节拍按键，新增对应的简谱符号。
另外编辑模式下会多出来两个新的按键,分别是音符按键最左侧的“0”键和音符按键最右侧的“|”键。
“0”键代表简谱上的休止符。
“|”键表示表示简谱的分隔符，只用来标识，不输入也是可以的。
方案与原理
这个小程序完全是前端代码实现，无需服务端，并且不需要音频资源文件。
之所以做成这样，是因为微信小程序上面现在放资源文件是要给腾讯打钱的，而单纯的代码是不需要的 o(∩_∩)o
技术上的实现说起来也很简单，使用 AudioContext 来实现，音频文件是预先将 mp3 进行 base64 编码，使用时再转换成AudioContext的 buffer 数组来实现。
在做这个之前我对AudioContext一无所知，网上这类材料也很少，算是非常冷门了，主要是参考了webaudiofont这个项目来实现。
但是这里有个问题，微信小程序的AudioContext是自己实现的一套机制，与 web 标准的AudioContext不一样，而且微信小程序这里另外提供了一个WebAudioContext的，不过还是与 AudioContext 标准接口有些差异。
所以我这里也做了一些兼容上的处理。
顺便说一下，在代码中简单修改一下音源文件 0255_GeneralUserGS_sf2_file.js 为其他音源文件，也可以弹奏其他的乐器，比如钢琴唢呐之类的。
缺陷与失败的修复方案
这个小程序在自由模式、简单模式和灵魂模式下运行还算较好。
但是在真实手机上，自动模式是有问题的（在 PC 的开发者工具上自动模式没有问题）。
这个问题就是自动模式下，播放的声音有杂音。
自动模式尝试过两个方案：
一个方案使用的是 setTimeout，播放一个音调后再播放下一个音调，在 PC 上表现良好，在手机上会有延迟，杂音问题很小。
一个方案使用的是 queueWaveTable 自己的时间机制去播放，没有延迟，但是杂音问题严重。
由于这两套方案在开发者工具上都表现良好，只在真机上有问题，猜测只能是移动端性能不佳，或者是微信小程序的WebAudioContext实现有问题。
我实际发布的小程序采用的是第一种方案，不过第二种我也在代码中实现了，在代码中已注释。
其实我更倾向于第二种方案，因为 setTimeout 在真机上的延迟听起来像乱弹的，只是第二种的杂音问题实在太严重才不得不选第一种。
总的来说，在真机上，自动模式都不咋样。
总结
因为对这个方面实在没什么深入研究的欲望，随着兴趣减淡，也就偃旗息鼓了。
虽然自动模式确实存在问题，但是灵魂模式也不错了，也更好玩一点。
也算是做了一些东西的，如果有后来者可以解决这个问题，或者有感兴趣的可以在这个基础上再修复或者拓展吧。
这里给出开源的仓库地址：fake-guitarist
