[{"data":1,"prerenderedAt":439},["ShallowReactive",2],{"navigation_docs":3,"-getting-started-installation":47,"-getting-started-installation-surround":434},[4,26],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":25},"Getting Started","i-lucide-rocket","\u002Fgetting-started","1.getting-started",[10,15,20],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fgetting-started\u002Fintroduction","1.getting-started\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":21,"path":22,"stem":23,"icon":24},"Data modes","\u002Fgetting-started\u002Fdata-modes","1.getting-started\u002F3.data-modes","i-lucide-git-fork",false,{"title":27,"icon":28,"path":29,"stem":30,"children":31,"page":25},"Reference","i-lucide-book-open","\u002Freference","2.reference",[32,37,42],{"title":33,"path":34,"stem":35,"icon":36},"Props, events & methods","\u002Freference\u002Fprops","2.reference\u002F1.props","i-lucide-sliders-horizontal",{"title":38,"path":39,"stem":40,"icon":41},"Gradients","\u002Freference\u002Fgradients","2.reference\u002F2.gradients","i-lucide-palette",{"title":43,"path":44,"stem":45,"icon":46},"Composables & protocol","\u002Freference\u002Fcomposables","2.reference\u002F3.composables","i-lucide-plug",{"id":48,"title":16,"body":49,"description":427,"extension":428,"links":429,"meta":430,"navigation":431,"path":17,"seo":432,"stem":18,"__hash__":433},"docs\u002F1.getting-started\u002F2.installation.md",{"type":50,"value":51,"toc":422},"minimark",[52,57,115,119,128,368,374,378,382,392,419],[53,54,56],"h2",{"id":55},"install","Install",[58,59,60,86,101],"code-group",{},[61,62,68],"pre",{"className":63,"code":64,"filename":65,"language":66,"meta":67,"style":67},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add vue-fft-visualizer\n","pnpm","bash","",[69,70,71],"code",{"__ignoreMap":67},[72,73,76,79,83],"span",{"class":74,"line":75},"line",1,[72,77,65],{"class":78},"sBMFI",[72,80,82],{"class":81},"sfazB"," add",[72,84,85],{"class":81}," vue-fft-visualizer\n",[61,87,90],{"className":63,"code":88,"filename":89,"language":66,"meta":67,"style":67},"npm install vue-fft-visualizer\n","npm",[69,91,92],{"__ignoreMap":67},[72,93,94,96,99],{"class":74,"line":75},[72,95,89],{"class":78},[72,97,98],{"class":81}," install",[72,100,85],{"class":81},[61,102,105],{"className":63,"code":103,"filename":104,"language":66,"meta":67,"style":67},"yarn add vue-fft-visualizer\n","yarn",[69,106,107],{"__ignoreMap":67},[72,108,109,111,113],{"class":74,"line":75},[72,110,104],{"class":78},[72,112,82],{"class":81},[72,114,85],{"class":81},[53,116,118],{"id":117},"quick-start","Quick start",[120,121,122,123,127],"p",{},"The fastest way to see something is ",[124,125,126],"strong",{},"local mode"," — capture the microphone and visualize\nit entirely in the browser, no backend required:",[61,129,133],{"className":130,"code":131,"language":132,"meta":67,"style":67},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { FFTVisualizer } from 'vue-fft-visualizer'\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003Cdiv class=\"viz\">\n    \u003CFFTVisualizer mode=\"local\" :bands=\"40\" gradient=\"aurora\" \u002F>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cstyle>\n\u002F* The component fills its container — give it a height *\u002F\n.viz { width: 100%; height: 240px; }\n\u003C\u002Fstyle>\n","vue",[69,134,135,152,181,191,198,208,233,281,291,300,305,315,322,359],{"__ignoreMap":67},[72,136,137,141,145,149],{"class":74,"line":75},[72,138,140],{"class":139},"sMK4o","\u003C",[72,142,144],{"class":143},"swJcz","script",[72,146,148],{"class":147},"spNyl"," setup",[72,150,151],{"class":139},">\n",[72,153,155,159,162,166,169,172,175,178],{"class":74,"line":154},2,[72,156,158],{"class":157},"s7zQu","import",[72,160,161],{"class":139}," {",[72,163,165],{"class":164},"sTEyZ"," FFTVisualizer",[72,167,168],{"class":139}," }",[72,170,171],{"class":157}," from",[72,173,174],{"class":139}," '",[72,176,177],{"class":81},"vue-fft-visualizer",[72,179,180],{"class":139},"'\n",[72,182,184,187,189],{"class":74,"line":183},3,[72,185,186],{"class":139},"\u003C\u002F",[72,188,144],{"class":143},[72,190,151],{"class":139},[72,192,194],{"class":74,"line":193},4,[72,195,197],{"emptyLinePlaceholder":196},true,"\n",[72,199,201,203,206],{"class":74,"line":200},5,[72,202,140],{"class":139},[72,204,205],{"class":143},"template",[72,207,151],{"class":139},[72,209,211,214,217,220,223,226,229,231],{"class":74,"line":210},6,[72,212,213],{"class":139},"  \u003C",[72,215,216],{"class":143},"div",[72,218,219],{"class":147}," class",[72,221,222],{"class":139},"=",[72,224,225],{"class":139},"\"",[72,227,228],{"class":81},"viz",[72,230,225],{"class":139},[72,232,151],{"class":139},[72,234,236,239,242,245,247,249,252,254,257,259,261,264,266,269,271,273,276,278],{"class":74,"line":235},7,[72,237,238],{"class":139},"    \u003C",[72,240,241],{"class":143},"FFTVisualizer",[72,243,244],{"class":147}," mode",[72,246,222],{"class":139},[72,248,225],{"class":139},[72,250,251],{"class":81},"local",[72,253,225],{"class":139},[72,255,256],{"class":147}," :bands",[72,258,222],{"class":139},[72,260,225],{"class":139},[72,262,263],{"class":81},"40",[72,265,225],{"class":139},[72,267,268],{"class":147}," gradient",[72,270,222],{"class":139},[72,272,225],{"class":139},[72,274,275],{"class":81},"aurora",[72,277,225],{"class":139},[72,279,280],{"class":139}," \u002F>\n",[72,282,284,287,289],{"class":74,"line":283},8,[72,285,286],{"class":139},"  \u003C\u002F",[72,288,216],{"class":143},[72,290,151],{"class":139},[72,292,294,296,298],{"class":74,"line":293},9,[72,295,186],{"class":139},[72,297,205],{"class":143},[72,299,151],{"class":139},[72,301,303],{"class":74,"line":302},10,[72,304,197],{"emptyLinePlaceholder":196},[72,306,308,310,313],{"class":74,"line":307},11,[72,309,140],{"class":139},[72,311,312],{"class":143},"style",[72,314,151],{"class":139},[72,316,318],{"class":74,"line":317},12,[72,319,321],{"class":320},"sHwdD","\u002F* The component fills its container — give it a height *\u002F\n",[72,323,325,328,330,332,336,339,343,346,349,351,354,356],{"class":74,"line":324},13,[72,326,327],{"class":139},".",[72,329,228],{"class":78},[72,331,161],{"class":139},[72,333,335],{"class":334},"sqsOY"," width",[72,337,338],{"class":139},":",[72,340,342],{"class":341},"sbssI"," 100%",[72,344,345],{"class":139},";",[72,347,348],{"class":334}," height",[72,350,338],{"class":139},[72,352,353],{"class":341}," 240px",[72,355,345],{"class":139},[72,357,358],{"class":139}," }\n",[72,360,362,364,366],{"class":74,"line":361},14,[72,363,186],{"class":139},[72,365,312],{"class":143},[72,367,151],{"class":139},[120,369,370,371,327],{},"The browser prompts for microphone permission on mount. To capture tab or system audio\ninstead of the mic, set ",[69,372,373],{},"audio-source=\"display\"",[375,376,377],"note",{},"The component fills its container, so the wrapper needs a defined height.",[53,379,381],{"id":380},"nuxt","Nuxt",[120,383,384,385,388,389,338],{},"The component is SSR-safe (all browser access is deferred to ",[69,386,387],{},"onMounted","), but it renders\nnothing meaningful on the server — wrap it in ",[69,390,391],{},"\u003CClientOnly>",[61,393,395],{"className":130,"code":394,"language":132,"meta":67,"style":67},"\u003CClientOnly>\n  \u003CFFTVisualizer mode=\"local\" \u002F>\n\u003C\u002FClientOnly>\n",[69,396,397,406,411],{"__ignoreMap":67},[72,398,399,401,404],{"class":74,"line":75},[72,400,140],{"class":139},[72,402,403],{"class":143},"ClientOnly",[72,405,151],{"class":139},[72,407,408],{"class":74,"line":154},[72,409,410],{"class":164},"  \u003CFFTVisualizer mode=\"local\" \u002F>\n",[72,412,413,415,417],{"class":74,"line":183},[72,414,186],{"class":139},[72,416,403],{"class":143},[72,418,151],{"class":139},[312,420,421],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":67,"searchDepth":154,"depth":154,"links":423},[424,425,426],{"id":55,"depth":154,"text":56},{"id":117,"depth":154,"text":118},{"id":380,"depth":154,"text":381},"Install the package and render your first spectrum in under a minute.","md",null,{},{"icon":19},{"title":16,"description":427},"rKAdBXJgjG97-a09ZVVNEooiFyfxf8L98W8hVEoIPWg",[435,437],{"title":11,"path":12,"stem":13,"description":436,"icon":14,"children":-1},"What FFT Visualizer is, and why it renders differently from other audio visualizers.",{"title":21,"path":22,"stem":23,"description":438,"icon":24,"children":-1},"The three ways to get audio data into the visualizer — local, WebSocket, and external.",1784469223904]