var Graphix=function(audio){this.audio=audio;this.backgroundImg=0;};Graphix.prototype={updateImage:function(src){this.backgroundImg=0;var imgObj=new Image();imgObj.onload=function(){this.backgroundImg=imgObj;}.bind(this);imgObj.src=src;},reqAnimationFrame:function(){window.requestAnimationFrame(this.redrawSpectrum.bind(this));},redrawSpectrum:function(){this.reqAnimationFrame();if(!this.audio.analyzerNode){return false;}
var freqByteData=new Uint8Array(this.audio.analyzerNode.frequencyBinCount);this.audio.analyzerNode.getByteFrequencyData(freqByteData);var WIDTH=document.querySelector('.container').clientWidth;var HEIGHT=200;var canvasSpectrum=document.getElementById('spectrum');var ctxSpectrum=canvasSpectrum.getContext('2d');canvasSpectrum.width=WIDTH;var SPACER_WIDTH=8;var BAR_WIDTH=5;var OFFSET=100;var numBars=Math.round(WIDTH/SPACER_WIDTH);ctxSpectrum.clearRect(0,0,WIDTH,HEIGHT);var o;for(var i=0;i<numBars;++i){var magnitude=freqByteData[i+OFFSET]*HEIGHT/255;if(this.backgroundImg){o=Math.round(HEIGHT-magnitude);ctxSpectrum.drawImage(this.backgroundImg,0,0,BAR_WIDTH,255,i*SPACER_WIDTH,o,BAR_WIDTH,Math.round(magnitude));}}}};function updateGUI(){gfx.reqAnimationFrame();if(!gfx.backgroundImg)gfx.updateImage("img/darcula-spectrum.png");}