audio-visualiser/index.js

Web component audio visualiser

var E=Object.defineProperty;var x=e=>{throw TypeError(e)};var M=(e,n,t)=>n in e?E(e,n,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[n]=t;var R=(e,n,t)=>M(e,typeof n!="symbol"?n+"":n,t),C=(e,n,t)=>n.has(e)||x("Cannot "+t);var r=(e,n,t)=>(C(e,n,"read from private field"),t?t.call(e):n.get(e)),c=(e,n,t)=>n.has(e)?x("Cannot add the same private member more than once"):n instanceof WeakSet?n.add(e):n.set(e,t),h=(e,n,t,s)=>(C(e,n,"write to private field"),s?s.call(e,t):n.set(e,t),t),m=(e,n,t)=>(C(e,n,"access private method"),t);function N(e,n,t,s){let i=t/n.length,l=~~(e*i),b=s-~~(Math.min(255,Math.max(0,n[e]))*(s/255));return[l,b]}var O=(...e)=>{let n=String.raw(...e),t=document.createElement("template");return t.innerHTML=n,t.content.cloneNode(!0)},q=O`
  <style>
    :host {
      contain: strict;
    }

    canvas {
      width: 100%;
      height: 100%;
    }
  </style>
  <canvas></canvas>
`,d,a,u,y,f,v,o,w,A,T,g=class extends HTMLElement{constructor(){super();c(this,o);R(this,"fillStyle","#fff");c(this,d,null);c(this,a,null);c(this,u,null);c(this,y,null);c(this,f,0);c(this,v,null);h(this,v,new ResizeObserver(t=>requestAnimationFrame(()=>m(this,o,w).call(this,t[0]))))}set analyser(t){if(t instanceof AnalyserNode)h(this,u,t);else{let s=typeof t;throw new TypeError(`Passed in parameter needs to be an AnalyserNode. Was a ${s}.`)}}static get observedAttributes(){return["color"]}attributeChangedCallback(t,s,i){t==="color"&&i&&i!==s&&(this.fillStyle=i,m(this,o,A).call(this))}stop(){cancelAnimationFrame(r(this,f)),h(this,f,void 0)}start(){if(!r(this,u))throw new ReferenceError("Analyser has not been set");let{width:t,height:s}=r(this,d),i=r(this,a),l=new Uint8Array(r(this,u).frequencyBinCount);r(this,u).getByteFrequencyData(l),i.clearRect(0,0,t,s),i.beginPath(),i.moveTo(0,s);let b=[...new Array(l.length)].map((S,p)=>N(p,l,t,s)).concat([[t,s]]).concat([[0,s]]);for(let[S,p]of b)i.lineTo(S,p);i.closePath(),i.fillStyle=this.fillStyle,i.fill(),h(this,f,requestAnimationFrame(this.start.bind(this)))}connectedCallback(){h(this,y,this.attachShadow({mode:"closed"})),m(this,o,T).call(this),m(this,o,w).call(this),m(this,o,A).call(this)}};d=new WeakMap,a=new WeakMap,u=new WeakMap,y=new WeakMap,f=new WeakMap,v=new WeakMap,o=new WeakSet,w=function(t){let s=r(this,d);if(s instanceof HTMLCanvasElement){let i=t?t.contentRect:s.getBoundingClientRect(),l=window.devicePixelRatio||1;s.width=i.width*l,s.height=i.height*l}},A=function(){r(this,a)&&(r(this,a).fillStyle=this.fillStyle)},T=function(){let t=r(this,y);t.appendChild(q.cloneNode(!0)),h(this,d,t.querySelector("canvas")),h(this,a,r(this,d).getContext("2d")),r(this,a).lineCap="round",r(this,a).lineJoin="round",this.fillStyle=this.getAttribute("color"),r(this,v).observe(r(this,d))};customElements.define("audio-visualiser",g);export{g as default};
//# sourceMappingURL=index.js.map