js江湖怪谈-演奏大师

最新推荐文章于 2024-08-10 16:15:00 发布

衍舆航天

最新推荐文章于 2024-08-10 16:15:00 发布

阅读量70

点赞数

文章标签： javascript github 前端

本文链接：https://blog.csdn.net/shaanxihualu/article/details/126405195

版权

人在江湖，就得依了这江湖的规矩，本大侠行侠仗义，不善言辞，人狠话不多，俗话说无干货不起早，今日便直接奉上尘封多年的上古秘籍。

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

END