UNPKG

@clxrity/react-audio

Version:

An audio package for React

44 lines (43 loc) 24.1 kB
import{jsx as je}from"react/jsx-runtime";var N=({...e})=>je("source",{...e,type:"audio/*"});import{jsx as $e}from"react/jsx-runtime";var z=({children:e,...a})=>$e("button",{...a,className:`focus:outline-none focus:shadow-outline disabled:opacity-50 disabled:cursor-not-allowed rounded-md px-4 py-2 transition-all duration-200 active:scale-95 disabled:active:scale-100 disabled:transition-none cursor-pointer `,children:e});import{useEffect as Ca,useRef as ha}from"react";function Le({analyser:e,canvas:a,canvasContext:t,dataArray:o,bufferLength:f,color:d}){if(!t)return;t.clearRect(0,0,a.width,a.height),e.getByteFrequencyData(o),t.fillStyle=d;let r=a.height,i=a.width,h=Math.ceil(i/f)*2.5,p=0;for(let n=0;n<f;n++){let m=o[n]/255*r;t.fillRect(p,r-m,h,m),p+=h+1}}import{forwardRef as aa,createElement as ta}from"react";var Fe=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase(),Ye=e=>e.replace(/^([A-Z])|[\s-_]+(\w)/g,(a,t,o)=>o?o.toUpperCase():t.toLowerCase()),Ie=e=>{let a=Ye(e);return a.charAt(0).toUpperCase()+a.slice(1)},le=(...e)=>e.filter((a,t,o)=>!!a&&a.trim()!==""&&o.indexOf(a)===t).join(" ").trim(),ve=e=>{for(let a in e)if(a.startsWith("aria-")||a==="role"||a==="title")return!0};import{forwardRef as ea,createElement as De}from"react";var Me={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:2,strokeLinecap:"round",strokeLinejoin:"round"};var Re=ea(({color:e="currentColor",size:a=24,strokeWidth:t=2,absoluteStrokeWidth:o,className:f="",children:d,iconNode:r,...i},h)=>De("svg",{ref:h,...Me,width:a,height:a,stroke:e,strokeWidth:o?Number(t)*24/Number(a):t,className:le("lucide",f),...!d&&!ve(i)&&{"aria-hidden":"true"},...i},[...r.map(([p,n])=>De(p,n)),...Array.isArray(d)?d:[d]]));var c=(e,a)=>{let t=aa(({className:o,...f},d)=>ta(Re,{ref:d,iconNode:a,className:le(`lucide-${Fe(Ie(e))}`,`lucide-${e}`,o),...f}));return t.displayName=Ie(e),t};var oa=[["circle",{cx:"12",cy:"12",r:"10",key:"1mglay"}],["rect",{x:"9",y:"9",width:"6",height:"6",rx:"1",key:"1ssd4o"}]],q=c("circle-stop",oa);var ua=[["polygon",{points:"13 19 22 12 13 5 13 19",key:"587y9g"}],["polygon",{points:"2 19 11 12 2 5 2 19",key:"3pweh0"}]],X=c("fast-forward",ua);var la=[["path",{d:"M5 22h14",key:"ehvnwv"}],["path",{d:"M5 2h14",key:"pdyrp9"}],["path",{d:"M17 22v-4.172a2 2 0 0 0-.586-1.414L12 12l-4.414 4.414A2 2 0 0 0 7 17.828V22",key:"1d314k"}],["path",{d:"M7 2v4.172a2 2 0 0 0 .586 1.414L12 12l4.414-4.414A2 2 0 0 0 17 6.172V2",key:"1vvvr6"}]],K=c("hourglass",la);var ra=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]],U=c("loader-circle",ra);var da=[["rect",{x:"14",y:"4",width:"4",height:"16",rx:"1",key:"zuxfzm"}],["rect",{x:"6",y:"4",width:"4",height:"16",rx:"1",key:"1okwgv"}]],Z=c("pause",da);var sa=[["polygon",{points:"6 3 20 12 6 21 6 3",key:"1oa8hb"}]],J=c("play",sa);var fa=[["polygon",{points:"11 19 2 12 11 5 11 19",key:"14yba5"}],["polygon",{points:"22 19 13 12 22 5 22 19",key:"1pi1cj"}]],_=c("rewind",fa);var ia=[["polygon",{points:"19 20 9 12 19 4 19 20",key:"o2sva"}],["line",{x1:"5",x2:"5",y1:"19",y2:"5",key:"1ocqjk"}]],Q=c("skip-back",ia);var na=[["polygon",{points:"5 4 15 12 5 20 5 4",key:"16p6eg"}],["line",{x1:"19",x2:"19",y1:"5",y2:"19",key:"futhcm"}]],j=c("skip-forward",na);var ca=[["rect",{x:"3",y:"3",width:"18",height:"18",rx:"2",key:"h1oib"}],["rect",{x:"8",y:"8",width:"8",height:"8",rx:"1",key:"z9xiuo"}]],$=c("square-square",ca);var pa=[["rect",{width:"18",height:"18",x:"3",y:"3",rx:"2",key:"afitv7"}]],Y=c("square",pa);var ma=[["path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",key:"uqj9uw"}],["path",{d:"M16 9a5 5 0 0 1 0 6",key:"1q6k2b"}],["path",{d:"M19.364 18.364a9 9 0 0 0 0-12.728",key:"ijwkga"}]],ee=c("volume-2",ma);var La=[["path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",key:"uqj9uw"}],["path",{d:"M16 9a5 5 0 0 1 0 6",key:"1q6k2b"}]],ae=c("volume-1",La);var Ia=[["path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",key:"uqj9uw"}],["line",{x1:"22",x2:"16",y1:"9",y2:"15",key:"1ewh16"}],["line",{x1:"16",x2:"22",y1:"9",y2:"15",key:"5ykzw1"}]],te=c("volume-x",Ia);var xa=[["path",{d:"M11 4.702a.705.705 0 0 0-1.203-.498L6.413 7.587A1.4 1.4 0 0 1 5.416 8H3a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2.416a1.4 1.4 0 0 1 .997.413l3.383 3.384A.705.705 0 0 0 11 19.298z",key:"uqj9uw"}]],oe=c("volume",xa);var F={Play:J,Pause:Z,Stop:q,FastForward:X,Rewind:_,SkipNext:j,SkipPrevious:Q,Loading:K,VolumeOff:oe,VolumeMute:te,VolumeDown:ae,VolumeUp:ee,Selected:Y,Unselected:$,Loader:U},y={primary:"rgb(236, 106, 177)",secondary:"rgb(121, 91, 132)",white:"#dddddd",black:"#1111"};function xe(e){e instanceof HTMLCanvasElement&&(e.width=e.clientWidth*window.devicePixelRatio,e.height=e.clientHeight*window.devicePixelRatio)}function Ce(e,a,t,o,f){let d=o.current;if(!d||!e)return;let r=d.getContext("2d"),i=()=>{requestAnimationFrame(i),d.width=d.width??d.clientWidth,r&&Le({analyser:e,canvas:d,canvasContext:r,dataArray:t,bufferLength:a,color:f})};i()}import{jsx as ga}from"react/jsx-runtime";function he({analyser:e,bufferLength:a,dataArray:t,size:o,color:f,...d}){let r=ha(null);function i(){xe(r.current)}return Ca(()=>(Ce(e,a,t,r,f||"white"),o||window.addEventListener("resize",i),()=>{window.removeEventListener("resize",i)}),[e,a,t,o,f]),ga("canvas",{ref:r,width:o||400,height:o||400,style:{color:f,zIndex:0,...d.style},...d})}import{jsx as lo}from"react/jsx-runtime";import{Fragment as wa,jsx as re,jsxs as Sa}from"react/jsx-runtime";var ge=({value:e,max:a,buffered:t,color:o,...f})=>{let d=a>0?e/a*100:0,r=a>0?t/a*100:0;return re(wa,{children:Sa("div",{className:"relative w-40 h-2 bg-gray-300 rounded overflow-hidden",children:[re("div",{className:"absolute top-0 left-0 h-full bg-gray-400 transition-all duration-200 rounded w-full",style:{width:`${r}%`,transition:"width 0.2s ease-in-out"}}),re("div",{className:"absolute top-0 left-0 h-full rounded transition-all duration-200",style:{width:`${d}%`,transition:"width 0.2s ease-in-out",backgroundColor:o||"#3b82f6"}}),re("input",{type:"range",value:e,max:a,min:0,className:` h-1 w-20 appearance-none rounded-full bg-inherit/50 range-slider:h-2 range-slider:rounded-full ${f.className} `,style:{backgroundColor:`linear-gradient(to right, ${o} ${e*100}%, ${o} 0%)`,border:`1px solid ${o}`},onChange:i=>f.onChange?.(i),...f})]})})};import{jsx as Pa}from"react/jsx-runtime";function Se({value:e,onVolumeInput:a,color:t,...o}){return Pa("input",{type:"range",min:0,max:1,step:.01,value:e,onChange:f=>a(parseFloat(f.target.value)),className:` h-1 w-20 appearance-none rounded-full bg-inherit/50 range-slider:h-2 range-slider:rounded-full ${o.className} `,style:{backgroundColor:`linear-gradient(to right, ${t} ${e*100}%, ${t} 0%)`,border:`1px solid ${t}`},...o})}import{useEffect as we,useRef as ka,useState as G,useCallback as O,forwardRef as ya}from"react";import{jsx as g,jsxs as de}from"react/jsx-runtime";var E=ya(function({src:a,autoplay:t=!1,loop:o=!1,showProgress:f=!0,showVolume:d=!0,onNext:r,onPrev:i,showNextPrevControls:h=!0,size:p=24,color:n=y.primary,...m},x){let C=ka(null),l=x&&typeof x=="object"&&x!==null?x:C,[w,P]=G(!1),[D,v]=G(!1),[I,s]=G(.25),[L,W]=G(0),[ce,H]=G(0),[M,b]=G(0);we(()=>{let u=l.current;u&&(u.src=a,u.load(),u.volume=I,u.loop=o,u.autoplay=t,t&&u.play().catch(()=>v(!1)))},[a]);let k=O(u=>{u.preventDefault(),u.stopPropagation(),l.current&&l.current.play().then(()=>v(!0)).catch(()=>v(!1))},[l]),A=O(()=>{l.current&&(l.current.pause(),v(!1))},[l]),R=O(u=>{l.current&&s(u.currentTarget.volume)},[l]),T=O(()=>{l.current&&(l.current.volume!==0?(l.current.volume=0,s(0)):(l.current.volume=.25,s(.25)))},[l]),B=O(u=>{let S=u.currentTarget;if(S.duration>0){for(let ue=0;ue<S.buffered.length;ue++)if(S.buffered.start(S.buffered.length-1-ue)<S.currentTime){W(S.buffered.end(S.buffered.length-1-ue));break}}},[]),pe=O(u=>{b(u.currentTarget.currentTime),B(u)},[B]),Be=O(u=>{H(u.currentTarget.duration)},[]),_e=O(u=>{H(u.currentTarget.duration),P(!0)},[]),Qe=u=>{let S=parseFloat(u.currentTarget.value);b(S),l.current&&(l.current.currentTime=S)};return we(()=>{t&&w&&l.current&&v(!0)},[t,w,l]),we(()=>{let u=l.current;if(!u)return;let S=()=>b(u.currentTime),me=()=>{u.buffered.length>0&&W(u.buffered.end(u.buffered.length-1))};return u.addEventListener("timeupdate",S),u.addEventListener("progress",me),u.addEventListener("loadedmetadata",()=>H(u.duration)),()=>{u.removeEventListener("timeupdate",S),u.removeEventListener("progress",me),u.removeEventListener("loadedmetadata",()=>H(u.duration))}},[a,l]),de("div",{className:"flex flex-col items-center gap-5 relative",children:[g("div",{className:"flex items-center gap-2",children:g("audio",{...m,ref:l,onCanPlay:_e,onTimeUpdate:pe,onDurationChange:Be,onVolumeChange:R,onPause:A,autoPlay:t,loop:o,preload:"auto",src:a,children:g(N,{src:a,type:a?.split(".").pop()})})}),de("div",{className:"flex flex-col items-center gap-4 z-30",children:[!D&&!t?g(z,{onClick:k,role:"button",name:"play",title:"play",children:g(F.Play,{})}):g(z,{onClick:A,role:"button",name:"pause",title:"pause",children:g(F.Pause,{})}),d&&de("div",{className:"flex items-center gap-2",children:[g(z,{onClick:T,role:"button",name:"volume",title:"volume",children:I===0?g(F.VolumeOff,{}):I<.5?g(F.VolumeDown,{}):g(F.VolumeUp,{})}),g(Se,{size:p,color:n,value:I,onVolumeInput:u=>{l.current&&(l.current.volume=u,s(u))}})]})]}),de("div",{className:"flex items-center gap-2 justify-between relative",children:[h&&i&&g(z,{onClick:i,role:"button",name:"prev",title:"previous",children:g(F.SkipPrevious,{})}),f&&g(ge,{color:n,value:M,max:ce,buffered:L,onChange:Qe}),h&&r&&g(z,{onClick:r,role:"button",name:"next",title:"next",children:g(F.SkipNext,{})})]})]})});import{useState as Te}from"react";import{jsx as ba}from"react/jsx-runtime";function qe({srcs:e,autoplay:a=!1,color:t=y.primary,showNextPrevControls:o=!0,showProgress:f=!0,showVolume:d=!0,shuffle:r=!1,onNext:i,onPrev:h,...p}){let[n,m]=Te(0),[x,C]=Te(e[n]);return r&&m(Math.floor(Math.random()*e.length)),ba(E,{color:t,autoplay:a,src:x,onNext:()=>{m(l=>l+1),C(e[n]),i&&i()},onPrev:()=>{m(l=>l-1),C(e[n]),h&&h()},showNextPrevControls:o,showProgress:f,showVolume:d,...p})}import{useEffect as ke,useRef as Ue,useState as Oe}from"react";import{useEffect as Aa,useState as Ba}from"react";function Pe(e,a,t,o){let[f,d]=Ba(null);return Aa(()=>{if(!e||!a||a.state==="closed"){d(null);return}t.current||(t.current=a.createMediaElementSource(e));let r=a.createAnalyser();return r.fftSize=o,t.current.connect(r),r.connect(a.destination),d(r),()=>{r.disconnect();try{t.current?.disconnect()}catch(i){console.warn("Error disconnecting source node:",i)}d(null)}},[e,a,o,t]),f?{analyser:f,getFrequencyData:()=>{let r=f.frequencyBinCount,i=new Uint8Array(r);return f.getByteFrequencyData(i),i}}:null}import{jsx as ye,jsxs as Fa}from"react/jsx-runtime";function He({src:e,size:a=420,color:t=y.primary,autoplay:o=!1,loop:f=!1,showProgress:d=!0,showVolume:r=!0,fftSize:i=2048,onLoad:h,...p}){let n=Ue(null),[m,x]=Oe(!1),[C,l]=Oe(null),w=Ue(null);ke(()=>{n.current&&x(!0)},[n.current]),ke(()=>{if(m&&(!C||C.state==="closed")){let D=new AudioContext;l(D)}},[m,C]);let P=Pe(m?n.current:null,C,w,i);return ke(()=>()=>{C&&C.state!=="closed"&&C.close(),w.current?.disconnect()},[C]),ye("div",{...p,style:{display:"flex",justifyContent:"center",alignItems:"center",width:"100%",maxWidth:"400px",position:"relative",borderRadius:"8px",backgroundColor:"transparent",gap:"8px",minHeight:"200px",...p.style},children:Fa("div",{style:{position:"relative",width:"100%",height:"100px"},children:[P?.analyser&&ye(he,{analyser:P.analyser,bufferLength:P.analyser.frequencyBinCount,dataArray:new Uint8Array(P.analyser.frequencyBinCount),size:a,color:t,width:a,height:a,style:{position:"absolute",inset:0,width:"100%",height:"100%",opacity:.8,pointerEvents:"none",zIndex:0}}),ye(E,{src:e,autoplay:o,loop:f,showProgress:d,showVolume:r,color:t,onLoad:h,showNextPrevControls:!1,size:a,ref:n})]})})}import{useEffect as ze,useRef as be,useState as se}from"react";import{jsx as fe,jsxs as V}from"react/jsx-runtime";function Ge({type:e="sine",frequency:a=440,gain:t=.5,isPlaying:o=!1,onFrequencyChange:f,onGainChange:d,...r}){let[i,h]=se(null),p=be(null),n=be(null),m=be(null),[x,C]=se(a),[l,w]=se(t),[P,D]=se(!1),v=()=>{if(!p.current||!P){let I=i??new AudioContext;i||h(I),p.current=i,D(!0)}else p.current.close(),p.current=null,D(!1)};return ze(()=>{if(v(),o&&p.current){if(!n.current){let I=p.current,s=I.createOscillator(),L=I.createGain();s.type=e,s.frequency.setValueAtTime(x,I.currentTime),L.gain.setValueAtTime(l,I.currentTime),s.connect(L),L.connect(I.destination),s.start(),n.current=s,m.current=L}}else n.current?.stop(),n.current?.disconnect(),m.current?.disconnect(),n.current=null,m.current=null;return()=>{n.current?.stop(),n.current?.disconnect(),m.current?.disconnect(),n.current=null,m.current=null}},[o,e,x,l]),ze(()=>{let I=()=>{p.current&&p.current.state==="suspended"&&p.current.resume()};return window.addEventListener("load",I),()=>{window.removeEventListener("load",I)}},[]),fe("div",{...r,className:`flex flex-col gap-2 items-center ${r.className}`,children:V("div",{className:"flex flex-col gap-2",children:[V("label",{className:"flex items-center gap-2",children:[V("span",{children:["Frequency: ",V("span",{className:"font-mono",children:[x," Hz"]})]}),fe("input",{className:"disabled:opacity-50 disabled:cursor-not-allowed",type:"range",min:20,max:2e3,value:x,onChange:I=>{let s=parseFloat(I.target.value);C(s),f?.(s),n.current&&n.current.frequency.setValueAtTime(s,p.current?.currentTime??0)}})]}),V("label",{className:"flex items-center gap-2",children:[V("span",{children:["Gain: ",fe("span",{className:"font-mono",children:l})]}),fe("input",{type:"range",className:"disabled:opacity-50 disabled:cursor-not-allowed",min:0,max:1,step:.01,value:l,onChange:I=>{let s=parseFloat(I.target.value);w(s),d?.(s),m.current&&m.current.gain.setValueAtTime(s,p.current?.currentTime??0)}})]})]})})}import{useCallback as va,useEffect as Ma,useRef as ie,useState as Ee}from"react";import{jsx as ne,jsxs as Da}from"react/jsx-runtime";function Ae({audioRef:e,fftSize:a=1024,width:t="100%",height:o="25%",minDecibels:f=-100,maxDecibels:d=-25,colorMap:r=["#111","#ff0000","#ffff00","#ffffff"],onFrameUpdate:i,fillStyle:h,loop:p=!1,smoothingTimeConstant:n=.8,...m}){let x=ie(null),C=ie(null),l=ie(null),[w,P]=Ee(!1),[D,v]=Ee(!1),I=va(()=>{if(w){e.current.pause(),P(!1);return}if(e.current){if(!C.current){let s=new AudioContext,L=s.createAnalyser();C.current=s,l.current=L,L.fftSize=a,L.minDecibels=f,L.maxDecibels=d,L.smoothingTimeConstant=n,s.createMediaElementSource(e.current).connect(L),L.connect(s.destination)}if(C.current.state==="suspended"&&C.current.resume(),e.current.paused){let s=e.current.play();s!==void 0&&s.then(()=>{P(!0)}).catch(L=>{console.error("Error playing audio:",L)})}p&&(e.current.loop=!0)}},[]);return Ma(()=>{if(!x.current||!e.current)return;let s=x.current,L=s.getContext("2d");if(!L)return;s.width=800,s.height=400;let W=(M,b,k)=>`#${M.slice(1).match(/.{2}/g).map((R,T)=>{let B=parseInt(R,16),pe=parseInt(b.slice(1).match(/.{2}/g)[T],16);return Math.round(B+k*(pe-B)).toString(16).padStart(2,"0")}).join("")}`,ce=M=>{let k=M/255*(r.length-1),A=Math.floor(k),R=k-A,T=r[A],B=r[A+1]||T;return W(T,B,R)},H=()=>{if(!s||!L||!l.current)return;let M=l.current.frequencyBinCount,b=new Uint8Array(M);l.current.getByteFrequencyData(b),L.fillStyle=h||"rgba(0, 0, 0, 0.5)",L.fillRect(0,0,s.width,s.height);for(let k=0;k<M;k++){let A=b[k],R=A/255*s.height,T=s.height-R,B=s.width/M;L.fillStyle=ce(A),L.fillRect(k*B,T,B,R)}requestAnimationFrame(H),i?.(b)};w&&H()},[r,h,w,i]),ne("canvas",{...m,onClick:()=>{I(),v(!0)},ref:x,style:{width:t,height:o},className:`border border-zinc-800/65 dark:border-zinc-500/65 rounded-md cursor-pointer backdrop:invert-50 ${!D&&"bg-zinc-700/50 animate-pulse hover:border-2 transition-all hover:bg-zinc-700/75 hover:animate-none"} cursor-pointer`})}function Ve({src:e,fftSize:a,width:t,height:o,minDecibels:f,maxDecibels:d,colorMap:r,smoothingTimeConstant:i,onFrameUpdate:h,loop:p,fillStyle:n,...m}){let x=ie(null);return Da("div",{...m,children:[ne("audio",{ref:x,children:ne(N,{src:e})}),ne(Ae,{audioRef:x,fftSize:a,width:t,height:o,minDecibels:f,maxDecibels:d,colorMap:r,smoothingTimeConstant:i,onFrameUpdate:h,fillStyle:n,loop:p})]})}var We={title:"Player",description:"A simple audio player component.",url:"",props:{src:{value:"string",description:"The source URL of the audio file.",required:!0,default:void 0},size:{value:"number",description:"The size of the player.",required:!1,default:void 0},color:{value:"string",description:"The color of the player.",required:!1,default:y.primary},autoplay:{value:"boolean",description:"Whether the audio should start playing automatically.",required:!1,default:!1},loop:{value:"boolean",description:"Whether the audio should loop.",required:!1,default:!1},showProgress:{value:"boolean",description:"Whether to show the progress bar.",required:!1,default:!0},showVolume:{value:"boolean",description:"Whether to show the volume control.",required:!1,default:!0},showNextPrevControls:{value:"boolean",description:"Whether to show the next and previous controls (used within ShufflePlayer).",required:!1,default:!1},audioRef:{value:"RefObject<HTMLAudioElement | null>",description:"A ref to the audio element.",required:!1,default:void 0},onNext:{value:"() => void",description:"Callback function for the next button. (used within ShufflePlayer)",required:!1,default:void 0},onPrev:{value:"() => void",description:"Callback function for the previous button. (used within ShufflePlayer)",required:!1,default:void 0}}};var Ne={title:"ShufflePlayer",description:"A simple audio player component with shuffle functionality.",url:"",props:{srcs:{value:"string[]",description:"An array of source URLs for the audio files.",required:!0,default:void 0},autoplay:{value:"boolean",description:"Whether the audio should start playing automatically.",required:!1,default:!1},color:{value:"string",description:"The color of the player.",required:!1,default:y.primary},showNextPrevControls:{value:"boolean",description:"Whether to show the next and previous controls.",required:!1,default:!0},showProgress:{value:"boolean",description:"Whether to show the progress bar.",required:!1,default:!0},showVolume:{value:"boolean",description:"Whether to show the volume control.",required:!1,default:!0},shuffle:{value:"boolean",description:"Whether to shuffle the audio files. If true, a random file will be played each time.",required:!1,default:!1}}};var Xe={title:"Waveform",description:"A waveform component that visualizes audio data in a canvas element.",url:"",props:{src:{value:"string",description:"The source URL of the audio file to visualize. (internal unless CORS settings are configured)",required:!0,default:void 0},size:{value:"number",description:"The size of the canvas element in pixels.",required:!1,default:420},color:{value:"string",description:"The color of the waveform.",required:!1,default:"primary"},autoplay:{value:"boolean",description:"Whether to autoplay the audio when the component is mounted.",required:!1,default:!1},loop:{value:"boolean",description:"Whether to loop the audio playback.",required:!1,default:!1},showProgress:{value:"boolean",description:"Whether to show the progress of the audio playback.",required:!1,default:!1},showVolume:{value:"boolean",description:"Whether to show the volume control.",required:!1,default:!1},fftSize:{value:"number",description:"The size of the FFT (Fast Fourier Transform) used for audio analysis.",required:!1,default:2048},onLoad:{value:"() => void",description:"Callback function to be called when the audio is loaded.",required:!1,default:void 0},audioRef:{value:"RefObject<HTMLAudioElement | null> | null",description:"A reference to the HTML audio element. If not provided, a new ref will be created.",required:!1,default:null}}};var Ke={title:"Oscillator",description:"An oscillator component that generates sound waves based on gain and frequency.",url:"",props:{type:{value:"OscillatorType",description:"The type of oscillator wave (e.g., sine, square, sawtooth, triangle).",required:!1,default:"sine"},frequency:{value:"number",description:"The frequency of the oscillator in Hz.",required:!1,default:440},gain:{value:"number",description:"The default gain (volume) of the oscillator.",required:!1,default:.5},isPlaying:{value:"boolean",description:"Whether the oscillator is currently playing sound.",required:!1,default:!1},onFrequencyChange:{value:"(frequency: number) => void",description:"Callback function to handle frequency changes.",required:!1,default:void 0},onGainChange:{value:"(gain: number) => void",description:"Callback function to handle gain changes.",required:!1,default:void 0}}};var Ze={title:"Spectrogram",description:"A component that visualizes audio data as a spectrogram.",url:"",props:{src:{value:"string",description:"The source URL of the audio file to visualize.",required:!0,default:void 0},fftSize:{value:"number",description:"The size of the FFT (Fast Fourier Transform) used for audio analysis.",required:!1,default:1024},width:{value:"number | string",description:"The width of the spectrogram display.",required:!1,default:"100%"},height:{value:"number | string",description:"The height of the spectrogram display.",required:!1,default:"25%"},minDecibels:{value:"number",description:"The minimum decibel level for the spectrogram display.",required:!1,default:-100},maxDecibels:{value:"number",description:"The maximum decibel level for the spectrogram display.",required:!1,default:-25},colorMap:{value:"string[]",description:"An array of colors to use for the spectrogram visualization.",required:!1,default:["#111","#ff0000","#ffff00","#ffffff"]},smoothingTimeConstant:{value:"number",description:"The smoothing time constant for the analyser node.",required:!1,default:.8},onFrameUpdate:{value:"(data: Uint8Array) => void",description:"Callback function to handle frame updates with audio data.",required:!1,default:void 0},loop:{value:"boolean",description:"Whether to loop the audio playback.",required:!1,default:!1},fillStyle:{value:"string",description:"The fill style for the spectrogram canvas.",required:!1,default:void 0}}};var Je={Player:We,ShufflePlayer:Ne,Waveform:Xe,Oscillator:Ke,Spectrogram:Ze};export{Ge as Oscillator,E as Player,qe as ShufflePlayer,Ae as SpectroGramDisplay,Ve as Spectrogram,He as Waveform,Je as components,Pe as useAudioAnalyser}; /*! Bundled license information: lucide-react/dist/esm/shared/src/utils.js: lucide-react/dist/esm/defaultAttributes.js: lucide-react/dist/esm/Icon.js: lucide-react/dist/esm/createLucideIcon.js: lucide-react/dist/esm/icons/circle-stop.js: lucide-react/dist/esm/icons/fast-forward.js: lucide-react/dist/esm/icons/hourglass.js: lucide-react/dist/esm/icons/loader-circle.js: lucide-react/dist/esm/icons/pause.js: lucide-react/dist/esm/icons/play.js: lucide-react/dist/esm/icons/rewind.js: lucide-react/dist/esm/icons/skip-back.js: lucide-react/dist/esm/icons/skip-forward.js: lucide-react/dist/esm/icons/square-square.js: lucide-react/dist/esm/icons/square.js: lucide-react/dist/esm/icons/volume-2.js: lucide-react/dist/esm/icons/volume-1.js: lucide-react/dist/esm/icons/volume-x.js: lucide-react/dist/esm/icons/volume.js: lucide-react/dist/esm/lucide-react.js: (** * @license lucide-react v0.513.0 - ISC * * This source code is licensed under the ISC license. * See the LICENSE file in the root directory of this source tree. *) */ //# sourceMappingURL=index.js.map