もうすぐクリスマス...
クリスマスまであと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、再生、停止のメソッドを指定してみる
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を開いて再生するだけ
ジングルベル
おわりに
今回はドラムと単旋律でしか作成していないので、コードや、他の楽器、その他機能を使ってまた作成してみたいと思います。
みなさん、良きクリスマスを...
明日は@ymmt1089さんの記事です。
ご期待ください！！