https://my.soundful.com/static/js/533.1f3a164e6289498c1280.bundle.js

1"use strict";(self.webpackChunksoundful=self.webpackChunksoundful||[]).push([[533],{57533:(e,t,r)=>{r.r(t),r.d(t,{default:()=>z});var n=r(74848),s=r(96540),a=r(54011),i=r(63710),o=r(11641),c=r(64263);let d,l=window.AudioContext||window.webkitAudioContext,u=e=>{let t=new Event("error");return t.data=new Error("Wrong state for "+e),t};class h{constructor(e,t=null){this.stream=e,this.config=t,this.state="inactive",this.em=document.createDocumentFragment(),this.encoder=(e=>{let t=e.toString().replace(/^(\(\)\s*=>|function\s*\(\))\s*{/,"").replace(/}$/,""),r=new Blob([t]);return new Worker(URL.createObjectURL(r))})(h.encoder);let r=this;this.encoder.addEventListener("message",(e=>{let t=new Event("dataavailable");t.data=new Blob([e.data],{type:r.mimeType}),r.em.dispatchEvent(t),"inactive"===r.state&&r.em.dispatchEvent(new Event("stop"))}))}start(e){if("inactive"!==this.state)return this.em.dispatchEvent(u("start"));this.state="recording",d||(d=new l(this.config)),this.clone=this.stream.clone(),this.input=d.createMediaStreamSource(this.clone),this.processor=d.createScriptProcessor(2048,1,1),this.encoder.postMessage(["init",d.sampleRate]),this.processor.onaudioprocess=e=>{"recording"===this.state&&this.encoder.postMessage(["encode",e.inputBuffer.getChannelData(0)])},this.input.connect(this.processor),this.processor.connect(d.destination),this.em.dispatchEvent(new Event("start")),e&&(this.slicing=setInterval((()=>{"recording"===this.state&&this.requestData()}),e))}stop(){return"inactive"===this.state?this.em.dispatchEvent(u("stop")):(this.requestData(),this.state="inactive",this.clone.getTracks().forEach((e=>{e.stop()})),this.processor.disconnect(),this.input.disconnect(),clearInterval(this.slicing))}pause(){return"recording"!==this.state?this.em.dispatchEvent(u("pause")):(this.state="paused",this.em.dispatchEvent(new Event("pause")))}resume(){return"paused"!==this.state?this.em.dispatchEvent(u("resume")):(this.state="recording",this.em.dispatchEvent(new Event("resume")))}requestData(){return"inactive"===this.state?this.em.dispatchEvent(u("requestData")):this.encoder.postMessage(["dump",d.sampleRate])}addEventListener(...e){this.em.addEventListener(...e)}removeEventListener(...e){this.em.removeEventListener(...e)}dispatchEvent(...e){this.em.dispatchEvent(...e)}}h.prototype.mimeType="audio/wav",h.isTypeSupported=e=>h.prototype.mimeType===e,h.notSupported=!navigator.mediaDevices||!l,h.encoder=()=>{let e=[];onmessage=t=>{"encode"===t.data[0]?function(t){let r=t.length,n=new Uint8Array(2*r);for(let e=0;e<r;e++){let r=2*e,s=t[e];s>1?s=1:s<-1&&(s=-1),s*=32768,n[r]=s,n[r+1]=s>>8}e.push(n)}(t.data[1]):"dump"===t.data[0]&&function(t){let r=e.length?e[0].length:0,n=e.length*r,s=new Uint8Array(44+n),a=new DataView(s.buffer);a.setUint32(0,1380533830,!1),a.setUint32(4,36+n,!0),a.setUint32(8,1463899717,!1),a.setUint32(12,1718449184,!1),a.setUint32(16,16,!0),a.setUint16(20,1,!0),a.setUint16(22,1,!0),a.setUint32(24,t,!0),a.setUint32(28,2*t,!0),a.setUint16(32,2,!0),a.setUint16(34,16,!0),a.setUint32(36,1684108385,!1),a.setUint32(40,n,!0);for(let t=0;t<e.length;t++)s.set(e[t],t*r+44);e=[],postMessage(s.buffer,[s.buffer])}(t.data[1])}};const p=h,m="MediaRecorder"in window?MediaRecorder:(p.encoder=()=>{importScripts("https://cdnjs.cloudflare.com/ajax/libs/lamejs/1.2.0/lame.min.js");let e,t=new Int8Array;function r(e,t){if(0===t.length)return e;let r=new Int8Array(e.length+t.length);return r.set(e),r.set(t,e.length),r}onmessage=n=>{var s;"init"===n.data[0]?(s=n.data[1],e=new lamejs.Mp3Encoder(1,s||44100,128)):"encode"===n.data[0]?function(n){for(let e=0;e<n.length;e++)n[e]=32767.5*n[e];let s=e.encodeBuffer(n);t=r(t,s)}(n.data[1]):function(){let n=e.flush();t=r(t,n);let s=t.buffer;t=new Int8Array,postMessage(s,[s])}(n.data[1])}},p.prototype.mimeType="audio/mpeg",p);var g=r(58136),f=Object.defineProperty,v=Object.defineProperties,y=Object.getOwnPropertyDescriptors,w=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,E=Object.prototype.propertyIsEnumerable,R=(e,t,r)=>t in e?f(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,x=(e,t)=>{for(var r in t||(t={}))b.call(t,r)&&R(e,r,t[r]);if(w)for(var r of w(t))E.call(t,r)&&R(e,r,t[r]);return e},j=(e,t)=>v(e,y(t));const A={isRecording:!1,stream:null,recorder:null,error:null,duration:0,startedTime:0},C=(0,g.lQ)("START",(e=>t=>e(t))),k=(0,g.lQ)("STOP",(e=>()=>e())),U=(0,g.lQ)("ERROR",(e=>t=>e(t))),T=(0,g.lQ)("UPDATE_DURATION"),D=(0,g.vy)(A,(e=>

1[e(C,((e,{payload:{recorder:t,stream:r}})=>j(x({},e),{isRecording:!0,startedTime:Date.now(),recorder:t,stream:r}))),e(k,(e=>j(x({},e),{isRecording:!1,duration:0,startedTime:0}))),e(U,((e,{payload:{error:t}})=>j(x({},e),{isRecording:!1,error:t}))),e(T,(e=>{const t=(Date.now()-e.startedTime)/1e3;return j(x({},e),{duration:t})}))]));var S=r(44675),L=r(51746),O=r(3600),P=r(79068);const M=(0,P.A)((e=>({recorder:{display:"grid",gridTemplateColumns:"2fr 4fr 1fr",gridColumnGap:e.spacing(1),border:0,backgroundColor:e.palette.secondary.dark,borderRadius:e.spacing(1),margin:e.spacing(4,0),padding:e.spacing(2),[e.breakpoints.down("mobile")]:{borderRadius:0,margin:e.spacing(2,0),padding:e.spacing(1)}},playController:{display:"flex",alignItems:"center"},visualisation:{width:"100%",height:"100%"},timer:{alignSelf:"center",justifySelf:"end"}}))),B=(0,s.memo)((({saveRecording:e})=>{const t=M(),{t:r}=(0,i.Bd)(),{isRecording:a,start:d,stop:l,duration:u,stream:h}=(e=>{const[t,r]=(0,s.useReducer)(D,A),{recorder:n,isRecording:a,error:i,stream:o}=t,d=(0,s.useRef)([]),l=(0,s.useRef)([]);return(0,s.useEffect)((()=>{let e;return a&&(e=window.setInterval((()=>{r(T())}),1e3)),()=>clearInterval(e)}),[a]),(0,s.useEffect)((()=>(n&&"inactive"===n.state&&(n.start(2e3),n.addEventListener("dataavailable",(e=>{d.current&&d.current.push(e.data)}))),()=>{n&&(n.stream.getAudioTracks().forEach((e=>e.stop())),d.current=[],l.current.forEach((e=>URL.revokeObjectURL(e))),l.current=[],n&&"inactive"!==n.state&&n.stop())})),[n]),{start:()=>{return e=function*(){try{if(a)return;const e=yield navigator.mediaDevices.getUserMedia({audio:!0}),t=new m(e);r(C({stream:e,recorder:t}))}catch(e){r(U({error:e}))}},new Promise(((t,r)=>{var n=t=>{try{a(e.next(t))}catch(e){r(e)}},s=t=>{try{a(e.throw(t))}catch(e){r(e)}},a=e=>e.done?t(e.value):Promise.resolve(e.value).then(n,s);a((e=e.apply(void 0,null)).next())}));var e},stop:()=>{try{n&&"inactive"!==n.state&&d.current&&(n.stop(),n.addEventListener("stop",(()=>{const s=new Blob(d.current,{type:"audio/mpeg"}),a=URL.createObjectURL(s);l.current.push(a);const i=(Date.now()-t.startedTime)/1e3;e(a,i),r(k()),n.stream.getAudioTracks().forEach((e=>e.stop())),d.current=[]}),{once:!0}))}catch(e){r(U({error:e}))}},duration:(0,c.a3)(t.duration),recorder:n,isRecording:a,error:i,stream:o}})(e),[p,g]=(0,s.useState)("bars"),f=["sinewave","bars","sinebars"],v=(({width:e,height:t,mode:r})=>{const n=(0,s.useRef)(null),a=(0,s.useRef)(null),[i,o]=(0,s.useState)(!1),{palette:c}=(0,S.A)();return(0,s.useEffect)((()=>{if(!n.current){const e=new window.AudioContext,t=e.createAnalyser();t.fftSize=256,t.maxDecibels=-30,t.minDecibels=-100;const r=new Uint8Array(t.frequencyBinCount);n.current={audioCtx:e,analyser:t,dataArray:r}}return()=>{n.current&&(n.current.audioCtx.close(),n.current=null)}}),[]),(0,s.useEffect)((()=>{const s=a.current,o=null==s?void 0:s.getContext("2d");let d;s&&o&&(s.width=e,s.height=t,o.lineWidth=1.5,o.strokeStyle=c.text.primary,o.fillStyle=c.primary.main);const l=t/2,u={sinewave:(t,r)=>{const n=e/r.length;t.beginPath();for(let e=0,s=0;e<r.length;e++,s+=n){const n=r[e]/128*l;t.lineTo(s,n)}t.stroke()},bars:(r,n)=>{const s=e/n.length*2.6,a=s+1;for(let e=0,i=0;e<n.length;e++,i+=a){const a=n[e]/128*l;r.fillStyle=`rgb(${n[e]+25}, 30, 80)`,r.fillRect(i,t-a,s,a)}},sinebars:(e,r)=>{for(let n=0,s=0;n<r.length;n++,s+=6.25){const a=r[n]/256*t;e.fillRect(s,l-a/2,5,a)}}},h=u[r],p={sinewave:"getByteTimeDomainData",bars:"getByteFrequencyData",sinebars:"getByteFrequencyData"}[r];if(i){const r=()=>{if(n.current){d=requestAnimationFrame(r);const{analyser:s,dataArray:a}=n.current;s[p](a),o&&(o.clearRect(0,0,e,t),h(o,a))}};r()}return()=>cancelAnimationFrame(d)}),[i,t,e,c,r]),{start:e=>{if(n.current&&a.current){const{audioCtx:t,analyser:r}=n.current;t.createMediaStreamSource(e).connect(r),o(!0)}},stop:()=>{o(!1)},canvasRef:a}})({width:512,height:32,mode:p});return(0,s.useEffect)((()=>{a&&h?v.start(h):h&&v.stop()}),[a,h,v]),(0,n.jsxs)("section",{className:t.recorder,children:[(0,n.jsxs)("div",{className:t.playController,children:[(0,n.jsx)(o.A,{"aria-label":"start/stop",onClick:a?l:d,children:a?(0,n.jsx)(L.b,{width:48,height:48}):(0,n.jsx)(O.N,{width:48,height:48})}),(0,n.jsxs)("span",{children:[" ",r(a?"mediaRecorder.stop":"mediaRecorder.start")]})]}),(0,n.jsx)("canvas",{className:t.visualisation,ref:v.canvasRef,onClick:()=>g(f[(f.indexOf(p)+1)%f.length])}),(0,n.jsx)("div",{className:t.timer,children:u})]})}));var I=r(62533),q=r(10388),N=r(30726);const F=(0,P.A)((()=>({recording:{display:"grid",gridTemplateColumns:"32px 10fr auto"}}))),Q=[153,255,204,153,68,119,51,85,170,221,170,85,102,136,85,51,34,102,51,68,136,85,68,136,187,136,85,51,102,221,170,85,102,136,221,221,221,221,170,170,170,170,85,85,85,85,102,102,102,102,136,136,136,136,85,85,85,85,51,51,51,51,34,34,34,34,102,102,102,102,51,51,51,51,68,68,68,68,136,136,136,136,85,85,85,85,68,68,68,68,102,51,68,136,85,68,136,187,136,85,51,102,68,68,136,136,136,136,187,187,219,255,136,136,136,120,85,85,85,85,51,51,51,51,102,102,102,102,68,68,68,68,85,51,34,102,51,68,136,85,68,136,187,136,85,51,102,51,68,136,85,68,136,187,136,85,51,102,68,68,136,136,136,136,187,187,219,255,136,136,136,120,85,85,85,85,51,51,51,51,102,102,102,102,68,68,68,68,85,51,102,51,68,136,85,68,136,187,136,85,51,102,102,102,102,68,68,68,68,85,51,102,51,68,136,85,68,136,187,136,85,51,102,68,68,68,68,102,68,68,85,51,102,68,68,68,68,102,68,68,85,68,102,68,68,85],W=(0,s.memo)((({src:e,id:t,duration:r,onDelete:a})=>

1{const i=F(),c=(0,s.useRef)(null),[d,l]=(0,s.useState)(!1),[,u]=(0,s.useState)(0),h=()=>{return e=function*(){c.current&&(yield c.current.play(),l(!0))},new Promise(((t,r)=>{var n=t=>{try{a(e.next(t))}catch(e){r(e)}},s=t=>{try{a(e.throw(t))}catch(e){r(e)}},a=e=>e.done?t(e.value):Promise.resolve(e.value).then(n,s);a((e=e.apply(undefined,null)).next())}));var e},p=()=>{c.current&&(c.current.pause(),l(!1))},m=(0,s.useCallback)((e=>{const t=c.current;t&&(u(e),t.currentTime=e*r,t.paused&&h())}),[r]);return(0,s.useEffect)((()=>{const e=c.current,t=()=>{if(e){const t=e.currentTime/r;u(t)}},n=()=>{u(0),l(!1)};return e&&(e.addEventListener("timeupdate",t),e.addEventListener("ended",n)),()=>{e&&(e.removeEventListener("timeupdate",t),e.removeEventListener("ended",n))}}),[r]),(0,n.jsxs)("div",{className:i.recording,children:[(0,n.jsx)("audio",{src:e,ref:c,children:(0,n.jsx)("track",{kind:"captions"})}),(0,n.jsx)(o.A,{"aria-label":"togglePlay",onClick:()=>{c.current&&(c.current.paused?h:p)()},children:d?(0,n.jsx)(L.b,{width:36,height:36}):(0,n.jsx)(O.N,{width:36,height:36})}),(0,n.jsx)(I.C,{waveform:Q,isActive:!0,duration:r,onClick:m,createRenderer:(e,t)=>new N.Q(e,t)}),(0,n.jsx)(o.A,{"aria-label":"close",onClick:()=>a(t),children:(0,n.jsx)(q.F,{})})]})})),$=({recordings:e,deleteRecording:t})=>(0,n.jsx)("section",{children:e.map((({id:e,src:r,duration:s})=>(0,n.jsx)(W,{id:e,src:r,duration:s,onDelete:t},e)))}),z=()=>{const[e,t]=(0,s.useState)([]),r=(0,s.useCallback)(((e,r)=>{t((t=>[...t,{id:(0,a.A)(),src:e,duration:r}]))}),[]),i=(0,s.useCallback)((e=>{t((t=>t.filter((t=>t.id!==e))))}),[]);return(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(B,{saveRecording:r}),(0,n.jsx)($,{recordings:e,deleteRecording:i})]})}}}]);
2//# sourceMappingURL=533.1f3a164e6289498c1280.bundle.js.map