Music Hack Day Tokyo 2014で作ったchaos animalsの技術的な解説的なお話

先日アップしたMusic Hack Day Tokyo 2014に、エンジニアとして参加してきて賞が取れた的なお話で、
自分たちが作った「chaos animals」の技術的な解説をしようかと。
Echo NestとSoundCloudを使ったけど、SendGridやSpotifyなども使いたかったなぁーと思った。
ちなみに技術的にはそんな難しい事はしていなかったりもしたり。

ということで解説は以下から。
ちなみにソースはこちらから(githubに上げるのは面倒なので上げてません)。

■環境

サーバー：heteml
フレームワーク：fuelphp 1.6、bootstrap3
使用言語：PHP、JavaScript、HTML5
API：Echo Nest、SoundCloud

■機能

・SoundCloudから音源を引っ張ってくる
・引っ張ってきた音源をEcho Nestで拍に分解
・分解した拍をランダムに6匹の動物に4つずつ割当
・動物をクリックすると最大4拍分の音が鳴る
・クリックだけでなくQ、W、E、R、T、Yを押しても音が鳴る
・COME ONボタンを押すとCOME ONが鳴る(Echo Nestのポールの声)
・Recを押すとどのタイミングでどれを押したかなどを記録しDBに保存
・/hello/[num]にアクセスすると記録したものが再生される
・レスポンシブ対応なのでiPad、iPhoneでも遊べる

■解説

Echo NestのAPIをJavaScriptで扱う公式サンプルはこちらから

・SoundCloudから音を引っ張ってきて、Echo Nestで拍に分解 →examples/soundcloud.html

player = remixer.getPlayer();

remixer.remixTrackBySoundCloudURL(soundCloudURL, soundCloudApiKey, function(t, percent) {
  track = t;
  if(track.status == "ok"){
    remixed = new Array();
    
    var meter = parseInt(track.analysis.track.time_signature);
    for (var i=0; i < track.analysis.beats.length; i++) {
      if (i % meter == 0) remixed.push(track.analysis.beats[i]);
    }

    for(var i = 0;i < 5;i++){
      var n = Math.floor(Math.random() * remixed.length);
      extra.push(remixed[n]);
    }

    player.play(0,extra);
  }
}

って感じ。
かなり省略してるけど、SoundCloudのURLから音楽を取ってくるのはこれでよい。
うまく取ってくるとtrackのstatusがokとなるので、remixedという中に入っているjsonをシャッフルして格納。
で、playerに取り出した拍データの配列を入れて再生すると。

・動物をクリックすると最大4拍分の音が鳴り、キーボードでも反応する
・Recモードだったら時間を記録する

$("#area1").on("click",function(e){
  e.preventDefault();
  
  //play 1 beat callback
  player.addOnPlayCallback(function(){
    changeImg("area1");
  });

  player.stop();

  player.play(0,extra);

  if(recInterval){
    timeAry.push({
      time:times,target:"area1"
    })
  }
}

$(window).on("keydown",function(e){
  e.preventDefault();

  if(e.which == 81){//q
    $("#area1").click();
  }
});

って感じで、クリックイベントを設定しておき、
キーボードを押した際にクリックイベントを発動させるようにした。

・COME ONボタンを押すとCOME ONが鳴る(Echo Nestのポールの声)

これは上とほぼ同じなので省略

・/hello/[num]にアクセスすると記録したものが再生される

とりあえずごにょごにょ

なんか色んなファイルにまたがっていて解説が面倒なので。。。

って感じでとりあえずすごく単純なものをいっぱい使ったって感じ。
TIPSと違って解説を最後まで書くのはモチベーション的に難しいなぁと思った。
なんかごめんなさい。

基本的にそこまで難しい事はやっていないし、なるべく綺麗に書いたつもり。
だからある程度だったら普通に読めると思う的な。
ちなみにchromeにしか対応していない理由はクロスドメイン制限に引っかかってしまう？から。 x-allow-originが出てた。

この作品は何かの機会があればブラッシュアップして行く予定。