Three.js and the Audio Data API Visualisation
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.
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!).