var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var width = canvas.width = window.innerWidth;
var height = canvas.height  = window.innerHeight;
 
var audio = new Audio();
	audio.src = '1.mp3';
	audio.play();
 
var audCtx = new AudioContext(),
 
	analyser = audCtx.createAnalyser(),
 
	src = audCtx.createMediaElementSource(audio);
 
src.connect(analyser);
analyser.connect(audCtx.destination);
 
var rectX; // represents the rectangle X on the canvas
var arr;   // the array which we will use to store the frequencies
 
function draw(){
 
	ctx.clearRect(0, 0, width, height);
 
	arr = new Uint8Array(analyser.frequencyBinCount);
 
	analyser.getByteFrequencyData(arr);
 
	for(var i = 0; i < 200; i++){
 
		barX = (width/2 - 300) + 3 * i;
 
		ctx.fillRect(barX, height/2, 2, -arr[i]);
 
	}
 
	window.requestAnimationFrame(draw);
 
}
 
draw();

dmFyIGNhbnZhcyA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdjYW52YXMnKTsKdmFyIGN0eCA9IGNhbnZhcy5nZXRDb250ZXh0KCcyZCcpOwp2YXIgd2lkdGggPSBjYW52YXMud2lkdGggPSB3aW5kb3cuaW5uZXJXaWR0aDsKdmFyIGhlaWdodCA9IGNhbnZhcy5oZWlnaHQgID0gd2luZG93LmlubmVySGVpZ2h0OwoKdmFyIGF1ZGlvID0gbmV3IEF1ZGlvKCk7CglhdWRpby5zcmMgPSAnMS5tcDMnOwoJYXVkaW8ucGxheSgpOwoKdmFyIGF1ZEN0eCA9IG5ldyBBdWRpb0NvbnRleHQoKSwKCglhbmFseXNlciA9IGF1ZEN0eC5jcmVhdGVBbmFseXNlcigpLAoKCXNyYyA9IGF1ZEN0eC5jcmVhdGVNZWRpYUVsZW1lbnRTb3VyY2UoYXVkaW8pOwoKc3JjLmNvbm5lY3QoYW5hbHlzZXIpOwphbmFseXNlci5jb25uZWN0KGF1ZEN0eC5kZXN0aW5hdGlvbik7Cgp2YXIgcmVjdFg7IC8vIHJlcHJlc2VudHMgdGhlIHJlY3RhbmdsZSBYIG9uIHRoZSBjYW52YXMKdmFyIGFycjsgICAvLyB0aGUgYXJyYXkgd2hpY2ggd2Ugd2lsbCB1c2UgdG8gc3RvcmUgdGhlIGZyZXF1ZW5jaWVzCgpmdW5jdGlvbiBkcmF3KCl7CgoJY3R4LmNsZWFyUmVjdCgwLCAwLCB3aWR0aCwgaGVpZ2h0KTsKCglhcnIgPSBuZXcgVWludDhBcnJheShhbmFseXNlci5mcmVxdWVuY3lCaW5Db3VudCk7CgoJYW5hbHlzZXIuZ2V0Qnl0ZUZyZXF1ZW5jeURhdGEoYXJyKTsKCglmb3IodmFyIGkgPSAwOyBpIDwgMjAwOyBpKyspewoKCQliYXJYID0gKHdpZHRoLzIgLSAzMDApICsgMyAqIGk7CgoJCWN0eC5maWxsUmVjdChiYXJYLCBoZWlnaHQvMiwgMiwgLWFycltpXSk7CgoJfQoKCXdpbmRvdy5yZXF1ZXN0QW5pbWF0aW9uRnJhbWUoZHJhdyk7Cgp9CgpkcmF3KCk7