人在江湖，就得依了这江湖的规矩，本大侠行侠仗义，不善言辞，人狠话不多，俗话说无干货不起早，今日便直接奉上尘封多年的上古秘籍。
《TONE.JS-INSTRUMENTS》
简介
Tone.js-Instruments是github上的一个开源项目，此项目神奇之处在于，他并非处理我们常见的业务场景，而是一个基于音频文件调度来实现演奏乐器功能的基础库，我们可以利用其在很短的时间开发一套基于浏览器端的钢琴、电子琴、贝斯等乐器，传统的音频框架，诸如Tone.js等项目，主要面向音频基础播放需求，内容较为基础，而Tone.js-Instruments是基于Tone.js成熟技术，实现的了面向演奏乐器为目标的音频调度js基础库，解决了这一复杂的过程，他可以让你以极少的代码量，实现在几十种乐器之间自由切换。
官方演示
地址：https://nbrosowsky.github.io/tonejs-instruments/demo.html（访问较慢）
国内大师作品演示
访问地址：https://www.autopiano.cn/（PC端访问）
此版本为国内开发者结合vue+Tone.js-Instruments实现的一套网页乐器演奏系统。
看过demo之后，我们可以尝试一下本地跑起来，对实现原理一探究竟。
克隆仓库
git clone https://github.com/nbrosowsky/tonejs-instruments.git
因为包含音频文件较多，仓库比较大，克隆可能需要较长时间，请耐心等待。
启动网页
http-server -p 8820
这里需要根据实际情况在demo.html页面修改baseUrl地址。
我这里改为 baseUrl: "/samples/"
目录结构
external-js/
●Tone.js，其中Tone.js为其使用的核心库，Tone.js是一个Web音频框架，用于在浏览器中创建交互式音乐。Tone.js的架构旨在让音乐家和音频程序员熟悉创建基于Web的音频应用程序。在高级级别上，Tone提供常见的DAW（数字音频工作站）功能，例如用于同步和调度事件的全局传输您自己的合成器、效果器和复杂的控制信号。
关于Tone.js更深入的了解，可参考https://tonejs.github.io/。
●NexusUI.js使用他可以快速的在网页绘制一个钢琴键盘的UI界面。
官方地址：
https://nexus-js.github.io/ui/api/#Piano。
samples/
●内置支持的乐器类型，每个文件夹均以乐器名称命名，包含每个音节对应的mp3/ogg/wav三种音频文件格式的音频文件，以保证音频播放兼容性，下面我们展示了音频目录中文对照表关系列表。
- ○bass-electric电贝斯
- ○bassoon低音管
- ○cello大提琴
- ○clarinet单簧管
- ○contrabass低音提琴
- ○flute长笛
- ○french-horn法国号角
- ○guitar-acoustic吉他原声
- ○guitar-electric吉他电
- ○harmonium风琴
- ○harp竖琴
- ○organ风琴
- ○piano钢琴
- ○saxophone萨克斯
- ○trombone长号
- ○trumpet小号
- ○tuba大号
- ○violin小提琴
- ○xylophone木琴
LICENSE.md /
README.md /
Tonejs-Instruments.js
●核心库，主要实现了以下两个方面的工作。
○加载音频文件：实现音频文件的自动加载，确保初始化阶段完成所需音频文件已加载，达到随时快速响应播放的目的。
○乐器对象：每完成加载一个乐器样本，会返回一个Tonejs对象，我们可通过Tonejs Api灵活进行操作音频播放，基于tonejs自身乐器音频播放机制，来播放对应乐器的音节音频文件。
demo.html
●示例代码
nprogress.css
●页面进度样式css
sample-source-info.txt
●音频文件贡献者或采集来源
使用说明
基本用法
您可以通过调用SampleLibrary.load() 来加载乐器音频样本，即 samples/xxx/*，*代表了mp3、ogg、wav的音频文件。
<script type="text/javascript" src="external-js/Tone.js"></script>
<script type="text/javascript" src="Tonejs-Instruments.js"></script>
//传递钢琴对应的音频文件，并返回Tone.js对象
var piano = SampleLibrary.load({
instruments: "piano"
});
//在这里我们可以直接调用Tone.js的所有api，关于Tone.js API这里不进一步展开
piano.toMaster();
piano.triggerAttack("A3");
//加载多个乐器的音频文件
//每个属性都会返回一个Tone.js对象
var instruments = SampleLibrary.load({
instruments: ["piano","harmonium","violin"]
});
//监听加载完成后执行回调
Tone.Buffer.on('load', function() {
//播放乐器声音
instruments['piano'].toMaster();
instruments['piano'].triggerAttack("A3");
})
基于钢琴键盘演奏的的实现，这里使用NexusUI-js库。
#html
<div id="Keyboard"></div>
<script type="text/javascript" src="external-js/NexusUI.js"></script>
#script
var piano = SampleLibrary.load({
instruments: "piano"
});
var keyboardUI = new Nexus.Piano('#Keyboard', {
'size': [1000, 125],
'mode': 'button', // 'button', 'toggle', or 'impulse'
'lowNote': 36,
'highNote': 72
})
keyboardUI.on('change', function(note) {
//输出当前键盘按下的钢琴键名称
console.log(Tone.Frequency(note.note, "midi").toNote());
if (note.state === true) {
piano.triggerAttack(Tone.Frequency(note.note, "midi").toNote());
} else if (note.state === false) {
piano.triggerRelease(Tone.Frequency(note.note, "midi").toNote());
}
})
PS：此外，我还可以通过监听键盘事件（keydown/keyup）进行乐器演奏，这里就不做代码示例了。
