リズム譜を書くことで、音楽とざっくり同期を取って何かするためのJavaScriptライブラリ（の暫定版のExample）

久しぶりにポストします。
時間が過ぎるのはあっという間で、朝夕はもうすっかり秋の気配。

前回に引き続き、JavaScriptの話題で、個人的欲求から作った遊び道具に関する話です。

作ったのは今年の２～３月で、もろもろ落ち着いたら全般的に見直そうと思っていたものの、諸事情によりできないので、一旦、Exampleのカタチで上げて一区切りという感じです。

作ったもの　（※Google Chromeでのみ動作確認済み）
KiRhythmbox v0.8 - Simple Example - JavaScript Library

音楽が好きで、かつ、FlashやProcessingといったプログラミングによるアニメーションに興味があったりすると、一度は、音楽と同期を取って動かしたい（音楽に合わせて動かしたい）と思うんじゃないかなとか思ったりしますが、とりあえず私がそうだったのですが、ともかく、Chromeという爆速ブラウザが作られたり、HTML5でaudio/video要素が新設されたりで、ブラウザ上でJavaScriptだけでそういうのができる感じになってきてワクワクしつつも、とりあえず過去やってみたのは、setIntervalによる、ざっくり４つ打ち同期程度。

もっと複雑なリズムに、簡単に合わせることはできないだろうか？
音ゲーとかは厳密に微調整できる仕組みを作っているのだろうけど、
ざっくりで良いので、（ブラウザとJavaScriptで）簡単に音楽に合わせて遊びたい。

どうすればそれができるかよくわからないまま（考えないまま）月日が過ぎ、
で、今年の２月のある金曜夜、ふとYouTubeで、上述のExampleで使っているPVを見たのがきっかけで、改めて音楽同期描画の件を思い出し、挑戦してみたくなり、そのまま徹夜で書いたのが原型です。

当日たどり着いたアイデアは、

• やりたいこと（描画処理）をfunctionとして書く
• 耳コピしたリズムを元に、小節に見立てた配列に、それらを配置する
• BPMから求めた間隔で、配列内のfunctionを、setIntervalで順番に呼んでいく

これにより、BPMを調べて、描画処理とリズム譜さえ書けば、あとはうまいこと描画してくれる感じになると。

具体的には、以下のような感じです。

• やりたいこと（描画処理）をfunctionとして書く

  var k1 = function() {
    var el = document.getElementById("k");
    el.style.opacity = 1;
    var timerId = setInterval(function() {
      el.style.opacity -= 0.03;

      if (el.style.opacity <= 0.1) {
        clearInterval(timerId);
        timerId = null;
        el.style.opacity = 0;
      }
    }, 10);
  };

• 耳コピしたリズムを元に、小節に見立てた配列に、それらを配置する

以下は、キック４つ打ち、２拍４拍でスネア、というイメージ。
シンセサイザーやDTMで「打ち込み」の経験のある人には見覚えのある見た目かなと。。

  var bar1 = {
    tr1  : [k1, __, __, __,  k1, __, __, __,  k1, __, __, __,  k1, __, __, __]
    , tr2: [__, __, __, __,  s1, __, __, __,  __, __, __, __,  s1, __, __, __]
  };

ポイントは、

  var __ = function(){};

という空っぽのfunctionを用意して、上記のように埋めることで、
setInterval側では、ひたすら16分音符の間隔で呼ぶようにしている点。

• 最後に小節を並べてリズム譜は完成

  var score = [
    bar1, bar2, bar1, bar3
    , bar4, bar5, bar4, bar6
    , bar7, bar8, bar7, bar9
    , bar7, bar8, bar7, bar9
  ];

音楽側は、audio/video要素なり、YouTubePlayerAPIなりで、音楽を再生し、
それと同時に、本ライブラリのplay()を呼ぶ、というカタチです。
残念ながら、音楽と描画の開始タイミングを、プログラミングで厳密には合わせられそうにないので手動のもろもろが入りますが・・・。（audio要素だったらそこそこ大丈夫だったかも？失念）

Chromeのタイマーは精度が高いらしく、今回のExample程度の短時間ではほとんど問題なく動いてくれます。
（※Google Chromeでのみ動作確認済み）

経過時間の概念を組み込みたいとか、今見直したら妙な箇所もいろいろありそうとか、いろいろ思うところありますが、諸事情につき、しばらくはできないので、その他もろもろ含めて全般見直しは、いつかの楽しみに取っておこうと。(^_^)

そんな感じで、久しぶりのポストまで。