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

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

:::note
[TLB Enjoy Developers Advent Calendar 2022](https://qiita.com/advent-calendar/2022/tlb-enjoy) の5日目の記事です。
:::


# [Ongaq JS](https://www.ongaqjs.com/)とは

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


# 楽器の種類
ピアノ、キーボード、オルガン、ギター、金管、弦、オカリナ、琴、ドラム
1つの楽器でもいくつかパターンがあるので、様々な組み合わせで楽しめそう...
[楽器一覧](https://www.ongaqjs.com/api/name_sound/)

# 音の名前

**単音**
アルファベットで音を、音の高さを数字で指定する
|ド|ド＃|レ|ミ♭|ミ|ファ|ファ#|ソ|ソ＃|ラ|シ♭|シ|
|---|---|--|--|--|--|--|--|--|--|--|--|
|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|

[その他のコード](https://www.ongaqjs.com/api/name_chord/)

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

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


## [Ongaq](https://www.ongaqjs.com/api/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、再生、停止のメソッドを指定してみる

```javascript: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](https://www.ongaqjs.com/api/part/)
楽器について指定する。

音色、何小説で1周するか、指定した周回数が終わったときの挙動や1小節を構成する拍数等を決められる
ここでは「`my_band_drums`の音を17小節」という指定をする
```
const my_drums = new Part({
  sound: "my_band_drums",
  measure: 17,
});
```

### [Filter](https://www.ongaqjs.com/api/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`を開いて再生するだけ

# ジングルベル
<iframe width="100%" height="166" scrolling="no" frameborder="no" allow="autoplay" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/1395952738&color=%23ff5500&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&show_teaser=true"></iframe><div style="font-size: 10px; color: #cccccc;line-break: anywhere;word-break: normal;overflow: hidden;white-space: nowrap;text-overflow: ellipsis; font-family: Interstate,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Garuda,Verdana,Tahoma,sans-serif;font-weight: 100;"><a href="https://soundcloud.com/cjvoplxfdil0/ongaqjs" title="OngaqJS ジングルベル" target="_blank" style="color: #cccccc; text-decoration: none;">OngaqJS ジングルベル</a></div>

# おわりに

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

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