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

React library for audio recording and visualization using Web Audio API

(function(){"use strict";(e=>{try{if(typeof window>"u")return;var i=document.createElement("style");i.appendChild(document.createTextNode(e)),document.head.appendChild(i)}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})(".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,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["exports","react/jsx-runtime","react"],c):(O=typeof globalThis<"u"?globalThis:O||self,c(O["react-voice-visualizer"]={},O["react/jsx-runtime"],O.React))})(this,function(O,c,t){"use strict";const Ee=({canvas:e,backgroundColor:n})=>{const i=e.height,s=e.width,o=Math.round(s/2),u=e.getContext("2d");return u?(u.clearRect(0,0,s,i),n!=="transparent"&&(u.fillStyle=n,u.fillRect(0,0,s,i)),{context:u,height:i,width:s,halfWidth:o}):null},Se=({context:e,color:n,rounded:i,x:s,y:o,w:u,h:p})=>{e.fillStyle=n,e.beginPath(),e.roundRect?(e.roundRect(s,o,u,p,i),e.fill()):e.fillRect(s,o,u,p)},Ve=({barsData:e,canvas:n,barWidth:i,gap:s,backgroundColor:o,mainBarColor:u,secondaryBarColor:p,currentAudioTime:v=0,rounded:g,duration:d})=>{const I=Ee({canvas:n,backgroundColor:o});if(!I)return;const{context:w,height:z}=I,N=v/d;e.forEach((m,L)=>{const M=L/e.length,a=N>M;Se({context:w,color:a?p:u,rounded:g,x:L*(i+s*i),y:z/2-m.max,h:m.max*2,w:i})})};function Je({context:e,color:n,rounded:i,width:s,height:o,barWidth:u}){Se({context:e,color:n,rounded:i,x:s/2+u/2,y:o/2-1,h:2,w:s-(s/2+u/2)})}const Qe=({audioData:e,unit:n,index:i,index2:s,canvas:o,isRecordingInProgress:u,isPausedRecording:p,picks:v,backgroundColor:g,barWidth:d,mainBarColor:I,secondaryBarColor:w,rounded:z,animateCurrentPick:N,fullscreen:m})=>{const L=Ee({canvas:o,backgroundColor:g});if(!L)return;const{context:M,height:a,width:E,halfWidth:B}=L;if(e!=null&&e.length&&u){const b=Math.max(...e);if(!p){if(s.current>=d){s.current=0;const j=(a-b/258*a)/a*100,C=(-a+b/258*a*2)/a*100,V=i.current===d?{startY:j,barHeight:C}:null;i.current>=n?i.current=d:i.current+=d,v.length>(m?E:B)/d&&v.pop(),v.unshift(V)}s.current+=1}!m&&W(),N&&Se({context:M,rounded:z,color:I,x:m?E:B,y:a-b/258*a,h:-a+b/258*a*2,w:d});let k=(m?E:B)-s.current;v.forEach(j=>{j&&Se({context:M,color:I,rounded:z,x:k,y:j.startY*a/100>a/2-1?a/2-1:j.startY*a/100,h:j.barHeight*a/100>2?j.barHeight*a/100:2,w:d}),k-=d})}else v.length=0;function W(){Je({context:M,color:w,rounded:z,width:E,height:a,barWidth:d})}},$e=e=>{const n=Math.floor(e/3600),i=Math.floor(e%3600/60),s=e%60,o=Math.floor((s-Math.floor(s))*1e3);return n>0?`${String(n).padStart(2,"0")}:${String(i).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}:${String(o).charAt(0)}`:i>0?`${String(i).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}:${String(o).charAt(0)}`:`${String(Math.floor(s)).padStart(2,"0")}:${String(o).charAt(0)}`},Re=e=>{const n=Math.floor(e/1e3),i=Math.floor(n/3600),s=Math.floor(n%3600/60),o=n%60;return i>0?`${String(i).padStart(2,"0")}:${String(s).padStart(2,"0")}:${String(o).padStart(2,"0")}`:`${String(s).padStart(2,"0")}:${String(o).padStart(2,"0")}`};function Oe(e){if(typeof e=="string"){const n=Number(e);if(!Number.isNaN(n))return`${Math.trunc(n/2)*2}px`}return e}const qe=({bufferData:e,height:n,width:i,barWidth:s,gap:o})=>{const u=i/(s+o*s),p=Math.floor(e.length/u),v=n/2;let g=[],d=0;for(let I=0;I<u;I++){const w=[];let z=0;for(let m=0;m<p&&I*p+m<e.length;m++){const L=e[I*p+m];L>0&&(w.push(L),z++)}const N=w.reduce((m,L)=>m+L,0)/z;N>d&&(d=N),g.push({max:N})}if(v*.95>d*v){const I=v*.95/d;g=g.map(w=>({max:w.max>.01?w.max*I:1}))}return g},Xe=e=>{if(!e)return"";const n=e.match(/audio\/([^;]+)/);return n&&n.length>=2?`.${n[1]}`:""},Ke=e=>{const n=Math.floor(e/3600),i=Math.floor(e%3600/60),s=e%60,o=Math.floor((s-Math.floor(s))*1e3);return n>0?`${String(n).padStart(2,"0")}:${String(i).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}}h`:i>0?`${String(i).padStart(2,"0")}:${String(Math.floor(s)).padStart(2,"0")}m`:`${String(Math.floor(s)).padStart(2,"0")}:${String(o).charAt(0)}${String(o).charAt(1)}s`},et=(e,n=250)=>{const i=t.useRef();return t.useCallback((...s)=>{const o=()=>{clearTimeout(i.current),e(...s)};clearTimeout(i.current),i.current=setTimeout(o,n)},[e,n])},tt=e=>{onmessage=n=>{postMessage(e(n.data))}};function rt({fn:e,initialValue:n,onMessageReceived:i}){const[s,o]=t.useState(n);return{result:s,setResult:o,run:p=>{const v=new Worker(URL.createObjectURL(new Blob([`(${tt})(${e})`])));v.onmessage=g=>{g.data&&(o(g.data),i&&i(),v.terminate())},v.onerror=g=>{console.error(g.message),v.terminate()},v.postMessage(p)}}}const zt="",Ze=({color:e="#FFFFFF",reflect:n})=>c.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 ${n?"voice-visualizer__canvas-audio-wave-icon2":""}`,children:c.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})}),Fe="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjMiIGhlaWdodD0iMzMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEuMSAxNi43MmMwIDMgLjk2IDUuOCAzLjYxIDcuOTVhOS45NiA5Ljk2IDAgMCAwIDYuNSAyLjE3bTAgMHY0LjM0aDQuMzQtOC42N200LjM0LTQuMzRjMi4zNSAwIDQuNDItLjQ4IDYuNS0yLjE3YTkuODcgOS44NyAwIDAgMCAzLjYxLTcuOTVNMTEuMjIgMS44MmMtMS40NSAwLTIuNS4zNy0zLjMuOTNhNS42IDUuNiAwIDAgMC0xLjg0IDIuNGMtLjkgMi4wNi0xLjEgNC43Ny0xLjEgNy4yNCAwIDIuNDYuMiA1LjE3IDEuMSA3LjI0YTUuNiA1LjYgMCAwIDAgMS44NCAyLjRjLjguNTUgMS44NS45MiAzLjMuOTIgMS40NCAwIDIuNS0uMzcgMy4yOS0uOTNhNS42IDUuNiAwIDAgMCAxLjg0LTIuNGMuOS0yLjA2IDEuMS00Ljc3IDEuMS03LjIzIDAtMi40Ny0uMi01LjE4LTEuMS03LjI0YTUuNiA1LjYgMCAwIDAtMS44NC0yLjQgNS41MiA1LjUyIDAgMCAwLTMuMy0uOTNaIiBzdHJva2U9IiMwMDAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIvPgo8L3N2Zz4K",nt=({color:e="#000000",stroke:n=2,className:i})=>c.jsx("svg",{viewBox:"0 0 23 33",fill:"none",xmlns:"http://www.w3.org/2000/svg",className:i,children:c.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:n,strokeLinecap:"round",strokeLinejoin:"round"})}),Ue="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjkiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE0IDMuNWEzLjUgMy41IDAgMSAxIDcgMHYyMmEzLjUgMy41IDAgMSAxLTcgMHYtMjJaIiBmaWxsPSIjZmZmIi8+CiAgPHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjkiIHJ4PSIzLjUiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==",it="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjYiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTE4Ljc1IDYuMTZjNC4zMSAyLjYgNi40NiAzLjkgNi40NiA1Ljg0IDAgMS45NS0yLjE1IDMuMjQtNi40NiA1Ljg0bC00Ljg0IDIuOTJjLTQuMzEgMi42LTYuNDYgMy44OS04LjA4IDIuOTItMS42Mi0uOTgtMS42Mi0zLjU3LTEuNjItOC43NlY5LjA4YzAtNS4xOSAwLTcuNzggMS42Mi04Ljc2IDEuNjItLjk3IDMuNzcuMzMgOC4wOCAyLjkybDQuODQgMi45MloiIGZpbGw9IiNmZmYiLz4KPC9zdmc+Cg==",st="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjciIGhlaWdodD0iMjUiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHJlY3QgeD0iLjIxIiB3aWR0aD0iMjYiIGhlaWdodD0iMjUiIHJ4PSI1IiBmaWxsPSIjZmZmIi8+Cjwvc3ZnPgo=",ct=({controls:{audioRef:e,audioData:n,isRecordingInProgress:i,recordedBlob:s,duration:o,currentAudioTime:u,audioSrc:p,bufferFromRecordedBlob:v,togglePauseResume:g,startRecording:d,stopRecording:I,saveAudioFile:w,isAvailableRecordedAudio:z,isPausedRecordedAudio:N,isPausedRecording:m,isProcessingStartRecording:L,isProcessingRecordedAudio:M,isCleared:a,formattedDuration:E,formattedRecordingTime:B,formattedRecordedAudioCurrentTime:W,clearCanvas:b,setCurrentAudioTime:k,isProcessingOnResize:j,_setIsProcessingOnResize:C,_setIsProcessingAudioOnComplete:V},width:J="100%",height:pe=200,speed:Ie=3,backgroundColor:x="transparent",mainBarColor:H="#FFFFFF",secondaryBarColor:ne="#5e5e5e",barWidth:U=2,gap:Q=1,rounded:Z=5,isControlPanelShown:ie=!0,isDownloadAudioButtonShown:he=!1,animateCurrentPick:we=!0,fullscreen:le=!1,onlyRecording:se=!1,isDefaultUIShown:ve=!0,defaultMicrophoneIconColor:me=H,defaultAudioWaveIconColor:R=H,mainContainerClassName:Le,canvasContainerClassName:ce,isProgressIndicatorShown:oe=!se,progressIndicatorClassName:S,isProgressIndicatorTimeShown:F=!0,progressIndicatorTimeClassName:q,isProgressIndicatorOnHoverShown:ae=!se,progressIndicatorOnHoverClassName:X,isProgressIndicatorTimeOnHoverShown:_=!0,progressIndicatorTimeOnHoverClassName:$,isAudioProcessingTextShown:f=!0,audioProcessingTextClassName:Ne,controlButtonsClassName:ye})=>{const[fe,_e]=t.useState(0),[D,Ae]=t.useState(0),[de,be]=t.useState(0),[K,ze]=t.useState(0),[ee,je]=t.useState(!1),[Ce]=t.useState(window.innerWidth),[Y,De]=t.useState(!1),Te=Ce<768,G=Math.trunc(Ie),ue=Math.trunc(Q),r=Math.trunc(Te&&ue>0?U+1:U),h=r+ue*r,l=t.useRef(null),T=t.useRef([]),te=t.useRef(G),at=t.useRef(r),ut=t.useRef(r),P=t.useRef(null),{result:ge,setResult:ht,run:lt}=rt({fn:qe,initialValue:[],onMessageReceived:mt}),vt=et(xe);t.useEffect(()=>{if(xe(),!P.current)return;const y=P.current.getBoundingClientRect(),A={width:y.width,height:y.height},re=dt=>{const He=dt[0];if(!He)return;const We=Math.round(He.contentRect.width),ke=Math.round(He.contentRect.height);We===A.width&&ke===A.height||(A.width=We,A.height=ke,z?(C(!0),De(!0),vt()):xe())},Me=new ResizeObserver(re);return Me.observe(P.current),()=>{Me.disconnect()}},[J,z]),t.useLayoutEffect(()=>{l.current&&((te.current>=G||!n.length)&&(te.current=n.length?0:G,Qe({audioData:n,unit:h,index:at,index2:ut,canvas:l.current,picks:T.current,isRecordingInProgress:i,isPausedRecording:m,backgroundColor:x,mainBarColor:H,secondaryBarColor:ne,barWidth:r,rounded:Z,animateCurrentPick:we,fullscreen:le})),te.current+=1)},[l.current,n,r,x,H,ne,Z,le,ve,K]),t.useEffect(()=>{var y,A;if(z)return ee?(y=l.current)==null||y.addEventListener("mouseleave",Ge):(A=l.current)==null||A.addEventListener("mouseenter",Ye),()=>{var re,Me;ee?(re=l.current)==null||re.removeEventListener("mouseleave",Ge):(Me=l.current)==null||Me.removeEventListener("mouseenter",Ye)}},[ee,z]),t.useEffect(()=>{var A;if(!v||!l.current||i||Y)return;if(se){b();return}T.current=[];const y=v.getChannelData(0);return lt({bufferData:y,height:de,width:K,barWidth:r,gap:ue}),(A=l.current)==null||A.addEventListener("mousemove",Pe),()=>{var re;(re=l.current)==null||re.removeEventListener("mousemove",Pe)}},[v,D,de,Q,U,Y]),t.useEffect(()=>{if(!(se||!(ge!=null&&ge.length)||!l.current||M)){if(a){ht([]);return}Ve({barsData:ge,canvas:l.current,barWidth:r,gap:ue,backgroundColor:x,mainBarColor:H,secondaryBarColor:ne,currentAudioTime:u,rounded:Z,duration:o})}},[ge,u,a,Z,x,H,ne]),t.useEffect(()=>{M&&l.current&&Ee({canvas:l.current,backgroundColor:x})},[M]);function xe(){if(!P.current||!l.current)return;te.current=G;const y=Math.trunc(P.current.clientHeight*window.devicePixelRatio/2)*2;Ae(P.current.clientWidth),be(y),ze(Math.round(P.current.clientWidth*window.devicePixelRatio)),De(!1)}function mt(){C(!1),V(!1),e!=null&&e.current&&!j&&(e.current.src=p)}const Ye=()=>{je(!0)},Ge=()=>{je(!1)},Pe=y=>{_e(y.offsetX)},ft=y=>{if(e!=null&&e.current&&l.current){const A=o/D*(y.clientX-l.current.getBoundingClientRect().left);e.current.currentTime=A,k(A)}},Be=u/o*D;return c.jsxs("div",{className:`voice-visualizer ${Le??""}`,children:[c.jsxs("div",{className:`voice-visualizer__canvas-container ${ce??""}`,ref:P,style:{width:Oe(J)},children:[c.jsx("canvas",{ref:l,width:K,height:de,onClick:ft,style:{height:Oe(pe),width:D},children:"Your browser does not support HTML5 Canvas."}),ve&&a&&c.jsxs(c.Fragment,{children:[c.jsx(Ze,{color:R}),c.jsx(Ze,{color:R,reflect:!0}),c.jsx("button",{onClick:d,className:"voice-visualizer__canvas-microphone-btn",children:c.jsx(nt,{color:me,stroke:.5,className:"voice-visualizer__canvas-microphone-icon"})})]}),f&&M&&c.jsx("p",{className:`voice-visualizer__canvas-audio-processing ${Ne??""}`,style:{color:H},children:"Processing Audio..."}),ee&&z&&!M&&!Te&&ae&&c.jsx("div",{className:`voice-visualizer__progress-indicator-hovered ${X??""}`,style:{left:fe},children:_&&c.jsx("p",{className:`voice-visualizer__progress-indicator-hovered-time 
                    ${D-fe<70?"voice-visualizer__progress-indicator-hovered-time-left":""} 
                    ${$??""}`,children:$e(o/D*fe)})}),oe&&z&&!M&&o?c.jsx("div",{className:`voice-visualizer__progress-indicator ${S??""}`,style:{left:Be<D-1?Be:D-1},children:F&&c.jsx("p",{className:`voice-visualizer__progress-indicator-time ${D-u*D/o<70?"voice-visualizer__progress-indicator-time-left":""} ${q??""}`,children:W})}):null]}),ie&&c.jsxs(c.Fragment,{children:[c.jsxs("div",{className:"voice-visualizer__audio-info-container",children:[i&&c.jsx("p",{className:"voice-visualizer__audio-info-time",children:B}),o&&!M?c.jsx("p",{children:E}):null]}),c.jsxs("div",{className:"voice-visualizer__buttons-container",children:[i&&c.jsx("div",{className:"voice-visualizer__btn-container",children:c.jsx("button",{className:`voice-visualizer__btn-left ${m?"voice-visualizer__btn-left-microphone":""}`,onClick:g,children:c.jsx("img",{src:m?Fe:Ue,alt:m?"Play":"Pause"})})}),!a&&c.jsx("button",{className:`voice-visualizer__btn-left ${i||L?"voice-visualizer__visually-hidden":""}`,onClick:g,disabled:M,children:c.jsx("img",{src:N?it:Ue,alt:N?"Play":"Pause"})}),a&&c.jsxs("button",{className:`voice-visualizer__btn-center voice-visualizer__relative ${L?"voice-visualizer__btn-center--border-transparent":""}`,onClick:d,disabled:L,children:[L&&c.jsx("div",{className:"voice-visualizer__spinner-wrapper",children:c.jsx("div",{className:"voice-visualizer__spinner"})}),c.jsx("img",{src:Fe,alt:"Microphone"})]}),c.jsx("button",{className:`voice-visualizer__btn-center voice-visualizer__btn-center-pause ${i?"":"voice-visualizer__visually-hidden"}`,onClick:I,children:c.jsx("img",{src:st,alt:"Stop"})}),!a&&c.jsx("button",{onClick:b,className:`voice-visualizer__btn ${ye??""}`,disabled:M,children:"Clear"}),he&&s&&c.jsx("button",{onClick:w,className:`voice-visualizer__btn ${ye??""}`,disabled:M,children:"Download Audio"})]})]})]})};function ot({onStartRecording:e,onStopRecording:n,onPausedRecording:i,onResumedRecording:s,onClearCanvas:o,onEndAudioPlayback:u,onStartAudioPlayback:p,onPausedAudioPlayback:v,onResumedAudioPlayback:g,onErrorPlayingAudio:d,warnBeforeUnload:I=!0}={}){const[w,z]=t.useState(!1),[N,m]=t.useState(!1),[L,M]=t.useState(new Uint8Array(0)),[a,E]=t.useState(!1),[B,W]=t.useState(null),[b,k]=t.useState(null),[j,C]=t.useState(0),[V,J]=t.useState(0),[pe,Ie]=t.useState(0),[x,H]=t.useState(""),[ne,U]=t.useState(!0),[Q,Z]=t.useState(0),[ie,he]=t.useState(!0),[we,le]=t.useState(!1),[se,ve]=t.useState(!1),[me,R]=t.useState(null),[Le,ce]=t.useState(!1),oe=t.useRef(null),S=t.useRef(null),F=t.useRef(null),q=t.useRef(null),ae=t.useRef(null),X=t.useRef(null),_=t.useRef(null),$=t.useRef(null),f=t.useRef(null),Ne=!!(b&&!a),ye=Ke(pe),fe=Re(j),_e=$e(Q),D=we||a;t.useEffect(()=>{if(!w||N)return;const h=setInterval(()=>{const l=performance.now();C(T=>T+(l-V)),J(l)},1e3);return()=>clearInterval(h)},[V,N,w]),t.useEffect(()=>{if(me){Y();return}},[me]),t.useEffect(()=>()=>{Y()},[]),t.useEffect(()=>{if(!I)return;const r=h=>{h.preventDefault(),h.returnValue=""};return ie||window.addEventListener("beforeunload",r),()=>{window.removeEventListener("beforeunload",r)}},[I,ie]);const Ae=async r=>{if(r)try{if(r.size===0)throw new Error("Error: The audio blob is empty");const h=URL.createObjectURL(r);H(h);const l=await r.arrayBuffer(),te=await new AudioContext().decodeAudioData(l);k(te),Ie(te.duration-.06),R(null)}catch(h){console.error("Error processing the audio blob:",h),R(h instanceof Error?h:new Error("Error processing the audio blob"))}},de=r=>{r instanceof Blob&&(Y(),ve(!0),he(!1),E(!0),z(!1),C(0),m(!1),f.current=new Audio,W(r),Ae(r))},be=()=>{ce(!0),navigator.mediaDevices.getUserMedia({audio:!0}).then(r=>{he(!1),ce(!1),z(!0),J(performance.now()),oe.current=r,F.current=new window.AudioContext,q.current=F.current.createAnalyser(),ae.current=new Uint8Array(q.current.frequencyBinCount),X.current=F.current.createMediaStreamSource(r),X.current.connect(q.current),S.current=new MediaRecorder(r),S.current.addEventListener("dataavailable",ze),S.current.start(),e&&e(),K()}).catch(r=>{ce(!1),R(r instanceof Error?r:new Error("Error starting audio recording"))})},K=()=>{q.current.getByteTimeDomainData(ae.current),M(new Uint8Array(ae.current)),_.current=requestAnimationFrame(K)},ze=r=>{S.current&&(S.current=null,f.current=new Audio,W(r.data),Ae(r.data))},ee=()=>{f.current&&(Z(f.current.currentTime),$.current=requestAnimationFrame(ee))},je=()=>{w||Le||(ie||Y(),be())},Ce=()=>{var r;z(!1),S.current&&(S.current.stop(),S.current.removeEventListener("dataavailable",ze)),(r=oe.current)==null||r.getTracks().forEach(h=>h.stop()),_.current&&cancelAnimationFrame(_.current),X.current&&X.current.disconnect(),F.current&&F.current.state!=="closed"&&F.current.close(),E(!0),C(0),m(!1),n&&n()},Y=()=>{var r;_.current&&(cancelAnimationFrame(_.current),_.current=null),$.current&&(cancelAnimationFrame($.current),$.current=null),S.current&&(S.current.removeEventListener("dataavailable",ze),S.current.stop(),S.current=null),(r=oe.current)==null||r.getTracks().forEach(h=>h.stop()),oe.current=null,f!=null&&f.current&&(f.current.removeEventListener("ended",G),f.current.pause(),f.current.src="",f.current=null),F.current=null,q.current=null,ae.current=null,X.current=null,ce(!1),z(!1),ve(!1),E(!1),W(null),k(null),C(0),J(0),Ie(0),H(""),Z(0),U(!0),m(!1),le(!1),M(new Uint8Array(0)),R(null),he(!0),o&&o()},De=()=>{if(f.current&&f.current.paused){const r=f.current.play();r!==void 0&&r.catch(h=>{console.error(h),d&&d(h instanceof Error?h:new Error("Error playing audio"))})}},Te=()=>{var r,h,l;if(w){m(T=>!T),((r=S.current)==null?void 0:r.state)==="recording"?((h=S.current)==null||h.pause(),C(T=>T+(performance.now()-V)),_.current&&cancelAnimationFrame(_.current),i&&i()):(_.current=requestAnimationFrame(K),(l=S.current)==null||l.resume(),J(performance.now()),s&&s());return}if(f.current&&Ne)if(f.current.paused)requestAnimationFrame(ee),De(),f.current.addEventListener("ended",G),U(!1),p&&Q===0&&p(),g&&Q!==0&&g();else{$.current&&cancelAnimationFrame($.current),f.current.removeEventListener("ended",G),f.current.pause(),U(!0);const T=f.current.currentTime;Z(T),f.current.currentTime=T,v&&v()}},G=()=>{$.current&&cancelAnimationFrame($.current),U(!0),u&&u()},ue=()=>{var h;if(!x)return;const r=document.createElement("a");r.href=x,r.download=`recorded_audio${Xe((h=S.current)==null?void 0:h.mimeType)}`,document.body.appendChild(r),r.click(),document.body.removeChild(r),URL.revokeObjectURL(x)};return{audioRef:f,isRecordingInProgress:w,isPausedRecording:N,audioData:L,recordingTime:j,isProcessingRecordedAudio:D,recordedBlob:B,mediaRecorder:S.current,duration:pe,currentAudioTime:Q,audioSrc:x,isPausedRecordedAudio:ne,bufferFromRecordedBlob:b,isCleared:ie,isAvailableRecordedAudio:Ne,formattedDuration:ye,formattedRecordingTime:fe,formattedRecordedAudioCurrentTime:_e,startRecording:je,togglePauseResume:Te,stopRecording:Ce,saveAudioFile:ue,clearCanvas:Y,setCurrentAudioTime:Z,error:me,isProcessingOnResize:we,isProcessingStartRecording:Le,isPreloadedBlob:se,setPreloadedAudioBlob:de,_setIsProcessingAudioOnComplete:E,_setIsProcessingOnResize:le}}O.VoiceVisualizer=ct,O.useVoiceVisualizer=ot,Object.defineProperty(O,Symbol.toStringTag,{value:"Module"})});