@pankajparashar/react-voice-visualizer/dist/react-voice-visualizer.umd.cjs

React library for audio recording and visualization using Web Audio API

(function(){"use strict";(r=>{var o;try{if(typeof window>"u")return;var i=document.createElement("style");i.appendChild(document.createTextNode(r));const e=(o=document.querySelector('meta[property="csp-nonce"]'))==null?void 0:o.getAttribute("nonce");e&&i.setAttribute("nonce",e),document.head.appendChild(i)}catch(e){console.error("vite-plugin-css-injected-by-js",e)}})(".voice-visualizer__buttons-container{display:flex;justify-content:center;align-items:center;column-gap:20px;row-gap:15px;flex-wrap:wrap;margin-bottom:40px}.voice-visualizer__btn-center{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#fff;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s}.voice-visualizer__btn-center:disabled{opacity:.85;cursor:default}.voice-visualizer__btn-center:hover{background-color:#eaeaea;border:4px solid #9f9f9f}.voice-visualizer__btn-center>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause{background-color:#ff3030}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause:hover{background-color:#ff4f4f}.voice-visualizer__btn-center.voice-visualizer__btn-center-pause>img{height:50%;max-height:16px}.voice-visualizer__btn-center.voice-visualizer__btn-center--border-transparent{border-color:transparent}.voice-visualizer__btn-center.voice-visualizer__btn-center--border-transparent:hover{background-color:#fff}.voice-visualizer__btn-left{box-sizing:border-box;flex-shrink:0;width:60px;height:60px;padding:0;display:flex;justify-content:center;align-items:center;border-radius:50%;background-color:#ff3030;border:4px solid #c5c5c5;outline:none;cursor:pointer;transition:border-color .3s,background-color .3s,opacity .3s}.voice-visualizer__btn-container{min-width:100px;display:flex;justify-content:flex-end}.voice-visualizer__btn-left:hover{background-color:#ff4f4f}.voice-visualizer__btn-left:disabled{opacity:.6;background-color:#ff3030;cursor:default}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone{background-color:#fff}.voice-visualizer__btn-left.voice-visualizer__btn-left-microphone>img{width:auto;height:50%;max-height:30px}.voice-visualizer__btn-left>img{width:auto;height:50%;max-height:16px}.voice-visualizer__btn-left:hover{border:4px solid #9f9f9f}.voice-visualizer__btn{box-sizing:border-box;min-width:100px;min-height:60px;padding:5px 20px;border-radius:40px;font-size:15px;background-color:#f0f0f0;transition:background-color .3s,opacity .3s}.voice-visualizer__btn:disabled{opacity:.8;background-color:#f0f0f0;cursor:default}.voice-visualizer__btn:hover{background-color:#bebebe}.voice-visualizer__canvas-container{position:relative;width:fit-content;margin:0 auto;overflow:hidden}.voice-visualizer__canvas-container canvas{display:block}.voice-visualizer__canvas-microphone-btn{position:absolute;top:50%;left:50%;width:auto;max-width:12%;min-width:24px;height:50%;max-height:100px;background-color:transparent;border:none;outline:none;transform:translate(-50%,-50%)}.voice-visualizer__canvas-microphone-icon{width:100%;height:100%;will-change:transform;transition:transform .3s}.voice-visualizer__canvas-microphone-btn:hover .voice-visualizer__canvas-microphone-icon{transform:scale(1.03)}.voice-visualizer__canvas-audio-wave-icon{position:absolute;top:50%;left:50%;width:auto;max-width:40%;height:40%;max-height:100px;transform:translate(-118%,-50%) scale(-1)}.voice-visualizer__canvas-audio-wave-icon2{transform:translate(18%,-50%)}.voice-visualizer__canvas-audio-processing{position:absolute;top:50%;left:50%;margin:0;transform:translate(-50%,-50%)}.voice-visualizer__progress-indicator-hovered{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#85858599}.voice-visualizer__progress-indicator-hovered-time{position:absolute;top:3%;left:1px;width:fit-content;margin:0;padding:0 7px;opacity:.8;font-size:12px;border-radius:0 4px 4px 0;background-color:#575757;text-align:left}.voice-visualizer__progress-indicator-hovered-time.voice-visualizer__progress-indicator-hovered-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__progress-indicator{position:absolute;top:0;pointer-events:none;height:100%;width:1px;background-color:#efefef}.voice-visualizer__progress-indicator-time{position:absolute;top:3%;left:1px;width:fit-content;box-sizing:border-box;min-width:37px;margin:0;padding:0 7px;font-size:12px;border-radius:0 4px 4px 0;text-align:left;color:#000;font-weight:500;background-color:#efefef}.voice-visualizer__progress-indicator-time.voice-visualizer__progress-indicator-time-left{left:unset;right:1px;border-radius:4px 0 0 4px}.voice-visualizer__audio-info-container{box-sizing:border-box;height:55px;display:flex;align-items:center;justify-content:center;gap:30px}.voice-visualizer__audio-info-time{margin:15px 0;min-width:38px;text-align:left}.voice-visualizer__visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:4px solid #c5c5c5;white-space:nowrap;clip-path:inset(100%);clip:rect(0 0 0 0);overflow:hidden}.voice-visualizer__relative{position:relative}.voice-visualizer__spinner-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;display:flex;justify-content:center;align-items:center}.voice-visualizer__spinner{flex-shrink:0;width:100%;height:100%;border:4px solid rgba(197,197,197,.5);border-radius:50%;border-top-color:#b7b7b7;animation:voice-visualizer__spin 1s ease-in-out infinite;-webkit-animation:voice-visualizer__spin 1s ease-in-out infinite}@keyframes voice-visualizer__spin{to{transform:rotate(360deg)}}@-webkit-keyframes voice-visualizer__spin{to{transform:rotate(360deg)}}")})();
(function(O,i){typeof exports=="object"&&typeof module<"u"?i(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],i):(O=typeof globalThis<"u"?globalThis:O||self,i(O["react-voice-visualizer"]={},O["react/jsx-runtime"],O.React))})(this,function(O,i,t){"use strict";const Ae=({canvas:e,backgroundColor:r})=>{const n=e.height,s=e.width,a=Math.round(s/2),h=e.getContext("2d");return h?(h.clearRect(0,0,s,n),r!=="transparent"&&(h.fillStyle=r,h.fillRect(0,0,s,n)),{context:h,height:n,width:s,halfWidth:a}):null},Se=({context:e,color:r,rounded:n,x:s,y:a,w:h,h:S})=>{e.fillStyle=r,e.beginPath(),e.roundRect?(e.roundRect(s,a,h,S,n),e.fill()):e.fillRect(s,a,h,S)},Ye=({barsData:e,canvas:r,barWidth:n,gap:s,backgroundColor:a,mainBarColor:h,secondaryBarColor:S,currentAudioTime:v=0,rounded:z,duration:m})=>{const _=Ae({canvas:r,backgroundColor:a});if(!_)return;const{context:p,height:d}=_,y=v/m;e.forEach((f,M)=>{const g=M/e.length,u=y>g;Se({context:p,color:u?S:h,rounded:z,x:M*(n+s*n),y:d/2-f.max,h:f.max*2,w:n})})};function Ze({context:e,color:r,rounded:n,width:s,height:a,barWidth:h}){Se({context:e,color:r,rounded:n,x:s/2+h/2,y:a/2-1,h:2,w:s-(s/2+h/2)})}const Ge=({audioData:e,unit:r,index:n,index2:s,canvas:a,isRecordingInProgress:h,isPausedRecording:S,picks:v,backgroundColor:z,barWidth:m,mainBarColor:_,secondaryBarColor:p,rounded:d,animateCurrentPick:y,fullscreen:f})=>{const M=Ae({canvas:a,backgroundColor:z});if(!M)return;const{context:g,height:u,width:b,halfWidth:D}=M;if(e!=null&&e.length&&h){const N=Math.max(...e);if(!S){if(s.current>=m){s.current=0;const E=(u-N/258*u)/u*100,A=(-u+N/258*u*2)/u*100,X=n.current===m?{startY:E,barHeight:A}:null;n.current>=r?n.current=m:n.current+=m,v.length>(f?b:D)/m&&v.pop(),v.unshift(X)}s.current+=1}!f&&P(),y&&Se({context:g,rounded:d,color:_,x:f?b:D,y:u-N/258*u,h:-u+N/258*u*2,w:m});let W=(f?b:D)-s.current;v.forEach(E=>{E&&Se({context:g,color:_,rounded:d,x:W,y:E.startY*u/100>u/2-1?u/2-1:E.startY*u/100,h:E.barHeight*u/100>2?E.barHeight*u/100:2,w:m}),W-=m})}else v.length=0;function P(){Ze({context:g,color:p,rounded:d,width:b,height:u,barWidth:m})}},ke=e=>{const r=Math.floor(e/3600),n=Math.floor(e%3600/60),s=e%60,a=Math.floor((s-Math.floor(s))*1e3);return r>0?`${String(r).padStart(2,"0")}:${String(n).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}:${String(a).charAt(0)}`:n>0?`${String(n).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}:${String(a).charAt(0)}`:`${String(Math.floor(s)).padStart(2,"0")}:${String(a).charAt(0)}`},Je=e=>{const r=Math.floor(e/1e3),n=Math.floor(r/3600),s=Math.floor(r%3600/60),a=r%60;return n>0?`${String(n).padStart(2,"0")}:${String(s).padStart(2,"0")}:${String(a).padStart(2,"0")}`:`${String(s).padStart(2,"0")}:${String(a).padStart(2,"0")}`};function Be(e){if(typeof e=="string"){const r=Number(e);if(!Number.isNaN(r))return`${Math.trunc(r/2)*2}px`}return e}const Ke=({bufferData:e,height:r,width:n,barWidth:s,gap:a})=>{const h=n/(s+a*s),S=Math.floor(e.length/h),v=r/2;let z=[],m=0;for(let _=0;_<h;_++){const p=[];let d=0;for(let f=0;f<S&&_*S+f<e.length;f++){const M=e[_*S+f];M>0&&(p.push(M),d++)}const y=p.reduce((f,M)=>f+M,0)/d;y>m&&(m=y),z.push({max:y})}if(v*.95>m*v){const _=v*.95/m;z=z.map(p=>({max:p.max>.01?p.max*_:1}))}return z},Qe=e=>{if(!e)return"";const r=e.match(/audio\/([^;]+)/);return r&&r.length>=2?`.${r[1]}`:""},Re=e=>{const r=Math.floor(e/3600),n=Math.floor(e%3600/60),s=e%60,a=Math.floor((s-Math.floor(s))*1e3);return r>0?`${String(r).padStart(2,"0")}:${String(n).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}}h`:n>0?`${String(n).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}m`:`${String(Math.floor(s)).padStart(2,"0")}:${String(a).charAt(0)}${String(a).charAt(1)}s`},et=(e,r=250)=>{const n=t.useRef();return t.useCallback((...s)=>{const a=()=>{clearTimeout(n.current),e(...s)};clearTimeout(n.current),n.current=setTimeout(a,r)},[e,r])},tt=e=>{onmessage=r=>{postMessage(e(r.data))}};function rt({fn:e,initialValue:r,onMessageReceived:n}){const[s,a]=t.useState(r);return{result:s,setResult:a,run:S=>{const v=new Worker(URL.createObjectURL(new Blob([`(${tt})(${e})`])));v.onmessage=z=>{z.data&&(a(z.data),n&&n(),v.terminate())},v.onerror=z=>{console.error(z.message),v.terminate()},v.postMessage(S)}}}const Oe=({color:e="#FFFFFF",reflect:r})=>i.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0.92 17.54 48.27 14.92",className:`voice-visualizer__canvas-audio-wave-icon ${r?"voice-visualizer__canvas-audio-wave-icon2":""}`,children:i.jsx("path",{d:"M.92 24.63h.21v.75H.92zm.42-1.39h.21v3.52h-.21zm.43.68h.21v2.17h-.21zM2.2 22h.21v6.01H2.2zm.43-1.27h.21v8.55h-.21zm.43 2.07h.21v4.4h-.21zm.43 1.22h.21v1.97h-.21zm.43.47h.21v1.03h-.21zm.43-1.66h.21v4.35h-.21zm.43-1.74h.21v7.82h-.21zm.43 1.94h.21v3.94h-.21zm.43 1.07h.21v1.81h-.21zm.42-.94h.21v3.68h-.21zm.43.91h.21v1.86h-.21zm.43-.23h.21v2.33h-.21zm.43.46h.21v1.4h-.21zm.43-.7h.21v2.8h-.21zm.43-1.6h.21v6.01h-.21zm.43-2.23h.21v10.46h-.21zm.43-1.4h.21v13.26h-.21zm.43.62h.21v12.02H9.5zm.43 1.64h.21v8.75h-.21zm.43 1.37h.21v6.01h-.21zm.43-1.87H11v9.74h-.21zm.42 1.32h.21v7.1h-.21zm.43-2.64h.21v12.38h-.21zm.43 1.61h.21v9.17h-.21zM12.5 22h.21v6.01h-.21zm.43 1.32h.21v3.37h-.21zm.43-2.51h.21v8.39h-.21zm.43.59H14v7.2h-.21zm.43 1.79h.21v3.62h-.21zm.43.41h.21v2.8h-.21zm.43.57h.21v1.66h-.21zm.43-1.11h.21v3.88h-.21zm.42-2.98h.21v9.84h-.21zm.43 1.06h.21v7.72h-.21zm.43 3.19H17v1.35h-.21zm.86-2.33h.21v6.01h-.21zm-.43 1.4h.21v3.21h-.21zm1.29.15h.21v2.9h-.21zm.43.68h.21v1.55h-.21zm-.86-.76h.21v3.05h-.21zm1.29-.05h.21v3.16h-.21zm.43-.64h.21v4.45h-.21zm.43.38h.21v3.68h-.21zm.42-.49h.21v4.66h-.21zm.43 1.32h.21v2.02h-.21zm.43.37h.21v1.29h-.21zm.43.31h.21v.67h-.21zm.43-.39h.21v1.45h-.21zm.43-1.35h.21v4.14h-.21zm.86.73h.21v2.69h-.21zm-.43.44h.21v1.81h-.21zm1.29-3.45h.21v8.7h-.21zm.43 1.71h.21v5.28h-.21zm-.86-2.3h.21v9.89h-.21zm1.29 3.36h.21v3.16h-.21zM25.8 22h.21v6.01h-.21zm.43 1.42h.21v3.16h-.21zm.43.88h.21v1.4h-.21zm.43-.93h.21v3.26h-.21zm.43-1.37h.21v6.01h-.21zm.43-.93h.21v7.87h-.21zm.43-.76h.21v9.38h-.21zm.43 1.69h.21v6.01h-.21zm.86 1.92h.21v2.17h-.21zm-.43-.6h.21v3.37h-.21zm1.28.05h.21v3.26h-.21zm.43.67h.21v1.91h-.21zm-.85-.51h.21v2.95h-.21zm1.28-.13h.21v3.21h-.21zm.43-1.4h.21v6.01h-.21zm.43-.99h.21v7.98h-.21zm.43 1.77h.21v4.45h-.21zm.43-1.22h.21v6.89h-.21zm.43 1.6h.21v3.68h-.21zm.43-.28h.21v4.25h-.21zm.43-.6h.21v5.44h-.21zm.43-.28h.21v6.01h-.21zm.85 2.02h.21v1.97h-.21zm-.43-.57h.21v3.11h-.21zm1.29.93h.21v1.24h-.21zm.43-.65h.21v2.54h-.21zm-.86-.28h.21v3.11h-.21zm1.29.83h.21v1.45h-.21zm.43-.99h.21v3.42h-.21zm.43-.1h.21v3.62h-.21zm.43-.7h.21v5.02h-.21zm.43.8h.21v3.42h-.21zm.43-1.29h.21v6.01h-.21zm.42-1.71h.21v9.43h-.21zm.43 2.38h.21v4.66h-.21zm.43.65h.21v3.37h-.21zm.86.08h.21v3.21h-.21zm-.43.54h.21v2.12h-.21zm1.29-.05h.21v2.23h-.21zm.43.28h.21v1.66h-.21zm-.86.16h.21v1.35h-.21zm1.29.21h.21v.93h-.21zm.43-6.04h.21v13h-.21zm.43.8h.21v11.4h-.21zm.43-1.76h.21v14.92h-.21zm.42 1.09h.21v12.74h-.21zm.43 1.17h.21v10.41h-.21zm.43 1.32h.21v7.77h-.21zm.43 1.6h.21v4.56h-.21zm.43 1.17h.21v2.23h-.21zm.86-.08h.21v2.38h-.21zm-.43-.34h.21v3.05h-.21zm1.29-.1h.21v3.26h-.21zm.43.93h.21v1.4h-.21zm-.86-.02h.21v1.45h-.21z",fill:e})}),Ue="data:image/svg+xml,%3csvg%20width='23'%20height='33'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M1.1%2016.72c0%203%20.96%205.8%203.61%207.95a9.96%209.96%200%200%200%206.5%202.17m0%200v4.34h4.34-8.67m4.34-4.34c2.35%200%204.42-.48%206.5-2.17a9.87%209.87%200%200%200%203.61-7.95M11.22%201.82c-1.45%200-2.5.37-3.3.93a5.6%205.6%200%200%200-1.84%202.4c-.9%202.06-1.1%204.77-1.1%207.24%200%202.46.2%205.17%201.1%207.24a5.6%205.6%200%200%200%201.84%202.4c.8.55%201.85.92%203.3.92%201.44%200%202.5-.37%203.29-.93a5.6%205.6%200%200%200%201.84-2.4c.9-2.06%201.1-4.77%201.1-7.23%200-2.47-.2-5.18-1.1-7.24a5.6%205.6%200%200%200-1.84-2.4%205.52%205.52%200%200%200-3.3-.93Z'%20stroke='%23000'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e",nt=({color:e="#000000",stroke:r=2,className:n})=>i.jsx("svg",{viewBox:"0 0 23 33",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:n,children:i.jsx("path",{d:"M1.1 16.72c0 3 .96 5.8 3.61 7.95a9.96 9.96 0 0 0 6.5 2.17m0 0v4.34h4.34-8.67m4.34-4.34c2.35 0 4.42-.48 6.5-2.17a9.87 9.87 0 0 0 3.61-7.95M11.22 1.82c-1.45 0-2.5.37-3.3.93a5.6 5.6 0 0 0-1.84 2.4c-.9 2.06-1.1 4.77-1.1 7.24 0 2.46.2 5.17 1.1 7.24a5.6 5.6 0 0 0 1.84 2.4c.8.55 1.85.92 3.3.92 1.44 0 2.5-.37 3.29-.93a5.6 5.6 0 0 0 1.84-2.4c.9-2.06 1.1-4.77 1.1-7.23 0-2.47-.2-5.18-1.1-7.24a5.6 5.6 0 0 0-1.84-2.4 5.52 5.52 0 0 0-3.3-.93Z",stroke:e,strokeWidth:r,strokeLinecap:"round",strokeLinejoin:"round"})}),Ve="data:image/svg+xml,%3csvg%20width='21'%20height='29'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M14%203.5a3.5%203.5%200%201%201%207%200v22a3.5%203.5%200%201%201-7%200v-22Z'%20fill='%23fff'/%3e%3crect%20width='7'%20height='29'%20rx='3.5'%20fill='%23fff'/%3e%3c/svg%3e",st="data:image/svg+xml,%3csvg%20width='26'%20height='24'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M18.75%206.16c4.31%202.6%206.46%203.9%206.46%205.84%200%201.95-2.15%203.24-6.46%205.84l-4.84%202.92c-4.31%202.6-6.46%203.89-8.08%202.92-1.62-.98-1.62-3.57-1.62-8.76V9.08c0-5.19%200-7.78%201.62-8.76%201.62-.97%203.77.33%208.08%202.92l4.84%202.92Z'%20fill='%23fff'/%3e%3c/svg%3e",ct="data:image/svg+xml,%3csvg%20width='27'%20height='25'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3crect%20x='.21'%20width='26'%20height='25'%20rx='5'%20fill='%23fff'/%3e%3c/svg%3e",it=({controls:{audioRef:e,audioData:r,isRecordingInProgress:n,recordedBlob:s,duration:a,currentAudioTime:h,audioSrc:S,bufferFromRecordedBlob:v,togglePauseResume:z,startRecording:m,stopRecording:_,saveAudioFile:p,isAvailableRecordedAudio:d,isPausedRecordedAudio:y,isPausedRecording:f,isProcessingStartRecording:M,isProcessingRecordedAudio:g,isCleared:u,formattedDuration:b,formattedRecordingTime:D,formattedRecordedAudioCurrentTime:P,clearCanvas:N,setCurrentAudioTime:W,isProcessingOnResize:E,_setIsProcessingOnResize:A,_setIsProcessingAudioOnComplete:X},width:Y="100%",height:_e=200,speed:Me=3,backgroundColor:C="transparent",mainBarColor:H="#FFFFFF",secondaryBarColor:re="#5e5e5e",barWidth:j=2,gap:Z=1,rounded:U=5,isControlPanelShown:ne=!0,isDownloadAudioButtonShown:ue=!1,animateCurrentPick:ye=!0,fullscreen:he=!1,onlyRecording:se=!1,isDefaultUIShown:le=!0,defaultMicrophoneIconColor:ve=H,defaultAudioWaveIconColor:G=H,mainContainerClassName:$e,canvasContainerClassName:ce,isProgressIndicatorShown:ie=!se,progressIndicatorClassName:w,isProgressIndicatorTimeShown:V=!0,progressIndicatorTimeClassName:J,isProgressIndicatorOnHoverShown:oe=!se,progressIndicatorOnHoverClassName:K,isProgressIndicatorTimeOnHoverShown:T=!0,progressIndicatorTimeOnHoverClassName:I,isAudioProcessingTextShown:l=!0,audioProcessingTextClassName:Ee,controlButtonsClassName:xe,audioProcessingElem:be})=>{const[fe,Ce]=t.useState(0),[$,Te]=t.useState(0),[me,He]=t.useState(0),[Q,de]=t.useState(0),[R,Fe]=t.useState(!1),[Ie,ee]=t.useState(window.innerWidth),[Le,ze]=t.useState(!1),pe=Ie<768,ae=Math.trunc(Me),q=Math.trunc(Z),k=Math.trunc(pe&&q>0?j+1:j),c=k+q*k,o=t.useRef(null),B=t.useRef([]),F=t.useRef(ae),Ne=t.useRef(k),at=t.useRef(k),te=t.useRef(null),{result:ge,setResult:ut,run:ht}=rt({fn:Ke,initialValue:[],onMessageReceived:vt}),lt=et(je);t.useEffect(()=>{if(!te.current)return;const x=()=>{ee(window.innerWidth),d?(A(!0),ze(!0),lt()):je()},L=new ResizeObserver(x);return L.observe(te.current),()=>{L.disconnect()}},[Y,d]),t.useLayoutEffect(()=>{o.current&&((F.current>=ae||!r.length)&&(F.current=r.length?0:ae,Ge({audioData:r,unit:c,index:Ne,index2:at,canvas:o.current,picks:B.current,isRecordingInProgress:n,isPausedRecording:f,backgroundColor:C,mainBarColor:H,secondaryBarColor:re,barWidth:k,rounded:U,animateCurrentPick:ye,fullscreen:he})),F.current+=1)},[o.current,r,k,C,H,re,U,he,le,Q]),t.useEffect(()=>{var x,L;if(d)return R?(x=o.current)==null||x.addEventListener("mouseleave",De):(L=o.current)==null||L.addEventListener("mouseenter",qe),()=>{var we,Xe;R?(we=o.current)==null||we.removeEventListener("mouseleave",De):(Xe=o.current)==null||Xe.removeEventListener("mouseenter",qe)}},[R,d]),t.useEffect(()=>{var L;if(!v||!o.current||n||Le)return;if(se){N();return}B.current=[];const x=v.getChannelData(0);return ht({bufferData:x,height:me,width:Q,barWidth:k,gap:q}),(L=o.current)==null||L.addEventListener("mousemove",Pe),()=>{var we;(we=o.current)==null||we.removeEventListener("mousemove",Pe)}},[v,$,me,Z,j,Le]),t.useEffect(()=>{if(!(se||!(ge!=null&&ge.length)||!o.current||g)){if(u){ut([]);return}Ye({barsData:ge,canvas:o.current,barWidth:k,gap:q,backgroundColor:C,mainBarColor:H,secondaryBarColor:re,currentAudioTime:h,rounded:U,duration:a})}},[ge,h,u,U,C,H,re]),t.useEffect(()=>{g&&o.current&&Ae({canvas:o.current,backgroundColor:C})},[g]);function je(){if(!te.current||!o.current)return;F.current=ae;const x=Math.trunc(te.current.clientHeight*window.devicePixelRatio/2)*2;Te(te.current.clientWidth),He(x),de(Math.round(te.current.clientWidth*window.devicePixelRatio)),ze(!1)}function vt(){A(!1),X(!1),e!=null&&e.current&&!E&&(e.current.src=S)}const qe=()=>{Fe(!0)},De=()=>{Fe(!1)},Pe=x=>{Ce(x.offsetX)},ft=x=>{if(e!=null&&e.current&&o.current){const L=a/$*(x.clientX-o.current.getBoundingClientRect().left);e.current.currentTime=L,W(L)}},We=h/a*$;return i.jsxs("div",{className:`voice-visualizer ${$e??""}`,children:[i.jsxs("div",{className:`voice-visualizer__canvas-container ${ce??""}`,ref:te,style:{width:Be(Y)},children:[i.jsx("canvas",{ref:o,width:Q,height:me,onClick:ft,style:{height:Be(_e),width:$},children:"Your browser does not support HTML5 Canvas."}),le&&u&&i.jsxs(i.Fragment,{children:[i.jsx(Oe,{color:G}),i.jsx(Oe,{color:G,reflect:!0}),i.jsx("button",{type:"button",onClick:m,className:"voice-visualizer__canvas-microphone-btn",children:i.jsx(nt,{color:ve,stroke:.5,className:"voice-visualizer__canvas-microphone-icon"})})]}),l&&g&&i.jsx("p",{className:`voice-visualizer__canvas-audio-processing ${Ee??""}`,style:{color:H},children:be!==void 0?be:"Processing Audio..."}),R&&d&&!g&&!pe&&oe&&i.jsx("div",{className:`voice-visualizer__progress-indicator-hovered ${K??""}`,style:{left:fe},children:T&&i.jsx("p",{className:`voice-visualizer__progress-indicator-hovered-time 
                    ${$-fe<70?"voice-visualizer__progress-indicator-hovered-time-left":""} 
                    ${I??""}`,children:ke(a/$*fe)})}),ie&&d&&!g&&a?i.jsx("div",{className:`voice-visualizer__progress-indicator ${w??""}`,style:{left:We<$-1?We:$-1},children:V&&i.jsx("p",{className:`voice-visualizer__progress-indicator-time ${$-h*$/a<70?"voice-visualizer__progress-indicator-time-left":""} ${J??""}`,children:P})}):null]}),ne&&i.jsxs(i.Fragment,{children:[i.jsxs("div",{className:"voice-visualizer__audio-info-container",children:[n&&i.jsx("p",{className:"voice-visualizer__audio-info-time",children:D}),a&&!g?i.jsx("p",{children:b}):null]}),i.jsxs("div",{className:"voice-visualizer__buttons-container",children:[n&&i.jsx("div",{className:"voice-visualizer__btn-container",children:i.jsx("button",{type:"button",className:`voice-visualizer__btn-left ${f?"voice-visualizer__btn-left-microphone":""}`,onClick:z,children:i.jsx("img",{src:f?Ue:Ve,alt:f?"Play":"Pause"})})}),!u&&i.jsx("button",{type:"button",className:`voice-visualizer__btn-left ${n||M?"voice-visualizer__visually-hidden":""}`,onClick:z,disabled:g,children:i.jsx("img",{src:y?st:Ve,alt:y?"Play":"Pause"})}),u&&i.jsxs("button",{type:"button",className:`voice-visualizer__btn-center voice-visualizer__relative ${M?"voice-visualizer__btn-center--border-transparent":""}`,onClick:m,disabled:M,children:[M&&i.jsx("div",{className:"voice-visualizer__spinner-wrapper",children:i.jsx("div",{className:"voice-visualizer__spinner"})}),i.jsx("img",{src:Ue,alt:"Microphone"})]}),i.jsx("button",{type:"button",className:`voice-visualizer__btn-center voice-visualizer__btn-center-pause ${n?"":"voice-visualizer__visually-hidden"}`,onClick:_,children:i.jsx("img",{src:ct,alt:"Stop"})}),!u&&i.jsx("button",{type:"button",onClick:N,className:`voice-visualizer__btn ${xe??""}`,disabled:g,children:"Clear"}),ue&&s&&i.jsx("button",{type:"button",onClick:p,className:`voice-visualizer__btn ${xe??""}`,disabled:g,children:"Download Audio"})]})]})]})};function ot({onStartRecording:e,onStopRecording:r,onPausedRecording:n,onResumedRecording:s,onClearCanvas:a,onEndAudioPlayback:h,onStartAudioPlayback:S,onPausedAudioPlayback:v,onResumedAudioPlayback:z,onErrorPlayingAudio:m,shouldHandleBeforeUnload:_=!0}={}){const[p,d]=t.useState(!1),[y,f]=t.useState(!1),[M,g]=t.useState(new Uint8Array(0)),[u,b]=t.useState(!1),[D,P]=t.useState(null),[N,W]=t.useState(null),[E,A]=t.useState(0),[X,Y]=t.useState(0),[_e,Me]=t.useState(0),[C,H]=t.useState(""),[re,j]=t.useState(!0),[Z,U]=t.useState(0),[ne,ue]=t.useState(!0),[ye,he]=t.useState(!1),[se,le]=t.useState(!1),[ve,G]=t.useState(null),[$e,ce]=t.useState(!1),ie=t.useRef(null),w=t.useRef(null),V=t.useRef(null),J=t.useRef(null),oe=t.useRef(null),K=t.useRef(null),T=t.useRef(null),I=t.useRef(null),l=t.useRef(null),Ee=!!(N&&!u),xe=Re(_e),be=Je(E),fe=ke(Z),Ce=ye||u;t.useEffect(()=>{if(!p||y)return;const o=setInterval(()=>{const B=performance.now();A(F=>F+(B-X)),Y(B)},1e3);return()=>clearInterval(o)},[X,y,p]),t.useEffect(()=>{if(ve){ee();return}},[ve]),t.useEffect(()=>()=>{ee()},[]),t.useEffect(()=>(!ne&&_&&window.addEventListener("beforeunload",$),()=>{window.removeEventListener("beforeunload",$)}),[ne,_]);const $=c=>{c.preventDefault(),c.returnValue=""},Te=async c=>{if(c)try{if(c.size===0)throw new Error("Error: The audio blob is empty");const o=URL.createObjectURL(c);H(o);const B=await c.arrayBuffer(),Ne=await new AudioContext().decodeAudioData(B);W(Ne),Me(Ne.duration-.06),G(null)}catch(o){console.error("Error processing the audio blob:",o),G(o instanceof Error?o:new Error("Error processing the audio blob"))}},me=c=>{c instanceof Blob&&(ee(),le(!0),ue(!1),b(!0),d(!1),A(0),f(!1),l.current=new Audio,P(c),Te(c))},He=()=>{ce(!0),navigator.mediaDevices.getUserMedia({audio:!0}).then(c=>{ue(!1),ce(!1),d(!0),Y(performance.now()),ie.current=c,V.current=new window.AudioContext,J.current=V.current.createAnalyser(),oe.current=new Uint8Array(J.current.frequencyBinCount),K.current=V.current.createMediaStreamSource(c),K.current.connect(J.current),w.current=new MediaRecorder(c),w.current.addEventListener("dataavailable",de),w.current.start(),e&&e(),Q()}).catch(c=>{ce(!1),G(c instanceof Error?c:new Error("Error starting audio recording"))})},Q=()=>{J.current.getByteTimeDomainData(oe.current),g(new Uint8Array(oe.current)),T.current=requestAnimationFrame(Q)},de=c=>{w.current&&(w.current=null,l.current=new Audio,P(c.data),Te(c.data))},R=()=>{l.current&&(U(l.current.currentTime),I.current=requestAnimationFrame(R))},Fe=()=>{p||$e||(ne||ee(),He())},Ie=()=>{var c;d(!1),w.current&&(w.current.stop(),w.current.removeEventListener("dataavailable",de)),(c=ie.current)==null||c.getTracks().forEach(o=>o.stop()),T.current&&cancelAnimationFrame(T.current),K.current&&K.current.disconnect(),V.current&&V.current.state!=="closed"&&V.current.close(),b(!0),A(0),f(!1),r&&r()},ee=()=>{var c;T.current&&(cancelAnimationFrame(T.current),T.current=null),I.current&&(cancelAnimationFrame(I.current),I.current=null),w.current&&(w.current.removeEventListener("dataavailable",de),w.current.stop(),w.current=null),(c=ie.current)==null||c.getTracks().forEach(o=>o.stop()),ie.current=null,l!=null&&l.current&&(l.current.removeEventListener("ended",q),l.current.pause(),l.current.src="",l.current=null),V.current=null,J.current=null,oe.current=null,K.current=null,ce(!1),d(!1),le(!1),b(!1),P(null),W(null),A(0),Y(0),Me(0),H(""),U(0),j(!0),f(!1),he(!1),g(new Uint8Array(0)),G(null),ue(!0),a&&a()},Le=()=>{if(l.current&&l.current.paused){const c=l.current.play();c!==void 0&&c.catch(o=>{console.error(o),m&&m(o instanceof Error?o:new Error("Error playing audio"))})}},ze=()=>{!l.current||p||(requestAnimationFrame(R),Le(),l.current.addEventListener("ended",q),j(!1),S&&Z===0&&S(),z&&Z!==0&&z())},pe=()=>{if(!l.current||p)return;I.current&&cancelAnimationFrame(I.current),l.current.removeEventListener("ended",q),l.current.pause(),j(!0);const c=l.current.currentTime;U(c),l.current.currentTime=c,v&&v()},ae=()=>{var c,o,B;if(p){f(F=>!F),((c=w.current)==null?void 0:c.state)==="recording"?((o=w.current)==null||o.pause(),A(F=>F+(performance.now()-X)),T.current&&cancelAnimationFrame(T.current),n&&n()):(T.current=requestAnimationFrame(Q),(B=w.current)==null||B.resume(),Y(performance.now()),s&&s());return}l.current&&Ee&&(l.current.paused?ze():pe())},q=()=>{I.current&&cancelAnimationFrame(I.current),j(!0),h&&h()},k=()=>{var o;if(!C)return;const c=document.createElement("a");c.href=C,c.download=`recorded_audio${Qe((o=w.current)==null?void 0:o.mimeType)}`,document.body.appendChild(c),c.click(),document.body.removeChild(c),URL.revokeObjectURL(C)};return{audioRef:l,isRecordingInProgress:p,isPausedRecording:y,audioData:M,recordingTime:E,isProcessingRecordedAudio:Ce,recordedBlob:D,mediaRecorder:w.current,duration:_e,currentAudioTime:Z,audioSrc:C,isPausedRecordedAudio:re,bufferFromRecordedBlob:N,isCleared:ne,isAvailableRecordedAudio:Ee,formattedDuration:xe,formattedRecordingTime:be,formattedRecordedAudioCurrentTime:fe,startRecording:Fe,togglePauseResume:ae,startAudioPlayback:ze,stopAudioPlayback:pe,stopRecording:Ie,saveAudioFile:k,clearCanvas:ee,setCurrentAudioTime:U,error:ve,isProcessingOnResize:ye,isProcessingStartRecording:$e,isPreloadedBlob:se,setPreloadedAudioBlob:me,_setIsProcessingAudioOnComplete:b,_setIsProcessingOnResize:he}}O.VoiceVisualizer=it,O.useVoiceVisualizer=ot,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});