サウンドデータから生成された波形を可視化する gl-waveform! ずっと見ていられる美しさ

doxas : 2017-01-03 13:36:49

シンプルすぎるくらいシンプル

今回ご紹介するのは、サウンドデータから波形を生成して、それをビジュアライズすることができる WebGL の波形可視化デモです。

私は WebAudio に限らず、音声系の知識はあまり明るくないので細かいところはよくわからない部分もあるのですが、動的に再生されている音声データを解析して、その波形からビジュアライズしていることはデモを見れば直感的にすぐわかるかなと思います。

色の付け方というか、見せ方が個人的にはすごく好きで、なんかわからんのですがずっと見ていられるような、そんなコンテンツだなと感じました。

log スケールモードも備える

今回のデモは、良くも悪くもシンプルというか、あまりたくさんのことができるような作りにはなっていません。

自動的に読み込まれるサウンドデータが、ページのロード完了後に自動的に再生されます。そして、その再生されている音声データをリアルタイムに解析しながら、これを WebGL の波形として描画します。

着色には全部で四つの色が用いられているようで、微妙なグラデーションが非常に美しくビジュアライズされます。

画面左下のメニュー部分。

画面の左下のところに、ちょっとしたメニューのようなものが用意されているのですが、基本的にはほとんど操作する必要のないコンテンツです。

メニューからは、log スケールモードに切り替えるためのチェックボックスのオン・オフの他、四つで一組になっているビジュアライズカラーパレットのランダム更新、対象とする帯域のレンジ調整などが行なえます。

ランダムでカラーパレットが変化する様子は、偶然生まれる不思議なグラデーションも美しく、ついつい何度もクリックしてしまいますね。

メニューの部分は、ランダムに選ばれたカラーパレットに応じてフォントなどの色も変わるようになっているので、よほどのことがない限りは、背景に溶け込んで見えなくなってしまうことはなさそうです。

また、log スケールモードを使うと、よりハイコントラストな結果として可視化することもできるので、また違った印象のデモとして楽しむことができるでしょう。

その他にも、マウスのドラッグ操作やホイールによるズーム操作などが行えるようになっているみたいですが、ちょっとバグっぽい挙動をすることもあったので、あまり過度に動かさないほうがいいかもしれません。

log スケールではよりハイコントラストな印象に。

今回のデモは、本当にシンプルな作りです。

悪い言い方をすると、シンプルすぎてあまり面白みや意外性はありません。

ですが音声データに合わせて生成されるグラデーション模様や、ランダムに選択されるカラーパレットによる不規則性など、個人的には結構楽しく閲覧できました。

音声データを読み取ってサウンドビジュアライザみたいなことをやる WebGL デモは結構多くありますし、どれも魅力的な作品ばかりでしたが、逆にこれだけシンプルなほうが、じっくりと音を楽しみながらぼんやり眺めるにはいいかもしれないなと感じました。

オーディオ系のプログラミングが得意な方であれば、より楽しめるいろいろな見方というのがあるのかもしれないですね。私はあまり技術的なところはわかりませんでしたが、それでも単純に、美しいデモだなと思いました。

ぜひチェックしてみてください。

リンク:

gl-waveform

share

follow us in feedly

search

search

monthly

sponsor

social