HTML5では、PCのマイクやカメラから音声や映像を取得するMedia Streamと呼ぶインタフェースが提供されています。この機能はIE11やSafariでは、まだ実装されておらず、ChromeとFirefoxのみのサポートですが、今回、この機能を活用して、先週投稿したthree.jsによる3D再帰木を、マイクから拾った音声に応じて動くようにしてみました。以下の画像をクリックすると、ブラウザがマイクを使用してよいか尋ねるダイアログボックスが表示されますので、それをONにしてみて下さい。3D木が表示され音声に応じて動きます。YouTubeなどで音楽を流すと踊ります。
今回、p5.jsというライブラリを使ってMedia Stream APIを利用しました。p5.jsは、Processingに近いコーディングスタイルでアニメーションやメディア操作が容易に記述できるJavaScriptのライブラリで、昨年秋頃から大注目されています。p5.jsを使うと、Media Streaming APIが簡単に利用できるだけでなく、様々な他のJavaScriptライブラリとの連携も容易です。今回、3DモデルをWeb上で表示するthree.jsと組み合わせて実装しました。p5.jsのサウンドライブラリは、ボリュームだけでなくFFTによるスペクトル分析もできます。このサンプルでは、高音だと縦長の形状となり、ボリュームに応じて大きな木になるようにしてみました。詳細はソースコードをご覧ください。
追記2016-05-10：Chrome が2016年1月のアップデート以降、httpsのサイト以外ではマイクの使用ができなくなりました。Firefoxも最近のアップデートで使用できなくなりました。qa.fujimura.comがhttps化されるまでの間はMicrosoft Edgeを使用ください。
追記2017-01-23：qa.fujimura.comの上記サイトをhttps化して、動くようにしました。
追記2019-04-09：リンク先をgithub Pagesに変更しました。