All the code for this project was developed on my own and in my free-time. It's licensed under the WTFPL but a mention would be nice, @Likethemammal.
This is a set of visualizers that are made entirely using DOM elements and CSS3 Animations and Transforms. There is no SVG, Canvas, WebGL, or visual plug-in used. It takes quite a bit of tweaking to reduce compositing and optimize rendering layers but this is the kind of stuff CSS can do now a days.
(Everything you see is made from div tags!)
It uses Dancer.js a small Web Audio library to get spectrum and waveform data using the HTML5 audio tag.
There are currently two types of visualizer:
- The Hexagonal one, which utilizes spectrum data and uses
beforeandafterpsudeo-elements to create the six-sided shape. - And Bars, which projects the waveform data and uses the CSS3 transform
skewto create the 3D column shape.
##Goals
It has a relatively simple UI but the plan is to connect it to the SoundCloud and Grooveshark APIs to visualizer any song from those services.
There are a few other visualizer ideas I'm toying with as well. As one of the restriction I've decided to only use traditional DOM elements like div, li, etc.
