Web Audio APIとSVGによる簡易スペクトラムアナライザー

DEMO

詳細

Web Audio APIを使ってオーディオビジュアライザを作る | KRAY Inc

ほぼこの記事の内容通り。画面に出力するだけならめちゃくちゃ簡単だけど、コードの意味は理解しきれてない部分も多い。

AudioContext.createAnalyser()により取得したAnalyserNodeを使用して各周波数の値を取得しているが、取得した周波数がどこからどこまでの範囲なのかがよくわからない。

サンプリングレートが48000だったので、おそらく標本化定理から0~24,000Hzが取得した周波数の範囲かと思われるが確証はない。MDNのAnalyserNodeのページを見ても周波数の範囲の取得方法が書いていないしどうやって範囲を取得するのだろう。

参考

Web Audio API 解説 - 01.前説 | g200kg Music & Software