3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@seigo-pon

OngaqJSを触ってみた

3
Posted at

ニュースが出てたので触ってみました。

なに

JSで作曲できる、というサービスです。
公式ページはここ

どうやって

サービスのサーバーに用意された音源を、JSからメロディ付けてコントロールしているようです。
なので、APIキーと実行環境のIPアドレスが必要。

APIキーの発行とIPアドレスの登録

  • サインアップページでアカウントを作成
  • サインインし、Dashboard ページでAPI Keyが発行されていることを確認
  • 同ページのAuthorized Origins に使用するIPアドレスを登録
    • Current remote IP addressに現在のIPが書いてあるので、そのまま転記
    • Webサイトから実行する場合はドメイン名を登録するっぽいです

仕組み

ここに詳しいです。
楽器クラスを作成し、音源とメロディを覚えさせ、ミキサークラスに接合するって感じでしょうか。
多少であれば楽器の配置も可能（各楽器のボリュームコントロールはわからん）。

DTMでやってる内容が、そのままプログラム化されているようなイメージです。

1小節が16拍で構成されており、どの楽器が何小節演奏し、どの拍でなんの音をどれぐらい流すか、でメロディを構成することでができます。
各楽器は決められた小節分をループで構成します。

楽器

  • Partクラスを使用
  • 初期化時、soundに音源名を設定することで、音源を決められる
  • 初期化時、measureで何小節分構成するか決められる
  • attachで音色を決めれるみたいですが未検証
  • tagはミキサーに設定した楽器クラスを参照する用の名前
// ドラム
const myDrum = new Part({
    sound: "small_cube_drums",
    measure: 4
})

メロディ

  • Filterクラスを使用
  • Partクラスのaddで追加
    • 何個でも追加可能
    • パターンの違うメロディを複数追加とかしてわかりやすくできる
    • だが、ひとつの楽器に対して、同じ位置で複数メロディ追加しても意味はないので注意
  • 初期化時、keyで音色を設定
    • ドラムはsnare、kickなど
    • それ以外はC2、C1#などドレミで
    • ["C2", "E2", "G2"]とすると和音になる
  • 初期化時、lengthで音色の長さを設定
  • 初期化時、activeで音色を弾くタイミングを設定
  • この初期化の3要素とも関数で構成されており、引数からそれぞれの要素の内容をその時々で変更することが可能
    • 第一引数が拍
    • 第二引数が小節
    • 第三引数がアタッチメント
    • 例えば、1拍目がドで2拍分続ける、4拍目がレで1拍分続ける、それ以外は弾かない、とかできる
// キックを4拍に1回叩くドラム楽器を4小節分設定
const myDrum = new Part({
    sound: "small_cube_drums",
    measure: 4
})
myDrum.add(new Filter({
    key: "kick",
    active: n => (n % 4 === 0)
}))

// 和音を1拍に1回弾き続けるキーボード楽器を2小節分設定
const myKeyboard = new Part({
    sound: "plain_keyboard",
    measure: 2
})
myKeyboard.add(new Filter({
    key: ["C3", "E3", "G3"],
    length: 1,
    active: 0
}))

配置

  • Filterクラスを使用
  • Partクラスのaddで追加
  • 初期化時、typeにpanを指定
  • 初期化時、xで配置を設定
// キーボードを-45度の位置に配置
myKeyboard.add(new Filter({
    type: "pan",
    x: -45
}))

ミキサー

  • Ongaqクラスを使用
  • 初期化時、bpmでBPMを設定
    • 60以下は動かないっぽい？
  • 初期化時、volumeにボリュームを設定
  • 初期化時、onReadyで準備完了イベントをキャッチ可能
    • 遠隔で何かセットアップしているのか、結構OKになるのが遅いです
  • addで楽器を追加
  • startで演奏開始
  • pauseで演奏停止
  • params.isPlayingで演奏中かどうかとれます
