Three.js and the Audio Data API Visualisation

3D audio visualisation

Mr Doob has created a superb JavaScript 3D Engine in three.js. Screenshots from my 'Bowl' demo.

I’ve been watching the development of three.js by Mr Doob for a couple of months and have been desperate to experiment with it. With Firefox 4 well into the beta stage I decided to bite the bullet and do a little Audio Data visualisation in 3D!

I’ve dabbled with audio visualisation and the HTML5 Audio Data API in the past, so I’m pleased I’ve had a chance to use it again and see what’s new. Note: My previous audio visualisations using canvas no longer work due to specification changes in the API. A pitfall of using an API that’s still in the draft stages I guess.

I’ve put together 5 simple demo’s all based around the same theme showing some of the options available in three.js. My favourite is “bowl”, pretty colours galore!

  • Circle: Simple circle, zoom in / out using the mouse wheel.
  • Cubes: Same as circle only using the cube primitive.
  • Cylinder: Using the cylinder primitive with a floating camera.
  • Sinewave: Rotated sinewave (looks a little like a chandelier).
  • Bowl: A combination of the above demos to create an interesting 3D bowl effect.

Please note these demos will only work in Firefox 4. The Audio Data API is still a draft specification and Mozilla is the only browser vendor to have added it to date. I’m looking forward to it being added to Chrome (Webkit), with its superb V8 JavaScript engine. The demo’s really are just the tip of the iceberg for both three.js and the Audio Data API. It’s certainly an area of the HTML5 specification to keep your eye on.

The music track used in the visualisation is called “Sad Robot” by a group called “Pornophonique”. Very catchy tune that you can download from Jamendo.

Update: It looks like enabling the Google Page Speed Apache module seems to have broken the demos. I’ve disabled it now so it should hopefully fix it (fingers crossed!).

Mr.doob on November 16 10 / 319 Permalink

Nicely done :)
Cylinder, Sinewave and Bowl fail to work here though. Something wrong in the external js loading code.

Matt on November 16 10 / 319 Permalink

Hey Mr Doob,
Thanks for the feedback i’ll look into it. Thanks for the awesome three.js by the way.

Mr.doob on November 16 10 / 319 Permalink

It’s a pleasure :)

Matt on November 16 10 / 319 Permalink

Fingers crossed they are fixed now. The Google Page Speed module was playing silly buggers :(

AlteredQualia on November 16 10 / 319 Permalink

All 5 demos now work fine for me on Windows 7 / Firefox 4 Beta 7. Very fluid, nice work ;)

Matt on November 16 10 / 319 Permalink

Phew! Thanks for the feedback! :)

Leave a Comment

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