https://wavevisual.com/_next/static/chunks/pages/sound-wave-video-d3b3fdce93598065.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5652,3011],{34301:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/sound-wave-video",function(){return n(53206)}])},72301:function(e,t,n){"use strict";n.d(t,{n:function(){return p}});var r=n(52322),a=n(2784),o=n(3752);let s=()=>{let[e,t]=(0,a.useState)(!1);return(0,a.useEffect)(()=>{let e=document.createElement("video");t("probably"===e.canPlayType('video/webm; codecs="vp09.00.10.08"')||"probably"===e.canPlayType('video/webm; codecs="vp9"'))},[]),e};var i=n(99127),l=n(12524),c=n.n(l),d=n(18997),u=n(34406);let m="string"==typeof u.env.NEXT_PUBLIC_VIDEO_PROXY_CACHE_BUST&&u.env.NEXT_PUBLIC_VIDEO_PROXY_CACHE_BUST.length>0?"?".concat(u.env.NEXT_PUBLIC_VIDEO_PROXY_CACHE_BUST):"?v=4";function f(e,t){return"".concat("https://image-server-proxy.wavevisual.workers.dev/videos","/").concat(e,".").concat(t).concat(m)}function x(e){if(!(e instanceof Error)&&!(e instanceof DOMException))return!1;let{name:t}=e;return"AbortError"===t||"NotAllowedError"===t||"string"==typeof e.message&&e.message.includes("interrupted by a call to pause")}let p=e=>{let{src:t,className:n,poster:l,autoplay:u=!1,hidePlayButton:m=!1,playOnHover:p=!0,fillContainer:h=!1,lazy:v=!1,aspectRatio:g}=e,y=(0,o.d)(),b=s(),w=(0,a.useRef)(null),N=(0,a.useRef)(null),[j,_]=a.useState(!1),[E,M]=(0,a.useState)(!1),[S,P]=(0,a.useState)(!v);(0,a.useEffect)(()=>{if(S)return;let e=N.current;if(!e||"undefined"==typeof IntersectionObserver){P(!0);return}let t=new IntersectionObserver(e=>{e.some(e=>e.isIntersecting)&&(P(!0),t.disconnect())},{rootMargin:"600px 0px"});return t.observe(e),()=>t.disconnect()},[S]),(0,a.useEffect)(()=>{M(!1)},[t]);let T=()=>{let e=w.current;e&&e.play().then(()=>{_(!0)}).catch(e=>{x(e)||(0,d.H)(e)})},C=()=>{w.current&&j&&(w.current.pause(),_(!1))};return(0,a.useEffect)(()=>{let e=w.current;e&&(e.muted=!0)},[t,S]),(0,a.useEffect)(()=>{let e=w.current;if(!e||!u||!S)return;let t=()=>{e.paused&&e.play().catch(e=>{x(e)||(0,d.H)(e)})};return e.readyState>=HTMLMediaElement.HAVE_FUTURE_DATA&&queueMicrotask(t),e.addEventListener("canplay",t),e.addEventListener("loadeddata",t),()=>{e.removeEventListener("canplay",t),e.removeEventListener("loadeddata",t)}},[u,t,S]),(0,r.jsxs)("span",{ref:N,className:c()("w-full relative justify-center items-center",n),onMouseEnter:!y&&p?T:void 0,onMouseLeave:!y&&p?C:void 0,onClickCapture:y?j?C:T:void 0,children:[(0,r.jsxs)("video",{className:c()("rounded-xl overflow-hidden w-full",!h&&"mx-auto shadow-md max-w-sm md:max-w-md lg:max-w-lg",h&&"h-full object-cover",!h&&u&&"h-auto"),style:g?{aspectRatio:g}:void 0,autoPlay:u&&S,loop:!0,muted:!0,ref:w,playsInline:!0,preload:u&&S?"auto":"none",poster:S?l:void 0,onPlay:()=>_(!0),onPause:()=>_(!1),onError:()=>{if(b&&!E){M(!0);return}(0,d.H)(Error("Video playback failed: ".concat(t)))},children:[S&&b&&!E&&(0,r.jsx)("source",{src:f(t,"webm"),type:'video/webm; codecs="vp09.00.10.08"'}),S&&(0,r.jsx)("source",{src:f(t,"mp4"),type:"video/mp4"})]},"".concat(t,"-").concat(E?"mp4":"webm","-").concat(S?"in":"out")),!j&&!m&&(0,r.jsx)(i.sT9,{fontSize:60,className:"opacity-80 absolute z-10 text-gray-800"})]})}},3011:function(e,t,n){"use strict";n.d(t,{Qd:function(){return d},UQ:function(){return c},o4:function(){return u},vF:function(){return m}});var r=n(52322),a=n(2784),o=n(16170),s=n(77298),i=n(12524),l=n.n(i);let c=o.fC,d=a.forwardRef((e,t)=>{let{className:n,...a}=e;return(0,r.jsx)(o.ck,{ref:t,className:l()("border-b",n),...a})});d.displayName="AccordionItem";let u=a.forwardRef((e,t)=>{let{className:n,children:a,...i}=e;return(0,r.jsx)(o.h4,{className:"flex",children:(0,r.jsxs)(o.xz,{ref:t,className:l()("flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",n),...i,children:[a,(0,r.jsx)(s.v4q,{className:"text-muted-foreground h-4 w-4 shrink-0 transition-transform duration-200"})]})})});u.displayName=o.xz.displayName;let m=a.forwardRef((e,t)=>{let{className:n,children:a,...s}=e;return(0,r.jsx)(o.VY,{ref:t,className:"data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",...s,children:(0,r.jsx)("div",{className:l()("pb-4 pt-0",n),children:a})})});m.displayName=o.VY.displayName},53206:function(e,t,n){"use strict";n.r(t),n.d(t,{__N_SSG:function(){return S},default:function(){return M}});var r=n(52322),a=n(2784),o=n(39097),s=n.n(o),i=n(71680),l=n(19994),c=n(76349),d=n(97976),u=n(92670),m=n(72301),f=n(62778),x=n(3011),p=n(