const ongaq = new Ongaq({
    api_key: "aaaaaaa",
    volume: 80,
    bpm: 60,
    onReady: () => {
        console.log("ok")
    }
})

ongaq.add(myDrum)
ongaq.add(myKeyboard)

if (ongaq.params.isPlaying) {
    ongaq.pause()
} else {
    ongaq.start()
}

かえるのうたつくってみた

とりあえずなんか作ってみようと思ってかえるのうた作ってみました。
ながーいっすが、自分でわかるように切れ目ごとにメロディをわけてるので長いです。

const ongaq = new Ongaq({
    api_key: "aaaaa",
    volume: 80,
    bpm: 60
})

// 4小節のピアノ
const myPiano = new Part({
    sound: "my_piano",
    measure: 4
})
// ♪ドレミファミレド
myPiano.add(new Filter({
    key: (beat) => {
        switch (beat) {
        case 0: return ["C2"]
        case 2: return ["D2"]
        case 4: return ["E2"]
        case 6: return ["F2"]
        case 8: return ["E2"]
        case 10: return ["D2"]
        case 12: return ["C2"]
        }
    },
    length: 2,
    active: (beat, measure) => {
        return (measure === 0 && ((beat < 14) && (beat % 2 === 0)))
    }
}))
// ♪ミファソラソファミ
myPiano.add(new Filter({
    key: (beat) => {
        switch (beat) {
        case 0: return ["E2"]
        case 2: return ["F2"]
        case 4: return ["G2"]
        case 6: return ["A2"]
        case 8: return ["G2"]
        case 10: return ["F2"]
        case 12: return ["E2"]
        }
    },
    length: 2,
    active: (beat, measure) => {
        return (measure === 1 && ((beat < 14) && (beat % 2 === 0)))
    }
}))
// ♪ドドドド
myPiano.add(new Filter({
    key: ["C2"],
    length: 3,
    active: (beat, measure) => {
        return (measure === 2 && (beat % 4 === 0))
    }
}))
// ♪ドドレレミミファファミレド
myPiano.add(new Filter({
    key: (beat) => {
        switch (beat) {
        case 0: return ["C2"]
        case 1: return ["C2"]
        case 2: return ["D2"]
        case 3: return ["D2"]
        case 4: return ["E2"]
        case 5: return ["E2"]
        case 6: return ["F2"]
        case 7: return ["F2"]
        case 8: return ["E2"]
        case 10: return ["D2"]
        case 12: return ["C2"]
        }
    },
    length: (beat) => {
        if (beat < 8) {
            return 1
        } else {
            return 2
        }
    },
    active: (beat, measure) => {
        return (measure === 3 && ((beat < 14) && ((beat < 8) || (beat >= 8 && beat % 2 === 0))))
    }
}))

ongaq.add(myPiano)

自作曲も軽めで作ってみましたが、GithubPagesに公開しようとして、APIキーの設置がいるので諦めました。
どっかに環境用意するほどでもないので、、、

無料でできること

  • 13楽器のみ使用可能
    • ここのOnly Freeで出るやつのみ
  • それ以外は特に制限はなし
    • ただ、Showcaseへのアップは制限されそうかな？
    • あと、今は無制限なリクエストになってるけど、それも制限されそうな気がする

やってみて

大昔DTMやってた時代を思い出して懐かしいです。
そのままがJSになってるので、あまり違和感なく入れる。
ただ、メロディもプログラムで、タイミングベースで頭の中に思い描きながらif文駆使しないといけないので、それは多分プログラマ以外には相当ハードル高いかな、と思います。

どう活かすか

難しいですよね。
これをそのままWebサイトに貼り付ける、ってわけにもいかないし。
MIDI時代を思い出して、サイトの入口で鳴らすとか？（冗談）
例えば、パララックスみたいにスクロール位置に合わせて曲をコントロールする、とかはできそうでしょうか？

まだまだ発展途上ですが、アイディアとしては非常におもしろかったので、このまま継続していって欲しいです。

以上

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?