web audio api使って声の高低に合わせてオブジェクトを上下させるアプリつくりました

 13日に開催されたweb music ハッカソンで声の高低に合わせてオブジェクトを上下させるアプリ作ってきました
 マイクを許可して、声か楽器の音程を上下させると丸い球が上下に動きますので、横から飛んでくる棒を避けてください。


仕組み

 web audio apiには波形をフーリエ解析するAPIがあり、音にどの周波数がどれくらいの音量で含まれているのかを2行ほどで解析してくれます。(サンプル)。
 これを使うことでボコーダーやコード進行の検出のような踏み込んだ音のハックができるわけです。
 
 このアプリではanimationframeごとにもっとも音量の大きい周波数を取得し、それを音の高低としています。ただし実際には最大の周波数はかなり揺れるので50フレーム分の平均を取って平滑化し、滑らかにみせています。慣性のような挙動をするのはそのせいですね

これから

 当たった時の演出を乗せて、教育用のゲームとして発展させていければな、と