band.jsでレトロなサウンドに癒される。

band.jsとは？

作曲ツール（大嘘
JavaScriptで音を鳴らすライブラリ(MIT License)。矩形波、ノコギリ波など、レトロな音を鳴らすことができ、和音やパート分けも可能。頑張れば昔懐かしいあんな曲こんな曲も再現できるかもしれない。
今回は細かい部分には触れずに最低限の設定で音を鳴らして楽しもうという企画。

GitHubからダウンロード

楽譜の読み方

解凍するとdistフォルダ内にband.min.jsとかそれらしいのがあると思うが、それがプレーヤーだと思えばいいと思う。examplesフォルダ以下のapp.jsが楽譜。

はじめに

以下音に関する部分をexamples/mario-bros-overworld/app.jsから抜粋して説明。

var gameMusic = new BandJS();

    gameMusic.setTimeSignature(2, 2);
    gameMusic.setTempo(180);

var rightHand = conductor.createInstrument('square', 'oscillators'),
    leftHand = conductor.createInstrument('triangle', 'oscillators'),
    drum = conductor.createInstrument('white', 'noises');

drum.setVolume(50);

冒頭はgameMusicを作りますという宣言。.setTimeSignatureは拍子(2分の2拍子)を、setTempoではテンポ(180BPM)を指定。

次に定義してるrightHand, leftHand, drumはそれぞれのパート分け。
conductor.createInstrument()が音の種類を指定している。
第一引数は名前見れば三角波とかホワイトノイズとか感覚でわかるかもしれないけれど、第二引数に関しては未だよくわからず。。。
設定いじってみて音の違いを楽しんで下さい。（投げやり

.setVolumeで音量を設定(Max100)。サンプルではドラムパートにあたるホワイトノイズ音量を50まで落としています。

音を入れる

/**
 * Intro
 */
    // Bar 1
rightHand.note('quarter', 'E5, F#4')
    .note('quarter', 'E5, F#4')
    .rest('quarter')
    .note('quarter', 'E5, F#4');

leftHand.note('quarter', 'D3')
    .note('quarter', 'D3')
    .rest('quarter')
    .note('quarter', 'D3');

drum.rest('whole');

// Bar2
rightHand.rest('quarter')
    .note('quarter', 'C5, F#4')
    .note('quarter', 'E5, F#4')
    .rest('quarter');

leftHand.rest('quarter')
    .note('quarter', 'D3')
    .note('quarter', 'D3')
    .rest('quarter');

drum.rest('whole');

～

rightHand.repeatFromBeginning(2000);
leftHand.repeatFromBeginning(2000);
drum.repeatFromBeginning(2000);

rightHand.finish();
leftHand.finish();
drum.finish();

gameMusic.end();

この辺で音の入力をしています。
.noteが音符、.restが休符。引数になってるのは音の長さと音の高さ。
コメントアウトでBar1, Bar2となっているのが小節単位での音ってことですね。
音の入力が終わったら、リピートしたければ.repeatFromBeginning()して、.finishで各パートの入力を終了して、gameMusic.end()で曲全体を閉じます。

(参考)音の長さ

音の長さ	対応する値
全音符	whole
付点二分音符	dottedHalf
二分音符	half
付点四分音符	dottedQuarter
三連符(二分)	tripletHalf
四分音符	quarter
付点八分音符	dottedEighth
三連符(四分)	tripletQuarter
八分音符	eighth
付点十六分音符	dottedSixteenth
三連符(八分)	tripletEighth
十六分音符	sixteenth
三連符(十六分)	tripletSixteenth
三十二分音符	thirtySecond

(参考)音の高さ

音名	対応する値(例としてC3から)
ド	C3
レ	D3
ミ	E3
ファ	F3
ソ	G3
ラ	A3
シ	B3
ド	C4

音域は(低)C0 ～ C8(高)
半音高く…C#3、半音低く…Cb3とシャープ、フラットも組み合わせられます。

上記ソース部分だとドラムパートが一切音を出していないことがわかります。

曲の制御

サンプルだとそこから先ボタンによる曲の制御とかも記述されているけれど、大事なのは以下

動作	ソース
再生	gameMusic.play()
停止	gameMusic.stop()
一時停止	gameMusic.pause()
ミュート	gameMusic.mute()
ミュート解除	gameMusic.unmute()

説明はほどほどに、ここで試してみるのがいいです。