Web Audio APIで音が鳴るインタラクティブなサウンドビジュアルページ FLORA DRIFT

NOTCOT.ORG で見つけた Web Audio API で動くインタラクティブなサウンドビジュアル Web アプリ FLORA DRIFT を紹介。



Web Audio API が使用されているので Chrome、Safari でアクセスしてください。
(Web Audio API 非対応の Internet Explorer、Firefox では動きません)

サウンドの生成は Web Audio API、描画は HTML5 の Canvas を利用して JavaScript で作られています。



フルスクリーンもしくはそのままウィンドウ内で実行するか選択します。



アンビエントな音楽が流れながら背景が次々に切り替わります。
背景をマウスでドラッグし続けると小さなスウィープ音が鳴ります。

画面下の▲を押すと設定画面が表示されます。



左の◎でテンポの調整、中央の◎でリズム音量の調整ができます。
右側の2つ六角形を押すと楽器が表示されます。



1つ目の楽器はアタックが速めの減衰音。
六角形のパッド部分を押すと音が出ます。



2つ目の楽器はアタックが遅めの持続音でテルミンのような音。
弦の上をドラッグすると音が鳴ります。


ソースコードをざっと見たところ、曲や背景の生成は決められたルールに従って自動で生成されているようでした。

こういうセンスのあるプログラムをサラッと作ってみたいものですね。

[関連サイト]
　FLORA DRIFT
　whitevinyldesign.com
　NOTCOT.ORG

---

気が付けば累計アクセス数が2,500万を突破していました。
いつも見に来てくださる方も、ググッて来てくださった方も、ありがとうございます。
今後も音楽方丈記をよろしくお願いします。