150249),h=n(3752),v=n(3438),g=n(18997),y=n(9223),b=n(90583);let w="landing_sound_wave_video",N=[{questionName:"What audio becomes a sound wave video?",acceptedAnswerText:"Uploaded audio exports as an MP4. A Spotify song does not. Video export needs the file on your device.",answerCount:1,name:"What audio becomes a sound wave video?"},{questionName:"Which video formats can I download?",acceptedAnswerText:"From an uploaded file you can export MP4, GIF, WebM, or MOV. MP4 is 1080p at 60fps.",answerCount:1,name:"Which video formats can I download?"},{questionName:"Where do I start?",acceptedAnswerText:"Start Designing opens the editor. Upload the audio, style the wave, then export the MP4.",answerCount:1,name:"Where do I start?"}],j=[{icon:i.CbE,title:"Upload audio",description:"Use a file from your device. A Spotify song does not export as an MP4."},{icon:l.DQ0,title:"Style the wave",description:"Pick colors, a bar or circle shape, and the canvas size in the browser."},{icon:i.aBF,title:"Export an MP4",description:"Uploaded audio exports as an MP4 at 1080p and 60fps, with the audio in the file."}],_=[{href:"/music-visualizer",label:"Music visualizer"},{href:"/",label:"Sound wave art"}],E=e=>{let{trackingId:t,isMobile:n,className:a=""}=e;return(0,r.jsx)(s(),{href:"/editor",prefetch:null!=n&&n,className:"inline-flex min-h-11 items-center justify-center px-8 py-3 text-lg font-semibold text-white rounded-lg from-cyan-500 to-blue-500 bg-gradient-to-r focus:outline-none hover:from-cyan-400 hover:to-blue-400 ".concat(a),"aria-label":"Start Designing",onClick:()=>(0,v.KW)(t),children:"Start Designing"})},M=()=>{(0,p.u)("SoundWaveVideoPage");let e=(0,h.d)(),[t,n]=(0,a.useState)(!0),o=(0,a.useCallback)(e=>{e&&(0,g.Kz)("landing_faq_expand",{landing_page:"sound-wave-video",faq_item:e})},[]);return(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(u.H,{title:"Sound Wave Video — MP4 from uploaded audio | WaveVisual",path:"/sound-wave-video",description:"Make a sound wave video in the browser. Uploaded audio exports as an MP4. A Spotify song does not.",faq:N,type:"home"}),(0,r.jsxs)("div",{className:"relative",children:[(0,r.jsx)("div",{className:"overlay"}),(0,r.jsx)(c.N,{}),(0,r.jsxs)("section",{className:"flex flex-col gap-8 py-4 md:py-12 lg:flex-row lg:items-center lg:gap-14 ".concat(b.kt),children:[(0,r.jsxs)("div",{className:"w-full lg:w-1/2",children:[(0,r.jsx)("span",{className:"inline-flex px-3 py-1 mb-4 text-xs font-semibold tracking-wide text-white uppercase rounded-full bg-violet-600",children:"Sound wave video"}),(0,r.jsxs)("h1",{className:"mb-4 text-3xl font-extrabold leading-tight text-white sm:text-4xl lg:text-5xl",children:["Make a sound wave video",(0,r.jsx)("span",{className:"block text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-blue-400",children:"from uploaded audio"})]}),(0,r.jsx)("p",{className:"mb-4 text-base leading-relaxed text-white/80 md:text-lg max-w-xl",children:"Uploaded audio exports as an MP4. Spotify does not — video export needs the file on your device, not a Spotify song."}),(0,r.jsx)(E,{trackingId:"".concat(w,"_hero_cta"),isMobile:e})]}),(0,r.jsx)("div",{className:"w-full lg:w-1/2",children:(0,r.jsx)("div",{className:"overflow-hidden rounded-2xl shadow-2xl shadow-black/30 bg-black",children:(0,r.jsx)(m.n,{className:"flex w-full",src:"landing/rustic-gradient-demo",poster:(0,y._)({src:"landing/rustic-gradient-demo.jpg",width:750}),autoplay:!0,hidePlayButton:!0,playOnHover:!1})})})]}),(0,r.jsx)("section",{className:"py-16 bg-gray-50",id:"how-it-works",children:(0,r.jsxs)("div",{className:"container px-4 mx-auto md:px-8 max-w-6xl",children:[(0,r.jsx)("h2",{className:"mb-10 text-2xl font-bold text-center text-gray-900 md:text-3xl",children:"Upload, style, export"}),(0,r.jsx)("ol",{className:"grid grid-cols-1 gap-5 md:grid-cols-3",children:j.map((e,t)=>{let{icon:n,title:a,description:o}=e;return(0,r.jsxs)("li",{className:"rounded-2xl border border-gray-200 bg-white p-6 shadow-sm",children:[(0,r.jsxs)("span",{className:"inline-flex items-center justify-center px-3 py-1 mb-4 text-xs font-semibold tracking-wide uppercase rounded-full bg-violet-100 text-violet-700",children:["Step ",t+1]}),(0,r.jsx)("span",{className:"mb-4 flex h-14 w-14 items-center justify-center rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 text-white",children:(0,r.jsx)(n,{fontSize:26,"aria-hidden":!0})}),(0,r.jsx)("h3",{className:"mb-2 text-lg font-semibold text-gray-900",children:a}),(0,r.jsx)("p",{className:"text-sm leading-6 text-gray-500",children:o})]},a)})})]})}),(0,r.jsx)("section",{className:"py-16 bg-white",id:"faq",children:(0,r.jsxs)("div",{className:"container px-4 mx-auto md:px-8 max-w-3xl",children:[(0,r.jsx)("h2",{className:"mb-8 text-2xl font-bold text-center text-gray-900 md:text-3xl",children:"Frequently asked questions"}),(0,r.jsx)(x.UQ,{type:"single",collapsible:!0,className:"w-full",onValueChange:o,children:N.map((e,t)=>(0,r.jsxs)(x.Qd,{value:"faq-".concat(t),children:[(0,r.jsx)(x.o4,{className:"text-left text-base font-medium text-gray-900 min-h-11",children:e.name}),(0,r.jsx)(x.vF,{className:"text-sm leading-6 text-gray-600",children:e.acceptedA

1nswerText})]},e.name))})]})}),(0,r.jsx)(f.t,{checked:t,setChecked:n}),(0,r.jsx)("section",{className:"py-20 bg-gray-900 text-white",children:(0,r.jsxs)("div",{className:"text-center ".concat(b.kt),children:[(0,r.jsx)("h2",{className:"mb-3 text-2xl font-bold md:text-3xl",children:"Export the MP4 from the editor"}),(0,r.jsx)("p",{className:"mb-8 text-gray-400 max-w-md mx-auto",children:"Start Designing opens the same editor. Upload the audio there, then download the video."}),(0,r.jsx)(E,{trackingId:"".concat(w,"_final_cta"),isMobile:e,className:"shadow-lg shadow-blue-500/25"})]})}),(0,r.jsx)("section",{className:"py-12 bg-white border-t border-gray-100",children:(0,r.jsxs)("div",{className:"container px-4 mx-auto md:px-8 max-w-3xl",children:[(0,r.jsx)("h2",{className:"mb-4 text-center text-sm font-medium text-gray-900",children:"Related pages"}),(0,r.jsx)("ul",{className:"flex flex-col gap-3 sm:flex-row sm:justify-center",children:_.map(e=>{let{href:t,label:n}=e;return(0,r.jsx)("li",{children:(0,r.jsx)(s(),{href:t,prefetch:!1,className:"inline-flex min-h-11 items-center rounded-lg border border-gray-200 px-4 text-sm font-medium text-violet-700 hover:bg-violet-50",children:n})},t)})})]})})]}),(0,r.jsx)(d.D,{})]})};M.displayName="SoundWaveVideoPage";var S=!0},17998:function(e,t,n){"use strict";function r(e,t,{checkForDefaultPrevented:n=!0}={}){return function(r){if(e?.(r),!1===n||!r.defaultPrevented)return t?.(r)}}n.d(t,{M:function(){return r}})},62656:function(e,t,n){"use strict";n.d(t,{F:function(){return o},e:function(){return s}});var r=n(2784);function a(e,t){if("function"==typeof e)return e(t);null!=e&&(e.current=t)}function o(...e){return t=>{let n=!1,r=e.map(e=>{let r=a(e,t);return n||"function"!=typeof r||(n=!0),r});if(n)return()=>{for(let t=0;t<r.length;t++){let n=r[t];"function"==typeof n?n():a(e[t],null)}}}}function s(...e){return r.useCallback(o(...e),e)}},92211:function(e,t,n){"use strict";n.d(t,{b:function(){return o}});var r=n(2784),a=n(52322);function o(e,t=[]){let n=[],o=()=>{let t=n.map(e=>r.createContext(e));return function(n){let a=n?.[e]||t;return r.useMemo(()=>({[`__scope${e}`]:{...n,[e]:a}}),[n,a])}};return o.scopeName=e,[function(t,o){let s=r.createContext(o),i=n.length;n=[...n,o];let l=t=>{let{scope:n,children:o,...l}=t,c=n?.[e]?.[i]||s,d=r.useMemo(()=>l,Object.values(l));return(0,a.jsx)(c.Provider,{value:d,children:o})};return l.displayName=t+"Provider",[l,function(n,a){let l=a?.[e]?.[i]||s,c=r.useContext(l);if(c)return c;if(void 0!==o)return o;throw Error(`\`${n}\` must be used within \`${t}\``)}]},function(...e){let t=e[0];if(1===e.length)return t;let n=()=>{let n=e.map(e=>({useScope:e(),scopeName:e.scopeName}));return function(e){let a=n.reduce((t,{useScope:n,scopeName:r})=>{let a=n(e)[`__scope${r}`];return{...t,...a}},{});return r.useMemo(()=>({[`__scope${t.scopeName}`]:a}),[a])}};return n.scopeName=t.scopeName,n}(o,...t)]}},59241:function(e,t,n){"use strict";n.d(t,{gm:function(){return o}});var r=n(2784);n(52322);var a=r.createContext(void 0);function o(e){let t=r.useContext(a);return e||t||"ltr"}},23372:function(e,t,n){"use strict";n.d(t,{M:function(){return l}});var r,a=n(2784),o=n(61644),s=(r||(r=n.t(a,2)))["useId".toString()]||(()=>void 0),i=0;function l(e){let[t,n]=a.useState(s());return(0,o.b)(()=>{e||n(e=>e??String(i++))},[e]),e||(t?`radix-${t}`:"")}},79616:function(e,t,n){"use strict";n.d(t,{z:function(){return s}});var r=n(2784),a=n(62656),o=n(61644),s=e=>{let t,n;let{present:s,children:l}=e,c=function(e){var t,n;let[a,s]=r.useState(),l=r.useRef({}),c=r.useRef(e),d=r.useRef("none"),[u,m]=(t=e?"mounted":"unmounted",n={mounted:{UNMOUNT:"unmounted",ANIMATION_OUT:"unmountSuspended"},unmountSuspended:{MOUNT:"mounted",ANIMATION_END:"unmounted"},unmounted:{MOUNT:"mounted"}},r.useReducer((e,t)=>n[e][t]??e,t));return r.useEffect(()=>{let e=i(l.current);d.current="mounted"===u?e:"none"},[u]),(0,o.b)(()=>{let t=l.current,n=c.current;if(n!==e){let r=d.current,a=i(t);e?m("MOUNT"):"none"===a||t?.display==="none"?m("UNMOUNT"):n&&r!==a?m("ANIMATION_OUT"):m("UNMOUNT"),c.current=e}},[e,m]),(0,o.b)(()=>

1{if(a){let e;let t=a.ownerDocument.defaultView??window,n=n=>{let r=i(l.current).includes(n.animationName);if(n.target===a&&r&&(m("ANIMATION_END"),!c.current)){let n=a.style.animationFillMode;a.style.animationFillMode="forwards",e=t.setTimeout(()=>{"forwards"===a.style.animationFillMode&&(a.style.animationFillMode=n)})}},r=e=>{e.target===a&&(d.current=i(l.current))};return a.addEventListener("animationstart",r),a.addEventListener("animationcancel",n),a.addEventListener("animationend",n),()=>{t.clearTimeout(e),a.removeEventListener("animationstart",r),a.removeEventListener("animationcancel",n),a.removeEventListener("animationend",n)}}m("ANIMATION_END")},[a,m]),{isPresent:["mounted","unmountSuspended"].includes(u),ref:r.useCallback(e=>{e&&(l.current=getComputedStyle(e)),s(e)},[])}}(s),d="function"==typeof l?l({present:c.isPresent}):r.Children.only(l),u=(0,a.e)(c.ref,(t=Object.getOwnPropertyDescriptor(d.props,"ref")?.get)&&"isReactWarning"in t&&t.isReactWarning?d.ref:(t=Object.getOwnPropertyDescriptor(d,"ref")?.get)&&"isReactWarning"in t&&t.isReactWarning?d.props.ref:d.props.ref||d.ref);return"function"==typeof l||c.isPresent?r.cloneElement(d,{ref:u}):null};function i(e){return e?.animationName||"none"}s.displayName="Presence"},27757:function(e,t,n){"use strict";n.d(t,{W:function(){return a}});var r=n(2784);function a(e){let t=r.useRef(e);return r.useEffect(()=>{t.current=e}),r.useMemo(()=>(...e)=>t.current?.(...e),[])}},87695:function(e,t,n){"use strict";n.d(t,{T:function(){return o}});var r=n(2784),a=n(27757);function o({prop:e,defaultProp:t,onChange:n=()=>{}}){let[o,s]=function({defaultProp:e,onChange:t}){let n=r.useState(e),[o]=n,s=r.useRef(o),i=(0,a.W)(t);return r.useEffect(()=>{s.current!==o&&(i(o),s.current=o)},[o,s,i]),n}({defaultProp:t,onChange:n}),i=void 0!==e,l=i?e:o,c=(0,a.W)(n);return[l,r.useCallback(t=>{if(i){let n="function"==typeof t?t(e):t;n!==e&&c(n)}else s(t)},[i,e,s,c])]}},61644:function(e,t,n){"use strict";n.d(t,{b:function(){return a}});var r=n(2784),a=globalThis?.document?r.useLayoutEffect:()=>{}}},function(e){e.O(0,[3365,8127,2602,4396,5647,8638,4358,9037,6170,2876,5340,8948,227,2778,2888,9774,179],function(){return e(e.s=34301)}),_N_E=e.O()}]);