大量の音源データから自分だけのサウンドをミキシング・シェアも可能な UNI SOUND のウェブサイト
オーディオビジュアル系 WebGL 事例
今回ご紹介するのは、UNI SOUND株式会社のウェブサイトです。
UNI SOUND では楽器の買い取りや販売のほか、音楽や音に関するさまざまなサービスを展開しているようで、今回のサイトにもその「音」に対するこだわりがあふれています。
サイト上でいくつもの音源を組み合わせたミキシングができるようになっており、その結果をシェアすることも簡単にできるようになっています。
リンク：
WebGL で描き出す音の世界
今回のサイトの WebGL 実装は、キービジュアルとしてトップページの冒頭に配置される他、ページ内の背景として機能するようになっています。
なにか宇宙空間や異空間のようなイメージの CG になっていて、バーチャルな世界観のなかで音の存在が視覚的に描き出されます。
サイトは音を扱っていますがもちろん勝手に音が再生されてしまうようなことはなく、ユーザーが操作を行うとそこで初めてサウンドが有効になります。
画面の右側にある独特なインターフェース部分が、サウンドミキサーのような役割を持っています。
簡単にざっくり説明すると、最大で５つの音源をミックスして再生できるようになっており、任意のサウンドを選んでオン・オフすることも可能です。
インターフェースの上のところにある一番目立つ「FIND YOUR SOUND」と書かれているボタンを押すことで、サウンドミキサーを有効にすることができます。
WebGL で描かれる CG も音に反応して姿や色が変化するようになっています。
FIND YOUR SOUND と書かれたボタンは一定の周期で明滅するようにアニメーションしているので、ごく自然にそこに目が行くと思います。
ボタンをクリックするとサウンドが有効になり、またクリックするたびに、音源データがランダムに入れ替えられます。全部で何種類あるのかまではわかりませんでしたが、結構バリエーションが多そうです。
すごく耳に残りやすいわかいりやすい音源もあれば、かすかに届いてくるような絶妙な音量・質感の音源もあり、ボタンをぽちぽち押しているだけでもその組み合わせの妙を楽しむことができます。
WebGL でサウンドビジュアライザやオーディオビジュアルを実装するというのはかなり昔から行われてきたことで、事例としては本当にたくさんの実装例が過去にあります。
とはいえそれらの完成度やビジュアルの方向性、また扱っているサウンドの種類などもかなり多岐にわたるため、結構個性的なものが多いんですよね。
今回の場合はなによりサウンドの種類とその品質の高さ、またそれが自然と体験できるような全体としての導線やデザイン、インターフェースの操作性などがすごく高いレベルで実装されているように感じました。
もちろん、WebGL のビジュアルも派手すぎずほどよい質感でずっと見ていられる温度感です。
ぜひチェックしてみてください。
