NOTCOT.ORG で見つけた Web Audio API で動くインタラクティブなサウンドビジュアル Web アプリ FLORA DRIFT を紹介。
Image may be NSFW.
Clik here to view.
Web Audio API が使用されているので Chrome、Safari でアクセスしてください。
(Web Audio API 非対応の Internet Explorer、Firefox では動きません)
サウンドの生成は Web Audio API、描画は HTML5 の Canvas を利用して JavaScript で作られています。
Image may be NSFW.
Clik here to view.
フルスクリーンもしくはそのままウィンドウ内で実行するか選択します。
Image may be NSFW.
Clik here to view.
アンビエントな音楽が流れながら背景が次々に切り替わります。
背景をマウスでドラッグし続けると小さなスウィープ音が鳴ります。
画面下の▲を押すと設定画面が表示されます。
Image may be NSFW.
Clik here to view.
左の◎でテンポの調整、中央の◎でリズム音量の調整ができます。
右側の2つ六角形を押すと楽器が表示されます。
Image may be NSFW.
Clik here to view.
1つ目の楽器はアタックが速めの減衰音。
六角形のパッド部分を押すと音が出ます。
Image may be NSFW.
Clik here to view.
2つ目の楽器はアタックが遅めの持続音でテルミンのような音。
弦の上をドラッグすると音が鳴ります。
ソースコードをざっと見たところ、曲や背景の生成は決められたルールに従って自動で生成されているようでした。
こういうセンスのあるプログラムをサラッと作ってみたいものですね。
[関連サイト]
FLORA DRIFT
whitevinyldesign.com
NOTCOT.ORG
Image may be NSFW.
Clik here to view.気が付けば累計アクセス数が2,500万を突破していました。
いつも見に来てくださる方も、ググッて来てくださった方も、ありがとうございます。
今後も音楽方丈記をよろしくお願いします。
Image may be NSFW.
Clik here to view.
Web Audio API が使用されているので Chrome、Safari でアクセスしてください。
(Web Audio API 非対応の Internet Explorer、Firefox では動きません)
サウンドの生成は Web Audio API、描画は HTML5 の Canvas を利用して JavaScript で作られています。
Image may be NSFW.
Clik here to view.
フルスクリーンもしくはそのままウィンドウ内で実行するか選択します。
Image may be NSFW.
Clik here to view.
アンビエントな音楽が流れながら背景が次々に切り替わります。
背景をマウスでドラッグし続けると小さなスウィープ音が鳴ります。
画面下の▲を押すと設定画面が表示されます。
Image may be NSFW.
Clik here to view.
左の◎でテンポの調整、中央の◎でリズム音量の調整ができます。
右側の2つ六角形を押すと楽器が表示されます。
Image may be NSFW.
Clik here to view.
1つ目の楽器はアタックが速めの減衰音。
六角形のパッド部分を押すと音が出ます。
Image may be NSFW.
Clik here to view.
2つ目の楽器はアタックが遅めの持続音でテルミンのような音。
弦の上をドラッグすると音が鳴ります。
ソースコードをざっと見たところ、曲や背景の生成は決められたルールに従って自動で生成されているようでした。
こういうセンスのあるプログラムをサラッと作ってみたいものですね。
[関連サイト]
FLORA DRIFT
whitevinyldesign.com
NOTCOT.ORG
Image may be NSFW.
Clik here to view.
気が付けば累計アクセス数が2,500万を突破していました。いつも見に来てくださる方も、ググッて来てくださった方も、ありがとうございます。
今後も音楽方丈記をよろしくお願いします。
