OngaqJS触ってみた

2020-04-24

はじめに

こんにちは

ポートフォリオ

（おふざけ入ってるあれです）にリンク貼ってあるOngaqJSについてのソースコードをまとめてみたので記事にしました。

OngaqJSとはなんぞや？

OngaqJSとは、JavaScriptで音楽が作成できるというAPIです。

Keyの取得は[こちら](https://www.ongaqjs.com/)から

有料枠と無料枠があり、使える楽器の種類などが異なる模様（有料会員になろうかな）

ぽちぽちしていけば簡単に登録でき、誰でもKeyを取得できます！

やっていく

細かいことは[ドキュメント](https://www.ongaqjs.com/api/ongaq/)にだいたい書いてあります。

てことで僕からはすごい簡単に

Ongaq

楽曲を再生する環境にあたるオブジェクト

APIKeyの指定やテンポなどの大まかな機能を指示する部分

Partクラス

楽器の指定

measureで何小節分構成するか決める（ここ大事）

Filterクラス

音の指定

Partクラス.add(new Filter~~~　で追加

keyでビートを刻める（ドラムとその他で入る文字が違うので注意）

activeで音のタイミングを指定

lengthで1音の長さを指定

だいぶ省略してるけど、だいたい使うのはここらへんかと思います。

適当に歌を作ってみる

みんな大好きなドレミの歌を作成しようと思ったのですが、この記事書いてる途中に[カエルの歌を作ってる方](https://qiita.com/seigo-pon/items/3c010e2f05ffbb7b045d)を見つけたので僕は後ろ側のドラムの部分を簡単に実装してみました。

const ongaq = new Ongaq ({
            api_key: "取得したAPIKey",
            bpm: 70,
            volume: 90,
            onReady: () => {
                const button = document.getElementById("button");
                button.onclick = () => {
                    if (ongaq.params.isPlaying) {
                        ongaq.pause()
                    } else {
                        ongaq.start()
                    }
                }
            }
        })

const drum1 = new Part({
            sound: 'my_band_drums', 
            measure: 4, 
            beatsInMeasure: 8
        })

        drum1.add(new Filter({
            type: 'note', 
            key: beat => {
                switch(beat) {
                    case 0: return ['kick', 'snare2', 'side', 'hihat']
                    case 4: return ["kick"]
                    case 8: return ['kick', 'snare2', 'side', 'hihat']
                    case 10: return ['kick', 'hihat']
                    case 12: return ['kick', 'tom']
                    
                    
                }
            },
            volume: 100,
            active: beat => beat % 1 === 0
        }))
        drum1.attach({
	        taste: "kick"
        })

        const drum2 = new Part({
            sound: 'small_cube_drums', 
            measure: 4,
        })

    
        drum2.add(new Filter({
            type: 'note',
            key: beat => {
                switch(beat) {
                    case 0: return ['kick', 'snare2', 'side', 'hihat']
                    case 2: return ['kick']
                    case 4: return ['kick']
                    case 6: return ['kick', 'snare']
                    case 8: return ['kick', 'snare2', 'side', 'hihat']
                    case 10: return ['kick', 'hihat']
                    case 12: return ['kick', 'tom2']
                    case 14: return ['kick']
                }
            },
            volume: 100,
            active: beat => beat % 1 === 0
        }))

とまあこんな感じに簡単にですが実装してみました。

ドレミの歌含め全部のソースコードは[こちら](https://github.com/takurinton/mymusic)に公開してあります。

再生した感じは[ここ](https://twitter.com/taryo_hack/status/1245349037529694208?s=20)にあります

感想

Lispよりも簡単に書けるし、ドキュメントもシンプルだし、とっても楽しかったです！

ところで、どうしてドレミの歌にしたんだろうか？