【Unity】Youtubeとかニコニコとかによくある曲なってるときに四角いボリュームみたいなのが上げ下げしているアレを作った

タイトルが不穏かも。
なんなんだ…って思う人もいるかもしれませんが、
ひとまず以下の動画の50秒~を見ればわかります。
www.nicovideo.jp

良さげな曲とかMV聞いているときによくあるアレだよ!アレ!!!

アレの名前

オーディオスペクトラム」という名称らしいです。
画像で見ると見たことあるものがわんさか出てきます。

www.google.com

スペクトラムって何???と思って軽く調べてみると、
縦軸が音量、横軸が音の周波数を表したグラフらしいです。
正確には違うかもしれませんが、それは専門的な解説をしている他サイト様に丸投げします… www.youtube.com

AudioSource.GetSpectrumData

UnityのAudioSourceで扱える関数に、
AudioSource.GetSpectrumData()というものがあります。 各種引数は以下の通り。

引数名 説明(公式) ゆる解説
float[] samples オーディオサンプルとともに格納する配列です。
その長さは 2 の累乗でなければなりません
とってくる周波数の配列
float channel サンプルする元のチャンネル 音の強さ(0~1)
左 0~1 右
FFTWindow window サンプリング時に使用する FFTWindow のタイプ フーリエ変換するときのオプション


docs.unity3d.com

第一引数に音の波形をフーリエ変換してブロック状にしたものが入るようになっています。
このサイトの図解が分かりやすかったです。 www.yukisako.xyz

イメージとしてはこんな感じ。
音のデータが0-1の配列となって帰ってくるイメージです。
配列数は、取ってきたいブロック数。

第二引数は左右どちらから音が聞こえるか。
0~1で指定するもので、0だと左、1だと右。

第三引数はフーリエ変換のオプションです。
docs.unity3d.com

実際に使ってみた

第一引数のsampleに一定の音量配列をとってきて…

全ての値を使うのではなくある程度の数で平均を取り、
UIのスケールに反映させています。

参考にしたもの

音の高さ、音量が見える!フーリエ変換、スペクトルって何だろう? | 人人振動
【画像45枚あり】フーリエ変換を宇宙一わかりやすく解説してみる | 迫佑樹オフィシャルブログ
AudioSource-GetSpectrumData - Unity スクリプトリファレンス