WebGL + three.js + Web Audio API いじり - 簡易シーケンサーの改良とか

公開:2013-09-20 05:46
更新:2020-02-15 04:37
カテゴリ:webgl,three.js,web audio api,javascript,html5,audio,web 2d shooting game

簡易シーケンサーの改良

いやもうすっかりWeb Audio APIにハマっているわけですよ。大したことしてないけど。WebGLのことなどすっかり忘れてしまっている。。。大したものを見たい場合はg200kgさんのブログを見てください。

それはさておき、簡易シーケンサーの改良とかバグつぶしとかを行っている。改良はループ・行JUMPができるようにしたり、ノーテーション量を抑えるための簡略記法を追加したりとかしてみた。

テストページはこちら

動画にもしてみた。

簡易シーケンサーは一応MML風であるがMMLではない。こんな感じ。

var seqData = {
  name: 'Test',
  tracks: [
    {
      name: 'part1',
      data:
      [
        GT(-0.8),
        ENV(0.02, 0.05, 0.6, 0.07),
        TEMPO(170), TONE(1), VOLUME(1),
        R(2, true), S(C, 6, 32, -0.90, 1.0), C, C,
        L(2,true), C, ST(32), C, C, C,
        L(2,true), C, ST(32), C, C, C,
        L(4), C, ST(32), C, C, C, L(4), C, ST(32), C, C, C,
        L(4), C, ST(32), C, C, C, L(4), C, ST(32), C, C, C,

        O(5),GT(-0.95), L(4), A, O(4), A, L(2), B,
        O(5), GT(-0.8), E, L(4), F, OD, F,
        GT(-0.95), L(2, true), G, L(4), G,
        GT(-0.8), C, R(2, true),

        L(2), GT(-0.95),A, B,
        OU, GT(-0.8),E, L(4), F, OD, F,
        L(2, true), G, OU, L(4), G,
        GT(-0.95), OD, L(2), G, L(4), OU, C, ST(32), O(6), C, C, C,

        L(2, true), C, ST(32), C, C, C,
        L(2, true), C, ST(32), C, C, C,
        L(4), C, C, C, C,
        L(4), C, C, C, C,

        O(4), GT(-0.95),L(2), A, B,
        GT(-0.8),OU, E, L(4), F, OD, F,
        GT(-0.95), L(2, true), G, OU, L(4), G, C, R(2, true),

        O(4),GT(-0.95),L(2), A, B,
        GT(-0.8),OU, E, L(4), F, OD, F,
        L(2, true), G, OU, L(4), G,
        GT(-0.95), OD, L(2), G, L(4), OU, C, R(4),

      ]
    },
    {
      name: 'part2',
      data:
        [
        ENV(0.02, 0.05, 0.6, 0.08),
        GT(-0.7),
        TONE(1), VOLUME(1),
        R(1), R(1), R(1),
        S(E, 6, 96, -0.8, 1.0), S(E, { s: 32 }), E, E, S(E, { s: l(4) }), S(E, { s: 32 }), E, E,
        S(E, { s: l(4) }), S(E, { s: 32 }), E, E, L(4), E, ST(32), E, E, E,

        O(6), GT(-0.95), L(2), E, L(4, true), Eb, S(B, 5, l(8)),
        L(2), GT(-0.8), B, L(4), A, F,
        L(2), E, L(4), F, L(8, true), F, R(16),
        L(4), E, L(8), C, E, G, OU, C, E, G,

        O(6), GT(-0.95), L(2), E, L(4, true), Eb, S(B, 5, l(8)),
        R(2), GT(-0.8), L(4), A, F,
        L(2), E, R(4), L(8, true), G, R(16),
        L(2), GT(-0.95), G, L(4), E, R(4),

        O(6), R(4), S3(C, 32), E, G, OU, L(4), C, R(4),
        O(6), R(4), S3(E, 32), G, OU, C, L(4), E, R(4),
        O(6), R(4), S3(E, 32), G, OU, C, L(4), E, OD, S3(G, 32), OU, C, E,
        L(4), G, OD, S3(G, 32), OU, C, E, L(4), G, S3(C, 32), E, G,

        O(6), GT(-0.95), L(2), E, L(4, true), Eb, S(B, 5, l(8)),
        L(2), GT(-0.8), B, L(4), A, F,
        L(2), E, L(4), F, L(8, true), F, R(16),
        L(4), E, L(8), C, E, G, OU, C, E, G,

        O(6), GT(-0.95), L(2), E, L(4, true), Eb, S(B, 5, l(8)),
        R(2), GT(-0.8), L(4), A, F,
        L(2), E, R(4), L(8, true), G, R(16),
        L(2), GT(-0.95), G, L(4), E, R(4),

        ]
    }
・
・
・

JavaScriptは配列定義時にfunctionを実行できるので、それをマクロみたく使ってMML風にシーケンスデータを定義できるようにしている。今は波形メモリ音源の各チャンネルごとにトラックを割り当てるようにしている。コマンドは必要に応じて追加したり、元のコマンドをカスタマイズしている。こういうのが簡単にできてすぐ試せるのがスクリプト言語の良いところだ。昔8Bit PCでBASICをいろいろいじっていた時の感覚に似ている。

しかしでもなんかこのAPI、ところどころ難しい部分があるんだよね。難しい理屈をのぞかせているというか。オシレーター・ノードのカスタム波形とか、AudioParamのsetTargetAtTimeメソッドのtimeConstantとかね。