A CodePen by Antonis Kamamis. Web Audio API experiment - Best viewed in full view and latest chrome This is a Webkit only experiment with Web audio API. The idea came from my After Effects days and this video from Red Giant TV(http://www.redgiantsoftware.com/videos/redgianttv/item/54/) ; In short its animating particles depending on the frequenc…

index.html

<canvas class="c"></canvas>

script.js

(function() {
canvas = document.querySelector('.c');
ctx = canvas.getContext('2d');
W = window.innerWidth;
H = window.innerHeight;
console.log(H);
canvas.width = W;
canvas.height = H;
ctx.fillRect(0,0,W,H);
holder = [];
var particles = 100;
wind = 5;
handler = '';
colors = ['#2f5e70','#7fb2f1','#4f7ac8','#34478c','#16193c']

var emitter = {x:W/2,y:H/1.5};
 
function Particle(pos){
  this.x = pos.x;
  this.y = pos.y;
  this.r = Math.round(Math.random()*2);
  this.life = Math.round(Math.random()*10000);
  this.vy = (Math.random()>0.5)?Math.random()/2:-Math.random()/2;
  this.traction = Math.round(Math.random()*wind-3);
}

function create(){
  holder.push(new Particle({x:emitter.x,y:emitter.y}));
}

function draw(){
    var i = 50;
    while(i--){
    create(); 
    }
 
  ctx.globalCompositeOperation = 'source-over';
  ctx.fillStyle = '#1b1f2b';
  ctx.fillRect(0,0,W,H);
  
 
  var partNum = holder.length;
  for(var i =0;i<partNum;i++){
      
    var temp = holder[i];
    if(temp === undefined)continue;
   
    ctx.fillStyle = findColor(temp.life);
    ctx.beginPath();
    ctx.arc(temp.x,temp.y,temp.r,0,Math.PI*2,true);
    ctx.fill();
    temp.x -=wind-temp.traction;
    temp.life -=40;
    temp.y -= temp.vy;
    if(temp ===undefined)console.log('un')
    if(temp.life < 0||temp.x<0){
      holder.splice(i,1);
    }
   
  }
  ctx.fillStyle = '#1867f7';
  ctx.arc(emitter.x,emitter.y,3,0,Math.PI*2,true);
  ctx.fill();
}
    
function initCanvas(){ 
  ctx.beginPath();
  ctx.arc(emitter.x,emitter.y,3,0,Math.PI*2,true);
  ctx.fill();
  handler = setInterval(draw,40);
}
function findColor(life){
    if(life<2000){return colors[4];}
    else if(life<4000){return colors[3];}
    else if(life<6000){return colors[2];}
    else if(life<8000){return colors[1];}
    else{return colors[0];}
}
initCanvas();
    
    
    /**************************************************************************/
    var context, 
        source, 
        soundBuffer,analyser,javascriptNode,
        url = 'http://burned-pixel.com/FranzSchubert.mp3',audio;

    // Step 1 - Initialise the Audio Context
    // There can be only one!
    function init() {
      audio = new Audio();
      audio.src = url;
      audio.controls = true;
      audio.autoplay = true;
      document.body.appendChild(audio);
        
        context = new webkitAudioContext();
      // setup a analyzer
        analyser = context.createAnalyser();
        analyser.smoothingTimeConstant = 0.5;
        analyser.fftSize = 1024;
      
       // setup a javascript node
        javascriptNode = context.createJavaScriptNode(2048, 1, 1);
      
    } 

    init();
  
  javascriptNode.onaudioprocess = function() {
        // get the average, bincount is fftsize / 2
        var array =  new Uint8Array(analyser.frequencyBinCount);
        analyser.getByteFrequencyData(array);
        var average = getAverageVolume(array)
        //update the emitter position
        emitter.y = H/1.5 - average*6;
    }
  
    function getAverageVolume(array) {
        var values = 0,average, 
        length = array.length;
        // get all the frequency amplitudes
        for (var i = 0; i < length; i++) {
            values += array[i];
        }
        return values / length;;
    }

  window.addEventListener('load', function(e) {
  
  // Our <audio> element will be the audio source.
  source = context.createMediaElementSource(audio);
  source.connect(analyser);
  
  analyser.connect(javascriptNode);
  javascriptNode.connect(context.destination);
  source.connect(context.destination);
  // ...call requestAnimationFrame() and render the analyser's output to canvas.
}, false);
  
}());

style.css

*{padding:0;margin:0;}