Categories
JavaScript tmlib.js WebAudio

JavaScriptでオーディオビジュアライザを作ってみた

Web Audio API という、ブラウザ上で音を解析したり鳴らしたりできるプログラムを利用してオーディオビジュアライザを作ってみました。

使用しているライブラリ

@phi_jp さんが作成された、 tmlib.js を利用しています。このライブラリは……一言で「コレができる」ってものではなく、いろんなことができます。本当に。 Web Audio API にも対応されたということで使っています。

参考にしたサイト

Web Audio API – 仕様
Turning the Web Up to 11 – Googleが作成したサンプル&説明
ダンスフィーバ~! イェ~☆ – jsdo.itで公開されてる、picoron さんが制作したサンプル
ビジュアライザ(WebAudio API) – tmlib.js 0.1.6@phi_jp さんが制作したサンプル

作ってみたサンプル

音量を取得し、そのまま利用したサンプルです。

ビジュアライザの形をハートにしたものです。

星形ですね。

円形に広がるビジュアライザです。音量ではなく、音の変化量で表示しているため、動きが激しくなっています。

最後に、最初に紹介したサンプルを、音の変化量で表示するよう変更したサンプルです。

計算方法によって全然違うエフェクトが作れるのが面白いです。 
よかったら遊んでみてくださいね!!

Leave a Reply

Your email address will not be published. Required fields are marked *