PUBLIC MARKS with tags sounds & WebGL

If you've read some of my other articles on this blog you probably know I'm a fan of HTML5. With HTML5 we get all this interesting functionality, directly in the browser, in a way that, eventually, is standard across browsers. One of the new HTML5 APIs that is slowly moving through the standardization process is the Web Audio API. With this API, currently only supported in Chrome and as of October 2013 also in Firefox, we get access to all kinds of interesting audio components you can use to create, modify and visualize sounds (such as the following spectrogram).

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

ThreeAudio helps you create music visualizations in Three.js, by exposing audio data in GLSL shaders. It can be used directly with Three.js or as a tQuery plug-in.

There are a few different ways to sync visuals to music: Manual – live controlling visuals with keyboard or midi controls. Sequencing – pre-analyzing the music and scripting an animation as a list of timecoded events. Midi Input –  if you have access to the music’s midi data, this can be a great way to drive visuals. Audio Reactive - code driven visuals that automatically adapt to a live audio input. Here I want to talk about the last method. This can be useful for “Hands Free VJing”, allowing you to sit back and have the visuals automatically sync, or in a video game where you want some part of the visuals to react to the soundtrack.