まるで音が見えるかのよう！？ WebGL を使ったサウンドデータの波形表現 gl-spectrum
イコライザなどによく見られる波形表現
今回ご紹介するのは、WebGL を利用してまるでイコライザのようなビジュアルを表現した、サウンド関連デモです。
見た目はとてもシンプル。いわゆる波形データをビジュアライズしているもので、特に三次元表現になっているとか、ビジュアル的なエフェクトがかかっているというわけではありません。
しかしシンプル故に、こういった実装を通じてサウンド関連の処理に挑戦するのは、とてもわかりやすいかもしれませんね。
豊富な表示パターンが面白い
WebGL とサウンド系の API を組み合わせたものというと、ビジュアルに非常にこだわった作品が多いです。
今回の作品はそういったビジュアル重視の作品ではなく、より波形が目で見て捉えやすいような外見をしています。そもそも派手な演出を目指して作られたものではないのだと思います。
しかし、表示できる波形の色や形にいくつかのパターンが用意されていて、見た目をガラリと変えることができます。
デフォルトの状態では、上の画像のように青がベースのカラーリングになっています。
全体の色調を変化させるなどの様々な操作は、画面の左下に並べられている部品を使います。
ここからカラーパターンを変化させたり、波形の伸びる起点となるラインを移動させたり、かなりたくさんの操作が行えます。特にカラーパターンは種類がかなり多いですね。
その他にも、頂点を繋いでポリゴンを作るのではなく、柱のような少し太めのラインを使って描画するモードなどもあります。
また、SoundCloud から音源を取得しているようで、これに関する情報も左上のところに表示されていますね。
オンラインで音声データを取得し、それをブラウザ上で解析して波形として表示するというのは、数年前では考えられなかったような処理ですよね。なんだかウェブの進化ってすごいなあ。
今回の作品はサウンドビジュアライザというよりは、オンラインで利用できるイコライザ風の波形描画アプリケーションという感じです。
見た目の派手さ、という意味ではそれほどでもありませんが、音声データがどのような構成になっているのかがとても目で捉えやすい表示になっていると思います。
ウェブだけで完結する面白いデータビジュアライズの例だと言えますよね。
ぜひチェックしてみてください。
