このVisualizerは Live Coding de Night の「#libcodingso at 2nd Infinite」にて @pside が披露したものです。
Microphone | Web Audio API を参考にしております。
オリジナル版はモダンブラウザであれば動作するような仕組みが入ってますが、僕が作成したものはベンダー修飾子の都合、ChromeやWebkit系でのみ動作します。
参考元のVisualizerは、`getByteTimeDomainData()`で取得した結果を可視化しています。これはWaveformデータ、つまり波形を表示します。
一方、僕が作成したVisualizerは`getByteFrequencyData()`を可視化しています。これは周波数です。画面左側が低周波数、右側が高周波数です。
OS XでSoundflowerなどを介して鳴っている音を直接入力すると、自分が聞いている音の周波数を可視化できるので楽しいです。あとMP3とかストリーミング音源とか艦これの音を可視化すると、ある程度高い周波数がほとんど観測されなくなります。音声圧縮で人間が聞き取りづらい周波数帯をカットしているためです（ただし最近の調査結果では、この周波数帯は人間でも感じ取れるとか）。
`resetFilter`ボタンについて、押すとwebaudio.jsの`setFilter(filter)`メソッドがコールされます。
ChromeのDeveloper Toolsを開いて、`setFilter`メソッドのfilterの定義値を弄ったあと「Ctrl+S」すると値がソースコード上に保存されます。ただこのままだとVisualizerに反映されないので、ボタンを押すことでWebページのリロードの必要なくフィルターの値を調節できます。
え？なんで入力欄とか用意しないのかって？めんどくさかったんですよ。。。
詳しくは BiquadFilterNode · apis · WPD · WebPlatform.org をご覧下さい。