はじめに

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

#OngaqJSとはなんぞや？ OngaqJSとは、JavaScriptで音楽が作成できるというAPIです。 Keyの取得は こちら から 有料枠と無料枠があり、使える楽器の種類などが異なる模様（有料会員になろうかな）

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

やっていく

細かいことは ドキュメント にだいたい書いてあります。

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

• Ongaq

  • 楽曲を再生する環境にあたるオブジェクト
  • APIKeyの指定やテンポなどの大まかな機能を指示する部分

• Partクラス

  • 楽器の指定
  • measureで何小節分構成するか決める（ここ大事）

• Filterクラス

  • 音の指定
  • Partクラス.add(new Filter~~~　で追加
  • keyでビートを刻める（ドラムとその他で入る文字が違うので注意）
  • activeで音のタイミングを指定
  • lengthで1音の長さを指定

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

適当に歌を作ってみる

みんな大好きなドレミの歌を作成しようと思ったのですが、この記事書いてる途中に カエルの歌を作ってる方 を見つけたので僕は後ろ側のドラムの部分を簡単に実装してみました。

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
        }))

とまあこんな感じに簡単にですが実装してみました。 ドレミの歌含め全部のソースコードは こちら に公開してあります。

再生した感じは ここ にあります

感想

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

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