Get the source at Github

For a while I wanted to experiment with audio visualisation in the browser, with the new functionality in Chrome. My graduation project concerned the other way around, namely the sonification of the dom of any webpage. To create this demo I mainly used, some html5rocks info

Example

Check the “chrome only” demo

Parts explained

The workhorse of the visualisation is the “webkitAudioContext” currently available in Chrome. With the webkitAudioContext it is possible to create an audio analysis. The following snippet is the setup for the analysis .

     // create the analyser
     var context = new webkitAudioContext();
     var analyser = context.createAnalyser();

    //initialize
    function onLoad(e) {
                startThreeJs();
                var source = context.createMediaElementSource(audio);
                source.connect(analyser);
                analyser.connect(context.destination);
                rafCallback();
     }
     window.addEventListener('load', onLoad, false);

The rafCallback function is where the visualisation happens, the data of the audio is stored in an bytearray every available frame. For this visualisation I only used 15 ‘frequency’ bars to keep the animation smooth, for real purposes you should use the whole spectrum.

     // bind the audio data to the web gl cubes
     function rafCallback(time) {
                window.requestAnimationFrame(rafCallback);

                var freqByteData = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(freqByteData);

                for (var j = 0; j < MAX_BAR; j++) {
                    var magnitude = freqByteData[j];
                    var delta = magnitude / 100;
                    cubes[j].position.y = cubesPos[j] + delta * 0.25;
                    cubes[j].scale.y = delta;
                    // categorize color on amplitude
                    var color =  0xf5a711;                
                    if( delta > 0 && delta < 1 ){
                       color = 0xf5a711;
                    }else if( delta > 1 && delta < 2 ){
                        color = 0xf55c11;
                    }else{
                        color = 0xcd0505;
                    }
                    cubes[j].material.color.setHex( color );
                }
      }

Feel free to use and abuse the source