music-visualization-canvas/lib/index.js

music visualization

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).MusicVisualization={})}(this,function(t){"use strict";var e=function(){return(e=Object.assign||function(t){for(var e,i=1,a=arguments.length;i<a;i++)for(var s in e=arguments[i])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)},i=function(){function t(t){var i=this;this.options=e({gap:0,minHeight:10,el:document.body,audioEvents:{}},t);var a=this.options.el;this.drawRafId=null,this.objectUrl="",this.canvas=this.createCanvas(),this.canvasCtx=this.canvas.getContext("2d"),this.options.el.appendChild(this.canvas),this.canvas.width=a.clientWidth,this.canvas.height=a.clientHeight,this.analyser=null,this.audio=this.createAudio(),Object.keys(this.options.audioEvents).forEach(function(t){i.audio.addEventListener(t,i.options.audioEvents[t])}),this.resizeObserver=new ResizeObserver(function(t){for(var e=0,a=t;e<a.length;e++){var s=a[e];i.canvas.width=s.target.clientWidth,i.canvas.height=s.target.clientHeight}}),this.resizeObserver.observe(a)}return t.prototype.start=function(){var t=this;if(this.audio.src&&(this.audio.paused||!(this.audio.duration>0)))return this.createAnalyser(),this.audio.play().then(function(){t.draw()})},t.prototype.stop=function(){return this.drawRafId&&(window.cancelAnimationFrame(this.drawRafId),this.drawRafId=null),this.audio.pause()},t.prototype.destroy=function(){var t=this;this.stop(),this.objectUrl&&window.URL.revokeObjectURL(this.objectUrl),Object.keys(this.options.audioEvents).forEach(function(e){t.audio.removeEventListener(e,t.options.audioEvents[e])}),this.resizeObserver.unobserve(this.options.el),this.analyser=null},t.prototype.changeMusic=function(t){this.objectUrl&&window.URL.revokeObjectURL(this.objectUrl),this.objectUrl=window.URL.createObjectURL(t),this.stop(),this.audio.src=this.objectUrl,this.start()},t.prototype.createCanvas=function(){var t=document.createElement("canvas");return t.style.cssText="position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; pointer-events: none;",t},t.prototype.createAudio=function(){var t=new Audio;return t.src=this.options.src,t.preload="auto",t.volume=.8,t.loop=!0,t.crossOrigin="anonymous",t},t.prototype.createAnalyser=function(){if(!this.analyser){var t=new(AudioContext||webkitAudioContext),e=t.createMediaElementSource(this.audio),i=t.createAnalyser();e.connect(i),i.connect(t.destination),i.fftSize=256,this.analyser=i}},t.prototype.drawCurveLine=function(t){for(var e=t.startX,i=t.startY,a=t.stopX,s=t.stopY,o=t.scaleY,n=t.arr,r=this.canvas.height,h=this.canvasCtx,c=this.options.minHeight,d=n.length,u=a/(d-1),l=e,p=i,v=0;v<d-1;v++){var f=l+u,y=(r/3*(n[v]/256)+c)*o,w=(l+f)/2,b=(p+y)/2;h.quadraticCurveTo(l,p,w,b),l=f,p=y}h.quadraticCurveTo(l,p,a,s*o)},t.prototype.drawGraph=function(t){var e=this.canvasCtx,i=this.options,a=i.minHeight,s=i.gap,o=this.canvas.width/2-s;e.beginPath(),e.moveTo(0,0),e.lineTo(0,a),this.drawCurveLine({startX:0,startY:a,stopX:o,stopY:a,scaleY:1,arr:t}),e.lineTo(o,0),e.fill()},t.prototype.drawLine=function(t){var e=this.canvasCtx,i=this.options,a=i.gap,s=i.minHeight,o=this.canvas.width/2-a;e.beginPath(),e.moveTo(0,0),this.drawCurveLine({startX:0,startY:s,stopX:o,stopY:s,scaleY:1.1,arr:t}),e.stroke()},t.prototype.draw=function(){if(this.analyser){var t=this.canvas,e=t.width,i=t.height,a=this.options.gap,s=this.analyser,o=this.canvasCtx,n=e/2-a,r=s.frequencyBinCount-5,h=new Uint8Array(r).slice(0,-20);s.getByteFrequencyData(h),o.clearRect(0,0,e,i);var c=o.createLinearGradient(0,0,n,0);c.addColorStop(0,"#ff30a2"),c.addColorStop(1,"#d8db31");var d=o.createLinearGradient(0,0,n,0);d.addColorStop(0,"#00cf2e"),d.addColorStop(1,"#3bddd2"),o.save(),o.transform(1,0,0,-1,0,i),o.fillStyle=c,o.strokeStyle=c,this.drawGraph(h),this.drawLine(h),o.restore(),o.save(),o.transform(-1,0,0,-1,e,i),o.fillStyle=d,o.strokeStyle=d,this.drawGraph(h),this.drawLine(h),o.restore(),this.drawRafId=requestAnimationFrame(this.draw.bind(this))}},t}();t.default=i,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=index.js.map