blog.takurinton.dev

OngaqJS触ってみた

2020-04-24

はじめに

こんにちは

ポートフォリオ

#OngaqJSとはなんぞや?

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

こちら

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

ぽちぽちしていけば簡単に登録でき、誰でも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よりも簡単に書けるし、ドキュメントもシンプルだし、とっても楽しかったです!

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