音声データ可視化とかやってみた

　さて、
自分のPCはWindows10とKubuntuのデュアルブートにしてあります。

　先日、Kubuntuで作業をしている際に、音楽でも聴きながらやるかとなりました。
そういえば、Kubuntuの音楽プレイヤーとか使ったことがありませんでした。
メニューを開いてみると、どうやら「Audacious」というのがそれに該当するようです。
Kubuntuではこれが標準装備アプリのようです。
初めて使ったりしましたが、音楽ファイルをドラッグ＆ドロップすると、
プレイリストという形で登録され、とくに違和感なく再生させることができました。

↓見た目はこんな感じ。

　んで、
音楽プレイヤーとかでよくあるような周波数グラフとかが右下に出ています。
その見た目が何かちょっと格好良いというかスタイリッシュな感じで良さげに思えたので、
これをJavaScriptで組んでやってみたらどうだろうかとその時に思いついた次第です(^_^;)

　その後、
さっそくネットで調べてみた所、
そのものズバリ「Web Audio API による可視化」というのを見つけました。
これを参考に実装すれば良さそうですね。
こちらやこちらも参考になりますね。

　JavaScriptで音声データを再生させる場合、
audioなDOMを作って、srcにデータ元を設定してplayすれば簡単にやれます。
AudioContextとか意識せずにやれますが、
可視化するにはそれを使ってやる必要が出てくるようですね。
今回作るやつでは、周波数グラフと波形を両方とも扱うので、
ざっくり以下のようなコードを書いてやれば良さそうです。

var audioContext = new AudioContext(),
	audioSource = audioContext.createMediaElementSource(audioDom),
	waveAnalyser = audioContext.createAnalyser(),
	freqAnalyser = audioContext.createAnalyser(),
	waveBuf,
	freqBuf;

audioSource.connect(audioContext.destination);
audioSource.connect(waveAnalyser);
audioSource.connect(freqAnalyser);

waveBuf = new Uint8Array(waveAnalyser.frequencyBinCount);
freqBuf = new Uint8Array(freqAnalyser.frequencyBinCount);
		︙
waveAnalyser.getByteTimeDomainData(waveBuf);
freqAnalyser.getByteFrequencyData(freqBuf);

　Analyserなやつは出力先がなくても構わないので上記のような接続で行けます。
試してないけど、以下のように接続しても同様にOKだと思います。
WaveShaper等を使ってソースに効果を掛けるようなノードを間に挟む場合は、
以下のような接続の方が良いのかもしれません。

audioSource.connect(waveAnalyser);
waveAnalyser.connect(freqAnalyser);
freqAnalyser.connect(audioContext.destination);

　Analyserには、
minDecibels、maxDecibels、smoothingTimeConstantというプロパティがあり、
周波数グラフの出力を調整できるようです。こちらで解説されています。
ちょっといじってやってみたりしましたが、
基本的にはデフォルトのままで良さそうな感じです。

　なお、JavaScriptで音声を扱う場合、
基本的にはユーザー入力を契機とする場合にのみ再生が許可される感じなので要注意です！
以前に書いているように、自分もハマったりしてました(^_^;)
技術的にはこちらが参考になると思います。

　ということで、
実際にやってみました。
↓こんな感じに仕上がりました。
操作コントローラは拙作の「MMD Viewer 改」から流用しました。

　周波数グラフは、Audaciousっぽい感じにはなったかな？(^_^;)
ただ、波形に関しては1/60秒くらいの描画更新では全然追いつかないのか、
表示がブレてしまっていてイマイチな感じ・・・ご了承ください(^_^;)
まぁ、波形は変化が激しいようなので仕方ないのかも。

　ところで、
「Audacious」はWindows版もあるようです。今まで知りませんでした。
ちなみに自分が普段使っている音楽プレイヤーなソフトは「XMPlay」というやつです。
「Euphoria」というスキンが気に入って使っています。
で、このソフトでも周波数グラフとか出るわけですが、
自分が作ったやつと挙動が違う感じ。
こんな感じにしてみたいけど、どうすれば良いのだろう・・・まぁいいか(^_^;)

　ということで、
音声データ可視化を試してみるにはこちらからどうぞ。
使い方や注意点とかも書いてあります。