soundClck.jpg

haraです。

今週もloopClockのエフェクト追加

流行のSIONライブラリを導入して、動的に変わるメロディが鳴るエフェクトを追加しました。

SiONは言わずと知れた、動的なサウンド生成をわかりやすい仕組みで操作できるライブラリです。

Note.xさんやlogicalyze::blogさんのブログで使い方や概念について詳しく解説されています。

また、wonderflにもライブラリが入っていて、前回のcheckmateなどで頻繁に使われてもいました。

 

さて、今回は時計に合わせた音を鳴らしたかったのですが、ここは走る線に合わせてメロディを生成したいですよね。しかし、線に合わせたメロディを自分で作るのはなかなか大変。

そこで注目してみたのが、wonderflに投稿されていたSiON Kaoscillator 。このテクを応用できれば、線の動きからメロディを作れます。

コードを見てみると、どうもArpeggiatorというクラスを使って動的なサウンドを出しているようです。

ArpeggiatorクラスのscaleIndexパラメータとnoteLengthパラメータがマウス座標を受け取って音を鳴らしているようなので、ここに線の座標を入れてやります。

arpeggiator.scaleIndex = px * 32;
arpeggiator.noteLength = [0.5,1,1,2,4][int(py * 4 + 0.99)];

このようにして実行すると、うまく鳴りました。

Arpeggiatorを使うだけの最小限のコードをwonderflにアップしました。

マウスの座標で音が変化します。

Sionライブラリはこれからますます注目度が上がっていくであろうライブラリだと思います。使いこなすにはそれなりの音に関する知識が必要とされますが、これがあるとサウンドとアニメーションの同期がほぼ完璧に取れて表現力アップにつながります。みなさんもぜひ使ってみてください!

HTML5飯