Now, tripping out to visuals while you listen to music doesn’t require a separate app. You can do it right in the browser. And this pretty proof of concept not only creates dancing 3D visuals: it also demonstrates just how much is possible with 3D browser capabilities, and how they could interact with music, suggesting much more to come.
Los Angeles-based developer Felix Turner of Airtight Interactive shares The Loop Waveform Visualizer. Tested for use in Google’s Chrome, it’s powered by two cross-platform, cross-browser, HTML5-associated technologies, WebGL and the Web Audio API. Give it any MP3 (you can even drag and drop right into the browser), and it’ll give you dancing, geometric visuals.
http://airtightinteractive.com/demos/js/reactive/
Felix writes to explain the project, how it was built, and why this set of enabling tools can be so powerful:
Chrome’s new Web Audio API allows us to do some pretty amazing audio stuff directly in the browser. Specifically, the RealtimeAnalyserNode Interface provides real-time frequency and time-domain analysis information, which allows you to display realtime graphic-equalizer-style level bar charts and waveforms of an MP3. Chrome’s drag-and-drop file handling also allows you to drag in and play MP3 files from the desktop. There is now lot of potential to build very cool realtime audio visualizations using Chrome, which previously was only possible using Processing or similar.
The Loop Waveform Visualizer uses a combination of level and waveform data to produce a circular audio visualization of any MP3. Use the mouse to tilt and the mousewheel to zoom.
The current time slice is rendered in the center, then moved outwards over time. The level determines the brightness, thickness, and Z scale of the loops. The Z displacement gives a nice ‘bounce-to-the-beat’ effect. The waveform shape is drawn into the loop. This means you can almost ‘see’ the sound. As with most visualizations, there was a lot of parameter tweaking to produce a nice feel.
I’m very happy with the performance of this piece – on my box, it stays pretty solid at 60FPS. This is partially due to the fact that no new 3D objects are created over time. The 160 loops are created on initialization, then have their geometry modified each frame.
To run this, you do need a WebGL-capable machine and latest Chrome. Also be aware that it won’t look as good when running under Windows, since Chrome’s WebGL implementation on Windows does not suport line thickness (among other issues). It works better if you use a track that has a high dynamic range (meaning the volume of the track changes a lot over time).
Creative Commons audio sample is from “Screw Base” (by Beytah). Built with Three.js