[{"data":1,"prerenderedAt":507},["ShallowReactive",2],{"navigation_docs":3,"-core-installation":81,"-core-installation-surround":502},[4,41,62],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":40},"Guide","i-lucide-book-open","\u002Fguide","1.guide",[10,15,20,25,30,35],{"title":11,"path":12,"stem":13,"icon":14},"Introduction","\u002Fguide\u002Fintroduction","1.guide\u002F1.introduction","i-lucide-house",{"title":16,"path":17,"stem":18,"icon":19},"How it works","\u002Fguide\u002Fhow-it-works","1.guide\u002F2.how-it-works","i-lucide-workflow",{"title":21,"path":22,"stem":23,"icon":24},"Data modes","\u002Fguide\u002Fdata-modes","1.guide\u002F3.data-modes","i-lucide-git-fork",{"title":26,"path":27,"stem":28,"icon":29},"Options","\u002Fguide\u002Foptions","1.guide\u002F4.options","i-lucide-settings-2",{"title":31,"path":32,"stem":33,"icon":34},"Gradients","\u002Fguide\u002Fgradients","1.guide\u002F5.gradients","i-lucide-palette",{"title":36,"path":37,"stem":38,"icon":39},"WebSocket protocol","\u002Fguide\u002Fwebsocket-protocol","1.guide\u002F6.websocket-protocol","i-lucide-radio",false,{"title":42,"icon":43,"path":44,"stem":45,"children":46,"page":40},"Core","i-lucide-box","\u002Fcore","2.core",[47,52,57],{"title":48,"path":49,"stem":50,"icon":51},"Installation","\u002Fcore\u002Finstallation","2.core\u002F1.installation","i-lucide-download",{"title":53,"path":54,"stem":55,"icon":56},"API reference","\u002Fcore\u002Fapi","2.core\u002F2.api","i-lucide-code",{"title":58,"path":59,"stem":60,"icon":61},"Audio engines","\u002Fcore\u002Faudio-engines","2.core\u002F3.audio-engines","i-lucide-audio-lines",{"title":63,"icon":64,"path":65,"stem":66,"children":67,"page":40},"Vue","i-simple-icons-vuedotjs","\u002Fvue","3.vue",[68,71,76],{"title":48,"path":69,"stem":70,"icon":51},"\u002Fvue\u002Finstallation","3.vue\u002F1.installation",{"title":72,"path":73,"stem":74,"icon":75},"Props, events & methods","\u002Fvue\u002Fprops","3.vue\u002F2.props","i-lucide-sliders-horizontal",{"title":77,"path":78,"stem":79,"icon":80},"Composables","\u002Fvue\u002Fcomposables","3.vue\u002F3.composables","i-lucide-plug",{"id":82,"title":48,"body":83,"description":495,"extension":496,"links":497,"meta":498,"navigation":499,"path":49,"seo":500,"stem":50,"__hash__":501},"docs\u002F2.core\u002F1.installation.md",{"type":84,"value":85,"toc":490},"minimark",[86,105,110,167,171,182,371,378,432,446,468,471,486],[87,88,89,93,94,97,98,104],"p",{},[90,91,92],"code",{},"fft-visualizer-core"," is the framework-agnostic engine: a plain TypeScript class that renders\nonto a ",[90,95,96],{},"\u003Ccanvas>"," you provide. Use it directly in vanilla JS\u002FTS, or as the foundation under a\nframework wrapper like ",[99,100,101],"a",{"href":69},[90,102,103],{},"fft-visualizer-vue",".",[106,107,109],"h2",{"id":108},"install","Install",[111,112,113,138,153],"code-group",{},[114,115,121],"pre",{"className":116,"code":117,"filename":118,"language":119,"meta":120,"style":120},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","pnpm add fft-visualizer-core\n","pnpm","bash","",[90,122,123],{"__ignoreMap":120},[124,125,128,131,135],"span",{"class":126,"line":127},"line",1,[124,129,118],{"class":130},"sBMFI",[124,132,134],{"class":133},"sfazB"," add",[124,136,137],{"class":133}," fft-visualizer-core\n",[114,139,142],{"className":116,"code":140,"filename":141,"language":119,"meta":120,"style":120},"npm install fft-visualizer-core\n","npm",[90,143,144],{"__ignoreMap":120},[124,145,146,148,151],{"class":126,"line":127},[124,147,141],{"class":130},[124,149,150],{"class":133}," install",[124,152,137],{"class":133},[114,154,157],{"className":116,"code":155,"filename":156,"language":119,"meta":120,"style":120},"yarn add fft-visualizer-core\n","yarn",[90,158,159],{"__ignoreMap":120},[124,160,161,163,165],{"class":126,"line":127},[124,162,156],{"class":130},[124,164,134],{"class":133},[124,166,137],{"class":133},[106,168,170],{"id":169},"quick-start","Quick start",[87,172,173,174,178,179,181],{},"The fastest way to see something is ",[175,176,177],"strong",{},"local mode"," — capture the microphone and visualize it\nentirely in the browser, no backend required. Give the class a ",[90,180,96],{}," and an options\nobject:",[114,183,187],{"className":184,"code":185,"language":186,"meta":120,"style":120},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { FFTVisualizer } from 'fft-visualizer-core'\n\nconst canvas = document.querySelector('canvas')!\nconst viz = new FFTVisualizer(canvas, {\n  mode: 'local',\n  bands: 40,\n  gradient: 'aurora'\n})\n\n\u002F\u002F later, when you're done:\nviz.destroy()\n","ts",[90,188,189,217,224,263,287,307,321,336,345,350,357],{"__ignoreMap":120},[124,190,191,195,199,203,206,209,212,214],{"class":126,"line":127},[124,192,194],{"class":193},"s7zQu","import",[124,196,198],{"class":197},"sMK4o"," {",[124,200,202],{"class":201},"sTEyZ"," FFTVisualizer",[124,204,205],{"class":197}," }",[124,207,208],{"class":193}," from",[124,210,211],{"class":197}," '",[124,213,92],{"class":133},[124,215,216],{"class":197},"'\n",[124,218,220],{"class":126,"line":219},2,[124,221,223],{"emptyLinePlaceholder":222},true,"\n",[124,225,227,231,234,237,240,242,246,249,252,255,257,260],{"class":126,"line":226},3,[124,228,230],{"class":229},"spNyl","const",[124,232,233],{"class":201}," canvas ",[124,235,236],{"class":197},"=",[124,238,239],{"class":201}," document",[124,241,104],{"class":197},[124,243,245],{"class":244},"s2Zo4","querySelector",[124,247,248],{"class":201},"(",[124,250,251],{"class":197},"'",[124,253,254],{"class":133},"canvas",[124,256,251],{"class":197},[124,258,259],{"class":201},")",[124,261,262],{"class":197},"!\n",[124,264,266,268,271,273,276,278,281,284],{"class":126,"line":265},4,[124,267,230],{"class":229},[124,269,270],{"class":201}," viz ",[124,272,236],{"class":197},[124,274,275],{"class":197}," new",[124,277,202],{"class":244},[124,279,280],{"class":201},"(canvas",[124,282,283],{"class":197},",",[124,285,286],{"class":197}," {\n",[124,288,290,294,297,299,302,304],{"class":126,"line":289},5,[124,291,293],{"class":292},"swJcz","  mode",[124,295,296],{"class":197},":",[124,298,211],{"class":197},[124,300,301],{"class":133},"local",[124,303,251],{"class":197},[124,305,306],{"class":197},",\n",[124,308,310,313,315,319],{"class":126,"line":309},6,[124,311,312],{"class":292},"  bands",[124,314,296],{"class":197},[124,316,318],{"class":317},"sbssI"," 40",[124,320,306],{"class":197},[124,322,324,327,329,331,334],{"class":126,"line":323},7,[124,325,326],{"class":292},"  gradient",[124,328,296],{"class":197},[124,330,211],{"class":197},[124,332,333],{"class":133},"aurora",[124,335,216],{"class":197},[124,337,339,342],{"class":126,"line":338},8,[124,340,341],{"class":197},"}",[124,343,344],{"class":201},")\n",[124,346,348],{"class":126,"line":347},9,[124,349,223],{"emptyLinePlaceholder":222},[124,351,353],{"class":126,"line":352},10,[124,354,356],{"class":355},"sHwdD","\u002F\u002F later, when you're done:\n",[124,358,360,363,365,368],{"class":126,"line":359},11,[124,361,362],{"class":201},"viz",[124,364,104],{"class":197},[124,366,367],{"class":244},"destroy",[124,369,370],{"class":201},"()\n",[87,372,373,374,377],{},"The visualizer sizes itself to the canvas's ",[175,375,376],{},"parent element"," and observes it for layout\nchanges, so give the container a height:",[114,379,383],{"className":380,"code":381,"language":382,"meta":120,"style":120},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv style=\"width: 100%; height: 240px\">\n  \u003Ccanvas>\u003C\u002Fcanvas>\n\u003C\u002Fdiv>\n","html",[90,384,385,409,423],{"__ignoreMap":120},[124,386,387,390,393,396,398,401,404,406],{"class":126,"line":127},[124,388,389],{"class":197},"\u003C",[124,391,392],{"class":292},"div",[124,394,395],{"class":229}," style",[124,397,236],{"class":197},[124,399,400],{"class":197},"\"",[124,402,403],{"class":133},"width: 100%; height: 240px",[124,405,400],{"class":197},[124,407,408],{"class":197},">\n",[124,410,411,414,416,419,421],{"class":126,"line":219},[124,412,413],{"class":197},"  \u003C",[124,415,254],{"class":292},[124,417,418],{"class":197},">\u003C\u002F",[124,420,254],{"class":292},[124,422,408],{"class":197},[124,424,425,428,430],{"class":126,"line":226},[124,426,427],{"class":197},"\u003C\u002F",[124,429,392],{"class":292},[124,431,408],{"class":197},[87,433,434,435,437,438,441,442,445],{},"Construction connects automatically (local mode prompts for microphone permission). See the\n",[99,436,53],{"href":54}," for ",[90,439,440],{},"connect()"," \u002F ",[90,443,444],{},"disconnect()",", live option updates, events, and\nteardown.",[447,448,449,450,453,454,459,460,463,464,467],"note",{},"The Rust\u002FWASM FFT processor is ",[175,451,452],{},"lazy-loaded"," — it's only fetched the first time you capture\naudio locally (or use ",[99,455,456],{"href":59},[90,457,458],{},"createWebSocketFft","). Pure ",[90,461,462],{},"websocket"," \u002F\n",[90,465,466],{},"external"," usage never downloads it.",[106,469,21],{"id":470},"data-modes",[87,472,473,476,477,479,480,482,483,485],{},[90,474,475],{},"mode: 'local'"," is one of three ways to feed the visualizer — see ",[99,478,21],{"href":22},"\nfor ",[90,481,462],{}," (pre-computed FFT from a server) and ",[90,484,466],{}," (your own magnitudes).",[487,488,489],"style",{},"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 .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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}",{"title":120,"searchDepth":219,"depth":219,"links":491},[492,493,494],{"id":108,"depth":219,"text":109},{"id":169,"depth":219,"text":170},{"id":470,"depth":219,"text":21},"Install fft-visualizer-core and render a spectrum onto a canvas — no framework required.","md",null,{},{"icon":51},{"title":48,"description":495},"a3ipB_zgg5tO_1wpNdXxAHf8WgqsZICgbacPeX2bs98",[503,505],{"title":36,"path":37,"stem":38,"description":504,"icon":39,"children":-1},"The remote-FFT wire protocol the visualizer speaks in websocket mode, and the reference servers.",{"title":53,"path":54,"stem":55,"description":506,"icon":56,"children":-1},"The FFTVisualizer class — constructor, getters, methods, events, and helpers.",1784963432760]