30分くらいで何か作ろう／もしも楽器が弾けたなら（ブラウザで）

こんにちは。

蒸し暑くなってきました。
こんな時期は夜更かしして、一人楽器でも弾いていたいと思いませんか。

だけど僕にはピアノが無い。

じゃ、作りましょう。

ということで、今日はブラウザ上で音が出るものを作ってみましょう。

こういうものです。

動作にはFlashPlayer9が必要です。
上の黒い部分をクリックしてみてください。音が鳴り始めます。
で、その上でマウスを動かすと、音が変わります。
もう一回クリックすると、止まります。

このサンプルは、Flashで音声ファイルを再生しているわけではありません。

実は、Flash内部で音の波形を作っています。

Andre Michelleという人が作って公開しているPopforgeという凄いライブラリを使うと、Flash内部でリアルタイムに音を作ることができるようになります。
内部ではメモリ上にSWFをガンガン作ってそれを読ませるようなことをしているらしいのですが、今日はその仕組みは触れません。とりあえずこのライブラリを使ってみましょう。

用意するものは以下の2つ。

• Adobe Flex Builder 2 （６０日間お試し版がダウンロードできます）
• Popforgeライブラリ （インストールの仕方はこのへんを参考にしてください）

音を出力する部分のほとんどはPopforgeライブラリがやってくれます。私たちはそのライブラリで用意されているものに、「どういう音か」を渡すだけでいいのです。

今回は細かいコードまでは説明しませんが、音程を決めている部分だけを抜粋します。

private var cursor:Number = 0;
private function bufferOnComplete(buffer:AudioBuffer):void{
var freq:Number = this.mouseX * 3 + 1;
var samples:Array=buffer.getSamples();
var len:int=samples.length;
var sample:Sample;
var amp:Number;
var i:int;
for(i=0;i<len;i++){
sample=samples[i];
amp = Math.sin(cursor);
sample.left=amp;
sample.right=amp;
cursor += Math.PI * 2 * freq / Audio.RATE44100;
cursor %= Math.PI * 2;
}
buffer.update();
}


ざっくり何をやっているかを説明すると

1. マウスのステージ上のＸ座標を取得して3倍+1する
2. 1秒間に1で得られた値の回数だけ上下する波を作って、Popforgeのライブラリに渡す。

こうして、マウスの位置によって音程の違う音が生成されていきます。
（音程に関してはこの辺を参考にしてください）

この連載は短時間でとりあえず作ってみる、がコンセプトですので、今回は音を変化させて出力できるところまでをやってみました。面白かったので次回はこれをもう少し進化させてみたいと思います。

今日作ったサンプルのasファイルを置いておきますので、興味があったら見てみてくださいね。

（甲斐）