用HTML5写乐谱

分享于 

9分钟阅读

Web开发

  繁體

Background

在孩子打开眼睛之前,他从头到尾都知道这个单词。 这表明声音是交互中非常重要的元素。 但是设计师和工程师通常比声音更注重视觉。 众所周知声波是一种机械波。 通过波的物理 propreties,我们可以做许多有趣的事情。

作曲

软件工程师在使用和 0来构建他们的乌托邦的同时,音乐家在演奏音乐音符来构建他们的伊甸园乐园。 当编码符合音乐时,它应该是。 音乐将丰富用户的软件体验,编码将使人们更深入地了解音乐的结构。

音乐由各种音乐笔记组成,而时间值和音调是音乐音乐最重要的propreties。 在下面的段落中,我将介绍如何使用Javascript创建一个音乐。

人们可以识别不同音高的音乐音符,因为每个音符都有自己的频率。 根据网络音频 Api,我们可以创建一个振荡器节点。 这里节点可以创建具有指定频率的声波。 你可以做一些测试来参考下面的代码。


var context = new webkitAudioContext(),


 osc = context.createOscillator();


osc.frequency.value = 440;


osc.connect(context.destination);


osc.start(0);



代码 上面 创建了一个频率为 440赫兹的osicallator。 根据等气质,440赫兹是'la'的频率。 半音的宽度等于 12的temperament,半音的宽度,相邻音符之间间隔的频率比,是两个音符的十二 root。 这样我们就可以得到其他注释的频率,就像下面的代码。


var MusicalAlphabet = ['C','C#','D','D#','E','F','F#','G','G#','A','A#','B'],


 freqChat={},


 freqRange=3,


 i,j,base;



for(i=1;i<freqRange;i++){


 freqChat[i]={};


 base = (i-1)*12;


 for(j=0;j<12;j++){


 freqChat[i][MusicalAlphabet[j]]=440*Math.pow(2,(base+j-9)/12);


 }


}



我建议在脚本开始时计算所有注释的频率。 现在,我们可以得到每个音符的音调。 下一步是处理时间值。 最简单的方法是使用振荡器节点实例的'停止'和'开始'。 你可以参考下面的代码。


var context = new webkitAudioContext();


var osc = context.createOscillator();


osc.frequency.value = 440;


osc.connect(context.destination);


var _c = context.currentTime;


osc.start(_c+1);


osc.stop(_c+2);



你可能已经注意到变量 _c。 在网络音频的背景下,它有自己的时间表。 上下文的属性'currenttime'是访问这里时间线的唯一方法。 上下文的所有节点按这里时间线播放。 函数'开始'需要一个参数来定义振荡器节点的开始时间。 如果这里参数小于 contecxt。currenttime,函数'开始'将立即执行。

不幸的是,每个实例的函数'开始'只能被调用一次。 这意味着一旦调用了函数'停止',就必须创建一个新实例来播放相同的注释。 所以我给你另一个解决方案。 关键是增益节点。 使用增益节点,你可以控制osciallator节点的信号强度。 如果你曾经玩过吉他放大器,你可以更好地理解这个节点。

guitar amp

让我们回到编码世界。


var context = new webkitAudioContext(),


 gain = _ctx.createGain(),


 osc = context.createOscillator(),


 _c= context.currentTime;


osc.frequency.value =440; 


gain.gain.value=0;


osc.connect(gain); 


gain.connect(context. destination); 


osc.start(_c);


gain.gain.setValueAtTime(1,_c+1);


gain.gain.setValueAtTime(0,_c+2);



上面 可以播放从 1s 到 2的音乐注释'la'( 在c 大调)。 你可以将 gain.gain.value的值从 0设置为 1. 当这里值设置为 0时,它就像调用函数'停止'那样工作。 下面的图片显示了信号的变化。

signal

除了函数'setvalueattime',增益节点还有一些其他方法来改变它的值。 你可以在网络音频api中找到它们。

现在,你应该能够在一段时间内通过javascript播放音乐笔记。 但是,要实现音乐得分,还有很多事情要做。 在本文的后面部分,我将教你如何使用名为'jsonic'的javascript框架创建音乐分数。

用Jsonic演奏音乐乐谱

Jsonic是一个小型且功能丰富的javascript库。 利用 Jsonic,可以编写音乐。超声传输数据。制作声波 visualible。进行语音识别等。 你可以从 jsonic.net 或者 github获取 Jsonic。

struct

图 上面 显示 jsonic MODULE的旋律结构。 你需要创建TrackGain的音轨实例来播放音乐乐谱。 乐谱由许多音符组成。 让我们看一下细节代码。

创建备注

var note = new Jsonic.Melody.Note(1,1/4,0,false);



你可以根据代码 上面 创建一个音乐注释。 在Jsonic中,Jsonic.Melody.Note的每个实例都是指一个音乐注释。 注释的构造函数可以接受 4个参数。 第一个是 rollCall,第三个参数定义了这个注释中的哪个 Octave。 Jsonic.Melody.Note 使用 rollCall ( 0,1,2,3,4,5,6,7 ) 创建实例,以便你可以轻松更改MusicScore中的音调。 如果你想得到一个中央的C,第三个参数应该是 0. 第二个参数定义了注释的时间 value(1,1/2,1/4,1/8,1/16)。 MusicScore的速度是另一个元素,它影响注释. The的实时值。注释定义了这里注释是否具有点。

创建音乐乐谱

var musicScore = new Jsonic.Melody.MusicScore('C','major','4/4');



创建MusicScore实例时,可以定义它的音调和节拍。 代码 上面 创建一个 4/4 c 大调音乐乐谱。 你应该在这里用字母表。

创建音乐乐谱后,可以根据以下代码向乐谱中添加注释。


musicScore.w(new Jsonic.Melody.Note(3),new Jsonic.Melody.Note(4));



函数'w'将把它的所有参数附加到乐谱的结尾。 下一步是创建一个音轨或者TrackGain的实例来播放乐谱。 但是你应该先调用函数'编译'。


musicScore.compile();



播放音乐

就像我在这个atricle最初提到的,我们有两种控制注释时间价值的方法。 Track和TrackGain对应这两种方式。


var track = new Jsonic.Melody.Track();


track.play(musicScore,90);



代码 上面 创建了音轨,并使用速度 90播放了音乐乐谱。 速度的价值指的是节拍器中的数据。

如果你仍然感到困惑,请点击 演示 ( 单击开始按钮)

摘要

网络音频提供了大量的节点。 你可以把它们连接到这里。 就像吉他放大器。 希望你能在网络音频中找到一些有趣的效果。


Html5  音乐  
相关文章