Untitled

<!DOCTYPE html>
<html>
<head>
	<title>RENDER TEST</title>
</head>
<body style="background: linear-gradient(135deg, rgb(95, 107, 155) 0%, rgb(18, 19, 27) 100%) no-repeat; ">
	<script type="text/javascript">
		var data = [2,2,2,60,487,1442,3160,8103,6265,8093,8271,5101,5676,5375,5677,6404,4868,6278,5229,4524,5939,4668,5809,5728,4278,5360,4668,4672,4822,7124,5282,5176,5496,7336,6145,6996,6064,6616,6040,4730,5801,6076,6052,6227,6991,8151,6520,6159,7655,6494,6422,7042,5471,7497,6760,7032,6311,3847,7695,7189,7021,4710,3805,4306,6456,5097,6929,6067,5904,5588,5257,5210,5086,5150,5225,3936,6716,6166,7169,5254,4657,5005,6214,7788,8661,6659,6508,6785,6797,6481,8053,8991,7411,4637,5628,6669,6535,6722,5739,6739,7005,6187,8502,6405,6792,7268,4570,6345,8384,20077,12425,13832,15771,10929,12171,10939,8744,7709,10159,9721,8899,7437,7303,7164,6677,7486,6882,6690,6636,4961,7024,7162,6527,6665,9425,6157,9956,7594,10970,8830,10556,9732,8178,8808,6647,8538,10251,7349,8827,7770,9388,7564,6690,10042,7210,7530,7967,9787,10221,12186,9833,8042,7083,9772,8777,6165,7078,7595,7396,6862,5239,6198,6595,6889,6034,6752,6247,6163,4497,6334,5591,6635,7185,6932,8979,9479,8765,8962,11191,9775,10987,8617,8672,9401,9243,11061,8932,9635,10463,8275,9209,8230,10942,9342,9299,14150,10074,12215,9315,9791,5939,8849,8485,20883,29802,21428,20986,29901,26032,21436,25881,23317,14498,13813,24995,18380,18404,23818,21276,14314,22307,26700,15328,24108,21519,14439,17212,21970,21602,17696,25797,21690,20473,29391,24894,19464,24015,27013,21143,16945,24843,30070,23446,24085,27690,23629,24638,23596,23438,20080,24098,22017,23735,31147,25538,20066,29149,24072,17775,25749,21385,22415,17983,27777,18769,13321,26301,20642,17330,22648,21093,17407,13186,19651,18069,13414,28670,26852,17777,27906,24682,19476,26812,30837,19947,20331,26423,25693,22961,28711,18384,21107,31113,30189,26550,30218,30415,22744,20540,15682,14935,13409,15267,13608,10823,11012,11778,17732,30468,31410,29751,29995,26856,29337,26035,27796,26450,30829,31345,26813,26034,24586,31876,27040,30096,25392,22492,24537,25602,22499,30140,30667,22429,25305,20321,30241,29930,29067,28162,29349,25215,22486,24971,27497,30500,24267,28481,28271,27126,30146,29590,28231,23893,24623,23676,20512,19719,30476,24533,25926,27977,29851,27407,25810,25442,24861,29767,23603,20592,21967,31062,27852,27051,25066,26057,28397,29940,25877,29864,21077,24243,24657,22450,31593,28663,26191,26036,28425,30457,25860,26610,26684,27311,24862,25343,24414,29524,27694,28453,26807,24360,29053,27084,29621,26909,24896,29830,25224,25388,30390,30141,27768,27606,29143,29012,29660,27969,26791,24685,24848,22819,21354,29880,30020,28550,29648,29542,29863,24447,28133,24285,20913,20404,19751,24971,29005,30366,25668,25637,21751,30207,25535,31125,26972,27151,25158,24231,28728,30685,29800,30747,28637,28103,30388,26510,26025,25424,30329,26994,25922,25385,28187,30631,27120,28099,29485,30063,30033,24938,24275,24413,31258,23878,22597,24323,30936,27488,28614,29684,29624,29061,26518,29490,25802,23870,24128,23907,21429,30965,25455,25995,20919,29566,28933,28932,29913,26728,26399,23750,28654,28869,30197,28206,25707,26612,27994,29628,30574,29244,25552,26571,20614,25019,19888,29451,31347,29480,27216,26793,4357,5370,4739,5064,5778,6284,6304,4609,4615,4945,4596,4768,4236,4645,7690,4528,4417,5729,4633,3799,5262,6932,4853,4338,5886,4848,5783,5382,4483,5212,5548,4110,5213,4953,4587,6522,6421,7153,3620,4404,5624,4751,5067,4853,4095,6174,5514,5302,3744,4500,5648,3441,5121,6134,5128,4880,4632,5883,7494,6092,5595,5814,7230,5876,5557,6413,5371,4769,8181,7032,9503,7536,5823,8219,5977,7489,6686,6111,7360,8510,6772,8019,7443,9152,7227,7248,6874,3970,8030,6975,5554,7391,7104,5619,7344,6246,7001,5080,6962,6944,5786,6923,7063,5605,6584,5332,8172,9203,7953,8110,5474,8185,9097,6262,8820,7483,7699,8487,8715,9497,10387,7993,11061,13388,15261,11666,9925,13002,12684,10263,13097,12934,14806,10307,14859,16507,9698,11681,14592,8205,14093,15709,17344,16337,16795,14395,11601,16214,16681,10979,14731,14234,13266,11751,13070,18471,24452,27291,22312,17776,26350,27070,26009,29711,20656,27637,30630,26979,29423,22761,27201,26171,24056,28271,25005,27859,27945,23707,29084,30811,25958,26790,23966,28597,27793,26816,31015,30747,27088,29069,24622,29352,23173,24959,24718,25776,26839,24492,25903,28998,30079,29808,32188,29245,28261,2172,766,2071,1866,31717,29227,31694,30162,31329,32768,31121,31915,31959,31652,31965,31983,30826,31897,21743,30824,31589,32181,32365,32198,32768,31346,32768,31004,31305,30752,31926,25316,29984,32079,31379,31785,32336,32767,32767,31317,31049,31669,29953,31191,18963,30145,31826,32314,30698,31917,32767,32492,31741,31853,30587,31186,31616,21279,29034,30677,31779,29711,31327,32767,32210,32477,32369,32001,31830,31557,31063,31618,31719,31179,31197,31754,32373,30386,31829,31602,30553,31300,30891,31213,26084,31681,30390,31315,30269,32768,31994,32510,32767,29619,30198,31819,32136,30231,30858,31294,30665,29448,32767,31457,31813,31098,31436,32095,30162,32063,26198,32541,32609,31345,32131,32165,28920,30838,31805,32239,31291,32205,32425,28068,30948,32030,31519,31047,31802,29417,31562,32767,30575,30073,31940,31334,25178,30614,32767,31339,31873,32200,32546,31457,32269,30518,32768,31647,31445,24059,30775,32020,31139,30652,32236,32768,32767,31600,32037,30749,32023,31523,18969,30266,31266,31269,31554,30455,32496,31570,31749,32768,32045,31409,31761,21202,28381,32405,31552,30952,30079,31548,30692,32768,32669,30914,29665,31096,24423,29747,30922,31110,32656,31553,32350,31177,31308,31639,31342,30615,31710,31421,26376,30953,31011,30872,29763,32767,31184,31957,30178,30493,31506,31840,13842,12099,13076,12150,10717,10468,10425,11177,9765,13203,12898,9344,8275,14418,7784,5158,3815,3915,3588,8747,5870,4187,7419,8148,4980,4343,9933,5317,4497,3406,3295,3681,7201,5307,4357,6413,8597,5547,4859,15203,13851,10614,8991,6411,6194,6337,5279,4538,3945,9327,6628,5028,16987,14589,11146,9131,7474,6489,7013,9540,6811,6944,11476,9117,7359,13228,7947,5547,4376,3304,3897,7369,9193,4946,3929,8839,6119,5052,10582,6264,4973,3957,3476,3601,3226,7213,4511,3852,9110,6188,5268,14841,14584,11511,9936,8042,8234,9065,7715,6332,7362,10117,9178,9262,16889,3907,4553,4252,4025,4643,4342,4260,3157,3624,3132,3511,3506,3065,3028,2846,2948,2870,3361,3165,12073,4303,4698,3843,3641,4130,7026,5064,4609,3992,3747,4376,4567,3870,4303,3647,4258,3360,3146,3875,3476,3680,3767,4040,4131,3099,11078,5627,6019,4524,4830,5452,4660,11637,6456,5030,6011,5992,3321,3807,3548,3723,4673,3297,5501,5148,4261,4671,3718,4782,5523,3977,9333,4494,4612,4175,4150,4389,4166,6218,6889,5571,5322,6589,5706,6267,6086,4872,5952,5451,6971,7054,7497,4787,4839,5234,4616,6045,5700,5349,5502,4285,3869,4258,4700,23529,10907,10137,9445,9783,13131,10453,16407,10057,10882,10493,14385,9939,25751,10436,9816,10312,10938,13377,11742,15144,12900,12088,12716,17059,20738,12710,24821,11494,12131,12270,13949,11558,20063,12003,11396,11711,11000,16071,13376,20899,12784,11571,11710,16424,11498,17940,13302,11669,11804,11787,14224,18761,19889,17383,15995,15873,26400,15609,24817,15569,14294,16260,15747,15479,16861,26353,17258,15680,16557,15865,15200,26643,15893,17118,17835,15149,20121,16951,17874,16398,17345,17864,17750,17217,21897,17100,17261,17891,17791,17822,17353,26186,18683,18780,19859,20292,19006,21233,29367,29703,10975,8934,7338,22054,31444,29637,30507,30018,30203,29355,31039,31138,29853,29888,28013,30537,27605,30297,31064,29844,29779,30764,30365,28234,31337,30829,30029,29905,29508,30505,29873,31720,29457,30737,29594,30227,29569,31002,30071,28699,29691,29360,29593,30994,30801,29320,26465,28618,29838,30401,31132,30321,30570,28718,28222,29262,29726,30168,29917,29218,29042,31570,29741,31098,27439,29529,28884,30353,30323,29231,29722,27040,22077,25931,30705,25898,31517,30461,29866,26453,29005,31350,30512,29832,29534,30049,30337,31399,29505,30289,30293,28449,24648,28859,29885,26720,32120,31094,29980,28691,28870,27406,29376,29374,27243,28494,29477,29770,27046,30786,29756,30989,29893,31317,29988,30573,31294,29506,27923,29535,29620,25540,28249,28304,26901,25568,28915,27014,29918,30365,29732,28210,29926,27419,28253,29168,29747,25676,28769,26956,29296,24866,30628,24992,26501,22938,30281,22222,30962,26423,23565,23947,23602,24355,22804,29990,25294,24914,22019,28132,23106,30916,29620,25335,24247,28577,22650,23623,28321,26416,26367,29388,21755,27521,31300,26133,24781,27144,29615,24386,21418,26521,24710,24791,27158,22378,26642,29614,27987,27939,29453,28462,31409,27515,29070,27857,25019,23593,24507,25863,25498,10985,11710,8462,8165,5326,3985,1888,1621,1479,1183,1367,1862,25369,32118,29170,32323,31591,31372,31380,31818,30693,31412,31167,31763,31626,32115,31487,26291,30861,31405,30645,31096,32767,30228,31698,31926,32501,31281,30248,31046,24607,30872,30643,31525,31149,32767,28175,30962,30343,31940,31338,30398,31220,28535,31414,32113,31912,32073,32231,30686,32453,31728,31967,30622,30835,31444,26827,30980,31391,31070,30979,32768,32767,31770,31366,32768,31743,30644,32298,23410,31203,32080,31523,31457,31385,32613,30694,32768,31580,30898,32000,31728,22182,29927,31172,30447,31601,31448,32647,31765,30283,31993,31042,31581,32005,25011,30754,31072,31357,31486,32163,32767,31953,32108,31225,31973,31382,32347,31273,29320,31835,31468,31944,32248,32208,30613,31678,30923,31602,31689,32106,31017,27251,31642,31158,30832,31070,31500,32024,31881,30552,30677,31103,31268,31343,28065,30559,32767,29909,31641,32067,32747,31089,30964,32351,31084,30088,31408,27966,32759,32497,31900,31013,32768,32064,31062,32145,31709,30703,31725,31686,28605,30908,30155,31600,31047,32716,31147,32338,31396,32535,32288,30326,31266,25675,30549,30044,32768,31005,31767,31960,31276,32051,31688,31025,29769,31292,28965,28297,31612,31946,30850,32768,31366,32767,31669,30296,31187,30634,31825,23317,28629,31340,32767,30100,30947,32767,32767,31634,32522,30982,31748,30506,13478,13009,11141,10528,9661,7219,6554,5305,5030,5041,4010,3221,2880,2406,2087,1752,1763,1603,1373,13313,5638,1876,1508,1250,1408,8703,4469,2249,2148,1424,1234,1161,1083,1179,1010,1018,1187,984,1128,1010,1140,1123,1035,1161,980,7841,2288,2049,1502,1253,1126,12428,13228,3786,1962,2240,1392,1327,10628,4950,1781,1379,1037,968,1067,5450,2281,1339,995,942,900,8018,2703,1788,1427,1110,1102,946,5649,2080,1478,1152,1178,1218,1022,1155,1020,1036,1015,1063,926,11247,7174,7018,7021,6202,6729,6398,4806,5487,3970,2950,5112,4152,3375,3353,2762,1612,1895,1959,2040,899,1193,1027,793,572,428,402];


		var waveGradient = [[0, "255,255,255"], [0.7, "255,255,255"], [0.701, "229,229,229"], [1, "229,229,229"]];


		function canvasLinearGradient(canvasCtx,colorStops){

			var l = canvasCtx.canvas.height; // Gradient Size

			var u = colorStops.map(function(stop){
				var opacity = stop.length === 3? stop[2]:1;

				return [stop[0],stop[1],opacity]
			})

			return u.reduce(function(e,stop){
				var sValue	= stop[0],
					color	= stop[1],
					opacity = stop[2],
					clr = "rgba("+color+","+opacity+")";

				return e.addColorStop(sValue,clr),e;

			},canvasCtx.createLinearGradient(0,0,0,l))
		}

		function memoizeScale(max,data){
			var m = [];
			return function(v){
				var s = data[v];
				if(!m[s]){
					m[s] = (max - data[v])/max;
				}
				return m[s];
			}
		}

		function drawWaveform(canvas,dataSamples,config){
			var c = canvas.getContext('2d');
			var w = 0,
				x = 0,
				d = canvas.width,
				g = config.linePercent * canvas.height,
				gw = config.barWidth,
				v = canvas.height - g,
				r = dataSamples.length;

			var scaledSamples = memoizeScale(config.maxVal,dataSamples);

			var increment = config.barWidth + config.gapWidth

			c.clearRect(0,0,canvas.width,canvas.height);
			c.save();
				c.beginPath();
				for(k = 0;k < d;k+= increment ){

					C = scaledSamples(((k / d) * r) | 0);
					T = (C  * g) | 0;
					S = ((1 - C ) * v + g) | 0;

					//Draw Bar
					c.rect( k,		// X
							T,		// Y
							gw,		// W
							S-T);	// H

					//Draw Gap
					A = Math.max(T, w)
					c.fillStyle = "transparent"
					c.fillRect(
							k - config.gapWidth,	//X
							A,						//Y
							config.gapWidth,		//W
							Math.min(S,x) - A)		//H

					w = T
					x = S
				}

				c.fillStyle = canvasLinearGradient(c,waveGradient)
				c.fill()
				c.clearRect(0,g,d,1)
			c.restore()
		}

		function drawOverlay(canvas,fill,from,to){
			var c = canvas.getContext('2d');
			from = canvas.width * from;
			to = canvas.width * to;
			c.save()
				c.fillStyle = fill;
				c.globalCompositeOperation = "source-atop"
				c.fillRect(from,0,Math.abs(from-to),canvas.height);
			c.restore();
		}

		setTimeout(function(){

			var cvs = document.getElementById('test');

			drawWaveform(cvs,data,{
				maxVal: 32678,
				linePercent: 0.7,
				barWidth: 2,
				gapWidth: 1
			})

			drawOverlay(cvs,'orange',0.5,0.6)


		},1000);
	</script>

	<canvas width="820" height="100" id='test'></canvas>

</body>
</html>