js演奏大师 - 技术栈

简介

Tone.js-Instruments 是github上的一个开源项目，此项目神奇之处在于，他并非处理我们常见的业务场景，而是一个基于音频文件调度来实现演奏乐器功能的基础库，我们可以利用其在很短的时间开发一套基于浏览器端的钢琴、电子琴、贝斯等乐器，传统的音频框架，诸如Tone.js等项目，主要面向音频基础播放需求，内容较为基础，而Tone.js-Instruments是基于Tone.js成熟技术，实现的了面向演奏乐器为目标的音频调度js基础库，解决了这一复杂的过程，他可以让你以极少的代码量，实现在几十种乐器之间自由切换。

官方演示

地址：nbrosowsky.github.io/tonejs-inst...

国内大师作品演示

访问地址：www.autopiano.cn/

此版本为国内开发者结合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更深入的了解，可参考tonejs.github.io/
- NexusUI.js 使用他可以快速的在网页绘制一个钢琴键盘的UI界面

官方地址：nexus-js.github.io/ui/api/#Pia...

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的音频文件。

xml 复制代码

<script type="text/javascript" src="external-js/Tone.js"></script>
<script type="text/javascript" src="Tonejs-Instruments.js"></script>

javascript 复制代码

//传递钢琴对应的音频文件，并返回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库

javascript 复制代码

  #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）进行乐器演奏，这里就不做代码示例了。