html乐谱播放器,用HTML5写乐谱

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

freqChat[i]={};

base = (i-1)*12;

for(j=0;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节点的信 强度。 如果你曾经玩过吉他放大器，你可以更好地理解这个节点。

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

用Jsonic演奏音乐乐谱

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

图 上面 显示 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播放了音乐乐谱。 速度的价值指的是节拍器中的数据。

如果你仍然感到困惑，请点击

摘要

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

相关资源：Yalefree雅乐简谱打谱软件_打谱软件-WindowsServer工具类资源…