iPhoneでワウペダルを作ったった

ワウペダルが好きです。ギターのカッティングにかけて遊んでいるとあっというまに時間が過ぎていきます。そんなわけでどこのご家庭にもあるiPhoneとJavaScriptでワウペダルを作ることにしました。こんなやつ。
　


　
■作り方
まず、Web Audio APIでフィルターを作ります。
Biquad Filterを作ってバンドパスフィルターに設定するだけです。簡単。Qの値を少し大きめの4くらいにしておくとワウらしいクセが出ます。あとは0.0〜1.0の引数の値に応じてフィルターの中心周波数をセットする関数setWahPos()を用意しておきます。これが、ペダルの角度が変わったときに呼ばれます。
　 
var ctx = new AudioContext();
var wah = ctx.createBiquadFilter();
wah.type = "bandpass";
wah.Q.value = 4;
wah.connect(ctx.destination);
var setWahPos = function(pos) {
    wah.frequency.value = 400 + 3000 * pos;
}
setWahPos(1.0);

　
次にiPhoneの加速度センサーで角度を検知する処理を書きます。
deviceorientationのイベントリスナーを用意するとiPhoneの角度変化イベントを受け取ります。角度情報はalpha、beta、gammaの3方向あり、ペダルとして使用する前後の傾き情報はbetaが対応します。検知した角度を0.0〜1.0の範囲に正規化して指定されたコールバック関数を呼ぶ処理はこんな感じ。
　

var Pedaler = function(callback) {
    var self = this;
    window.addEventListener("deviceorientation", function(e){
        if (e.alpha) {
            self.setAngle(e.alpha, e.beta, e.gamma);
        }
    });
    this.angle = 0;
    this.callback = callback;
}

Pedaler.prototype.setAngle = function(alpha, beta, gamma) {
    var angle = (beta + 20) / 40;
    if (angle < 0.0)
        angle = 0.0;
    else if (angle > 1.0)
        angle = 1.0;

    this.angle = angle;
    if (this.callback)
        this.callback(this.angle);
}

　
上記のPedalerオブジェクトを生成して、コールバック関数でワウのsetWahPos()を指定することで角度と音色を連動させます。
　

$(function() {
    var pedaler = new Pedaler(function(a) {
        setWahPos(a);
    });
})

　
あとはUIと音源処理を書けば完成です。音源は本当はギターをiPhoneにつないで鳴らしたいところですが、WebRTCがまだiOSのブラウザでは使えないのでサンプリング音源をループで鳴らすことにしています。
　
iPhoneWah　http://aikelab.net/iphonewah/
ソースコード　http://github.com/aike/iphonewah/
　
Pedalerはワウに限らず汎用的なペダルとして使えるように書いてあるので、アイデアとiPhoneを踏み壊す勇気があればいろいろ応用が考えられると思います。