2017-8-14

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