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