もうすぐクリスマス...

クリスマスまであと20日。
クリスマス気分になる為に、演奏好きのエンジニアがOngaq JSというライブラリを使って
クリスマスらしいことをして遊んでみた。

TLB Enjoy Developers Advent Calendar 2022 の5日目の記事です。

Ongaq JSとは

様々な楽器をJSでプログラムして演奏できるライブラリ
コードやドラムパターンを作成することができる

楽器の種類

ピアノ、キーボード、オルガン、ギター、金管、弦、オカリナ、琴、ドラム
1つの楽器でもいくつかパターンがあるので、様々な組み合わせで楽しめそう...
楽器一覧

音の名前

単音
アルファベットで音を、音の高さを数字で指定する

ド	ド＃	レ	ミ♭	ミ	ファ	ファ#	ソ	ソ＃	ラ	シ♭	シ
C3	C3#	D3	E3b	E3	F3	F3#	G3	G3#	A3	B3b	B3

コード
コードの一番低いの音と重ね方で表記する

表記	音	例
音名のみ、M	Major	D, DM, F#, F#M
M7	Major 7th	DM7, F#M7
7	7th	D7, F#7
m	Minor	Dm, F#m
m7	Minor 7th	Dm7, F#m7

その他のコード

ドラムの音

表記	音
kick	バスドラム
kick2	バスドラム　パターン違い
hihat	ハイハット
hihat2	ハイハット　パターン違い
snare	スネア
snare2	スネア　パターン違い
tom	タム
tom2	タム　パターン違い
side	その他（楽器によって異なる）
side2	その他　パターン違い（楽器によって異なる）
cymbal	シンバル
cymbal2	シンバル　パターン違い（楽器によって異なる）

実装

Ongaq JSの会員登録して、apiキーを入手して、githubからライブラリをクローンしたら実装開始。

Ongaq

まず最初に Ongaqでテンポ、音量、関数を指定する
(bpm: 1分間の拍数)

api_key : 【APIキー】
bpm : 【テンポ】
volume : 【全体の音量】
onReady : 【関数】

onReady について
この関数で再生したり、停止させたりの指定をする

ongaq.start()  // 再生
ongaq.pause()  // 停止

また、ongaq.paramsでongaqの状態を取得できる

{
    currentTime: 0
    isPlaying: false
    loading: false
    originTime: 111111111
    volume: 40
}

ここではテンポ60、再生、停止のメソッドを指定してみる

script.js

const ongaq = new Ongaq({
  api_key: "cdefghcdefghcdefghcdefgh",
  volume: 40,
  bpm: 60,
  onReady: () => {
    const button = document.getElementById("button");
    button.className = "button start";

    button.onclick = () => {
      if (ongaq.params.isPlaying) {
        ongaq.pause();
        button.className = "button start";
      } else {
        ongaq.start();
        button.className = "button pause";
      }
    };
  },
});

Part と Filter

Part

楽器について指定する。

音色、何小説で1周するか、指定した周回数が終わったときの挙動や1小節を構成する拍数等を決められる
ここでは「my_band_drumsの音を17小節」という指定をする

const my_drums = new Part({
  sound: "my_band_drums",
  measure: 17,
});

Filter

その楽器のどんな音を何拍目に音を再生するかを指定する

key にどんな音か、activeで音を鳴らすタイミングを決められる
ここでは「9小節目と13小節目の1拍目にシンバルを鳴らす」という指定をする

my_drums.add(
  new Filter({
    type: "note",
    key: "cymbal",
    active: (beat, measure) =>  beat === 0 && (measure === 9 || measure === 13),
  })
);

最後にOngaq.addというメソッドで、作成したドラムのパートを読み込む。
これで演奏する準備は完了

ongaq.add(my_drums);

あとは画面でindex.htmlを開いて再生するだけ

ジングルベル

OngaqJS ジングルベル

おわりに

今回はドラムと単旋律でしか作成していないので、コードや、他の楽器、その他機能を使ってまた作成してみたいと思います。
みなさん、良きクリスマスを...

明日は@ymmt1089さんの記事です。
ご期待ください！！

クリスマスが近いのでJSで演奏してみる