[{"data":1,"prerenderedAt":448},["ShallowReactive",2],{"navigation_docs":3,"-vue-composables":81,"-vue-composables-surround":445},[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":77,"body":83,"description":438,"extension":439,"links":440,"meta":441,"navigation":442,"path":78,"seo":443,"stem":79,"__hash__":444},"docs\u002F3.vue\u002F3.composables.md",{"type":84,"value":85,"toc":434},"minimark",[86,100,107,110,275,281,307,416,430],[87,88,89,90,94,95,99],"p",{},"The data pipelines are also available as Vue composables, if you want to drive your own\nrendering or combine them with ",[91,92,93],"code",{},"mode=\"external\"",". They wrap the framework-agnostic\n",[96,97,98],"a",{"href":59},"core audio engines"," and surface their state as refs.",[101,102,104],"h2",{"id":103},"uselocalaudiooptions",[91,105,106],{},"useLocalAudio(options?)",[87,108,109],{},"Captures mic or display audio and runs the WASM FFT.",[111,112,117],"pre",{"className":113,"code":114,"language":115,"meta":116,"style":116},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const {\n  fftData,        \u002F\u002F Ref\u003CUint8Array> — magnitudes 0–255\n  isActive, sourceType, devices, activeDeviceId,\n  getDevices,     \u002F\u002F () => Promise\u003CAudioDevice[]>\n  start,          \u002F\u002F (deviceId?) => Promise\u003Cvoid>  — microphone\n  startDisplay,   \u002F\u002F () => Promise\u003Cvoid>           — tab\u002Fsystem audio\n  stop\n} = useLocalAudio({ fftSize: 2048, bins: 80, startFreq: 100, endFreq: 18000 })\n","ts","",[91,118,119,132,146,170,181,192,203,209],{"__ignoreMap":116},[120,121,124,128],"span",{"class":122,"line":123},"line",1,[120,125,127],{"class":126},"spNyl","const",[120,129,131],{"class":130},"sMK4o"," {\n",[120,133,135,139,142],{"class":122,"line":134},2,[120,136,138],{"class":137},"sTEyZ","  fftData",[120,140,141],{"class":130},",",[120,143,145],{"class":144},"sHwdD","        \u002F\u002F Ref\u003CUint8Array> — magnitudes 0–255\n",[120,147,149,152,154,157,159,162,164,167],{"class":122,"line":148},3,[120,150,151],{"class":137},"  isActive",[120,153,141],{"class":130},[120,155,156],{"class":137}," sourceType",[120,158,141],{"class":130},[120,160,161],{"class":137}," devices",[120,163,141],{"class":130},[120,165,166],{"class":137}," activeDeviceId",[120,168,169],{"class":130},",\n",[120,171,173,176,178],{"class":122,"line":172},4,[120,174,175],{"class":137},"  getDevices",[120,177,141],{"class":130},[120,179,180],{"class":144},"     \u002F\u002F () => Promise\u003CAudioDevice[]>\n",[120,182,184,187,189],{"class":122,"line":183},5,[120,185,186],{"class":137},"  start",[120,188,141],{"class":130},[120,190,191],{"class":144},"          \u002F\u002F (deviceId?) => Promise\u003Cvoid>  — microphone\n",[120,193,195,198,200],{"class":122,"line":194},6,[120,196,197],{"class":137},"  startDisplay",[120,199,141],{"class":130},[120,201,202],{"class":144},"   \u002F\u002F () => Promise\u003Cvoid>           — tab\u002Fsystem audio\n",[120,204,206],{"class":122,"line":205},7,[120,207,208],{"class":137},"  stop\n",[120,210,212,215,218,222,225,228,232,235,239,241,244,246,249,251,254,256,259,261,264,266,269,272],{"class":122,"line":211},8,[120,213,214],{"class":130},"}",[120,216,217],{"class":130}," =",[120,219,221],{"class":220},"s2Zo4"," useLocalAudio",[120,223,224],{"class":137},"(",[120,226,227],{"class":130},"{",[120,229,231],{"class":230},"swJcz"," fftSize",[120,233,234],{"class":130},":",[120,236,238],{"class":237},"sbssI"," 2048",[120,240,141],{"class":130},[120,242,243],{"class":230}," bins",[120,245,234],{"class":130},[120,247,248],{"class":237}," 80",[120,250,141],{"class":130},[120,252,253],{"class":230}," startFreq",[120,255,234],{"class":130},[120,257,258],{"class":237}," 100",[120,260,141],{"class":130},[120,262,263],{"class":230}," endFreq",[120,265,234],{"class":130},[120,267,268],{"class":237}," 18000",[120,270,271],{"class":130}," }",[120,273,274],{"class":137},")\n",[101,276,278],{"id":277},"usewebsocketfftoptions",[91,279,280],{},"useWebSocketFft(options?)",[87,282,283,284,288,289,292,293,296,297,299,300,303,304,306],{},"Connects to a WebSocket that streams ",[285,286,287],"strong",{},"raw PCM"," and computes the FFT in-browser via WASM\n(distinct from the component's ",[91,290,291],{},"websocket"," mode, which expects ",[285,294,295],{},"pre-computed"," FFT — see\n",[96,298,36],{"href":37},"). Feed its ",[91,301,302],{},"fftData"," into the component with\n",[91,305,93],{},".",[111,308,310],{"className":113,"code":309,"language":115,"meta":116,"style":116},"const {\n  fftData, fftDataLeft, fftDataRight, isConnected,\n  connect,        \u002F\u002F (url) => void\n  disconnect,\n  processSamples  \u002F\u002F (Float32Array) => void — feed PCM manually\n} = useWebSocketFft({ fftSize: 2048, bins: 80, overlap: 0.5, autoReconnect: true })\n",[91,311,312,318,339,349,356,364],{"__ignoreMap":116},[120,313,314,316],{"class":122,"line":123},[120,315,127],{"class":126},[120,317,131],{"class":130},[120,319,320,322,324,327,329,332,334,337],{"class":122,"line":134},[120,321,138],{"class":137},[120,323,141],{"class":130},[120,325,326],{"class":137}," fftDataLeft",[120,328,141],{"class":130},[120,330,331],{"class":137}," fftDataRight",[120,333,141],{"class":130},[120,335,336],{"class":137}," isConnected",[120,338,169],{"class":130},[120,340,341,344,346],{"class":122,"line":148},[120,342,343],{"class":137},"  connect",[120,345,141],{"class":130},[120,347,348],{"class":144},"        \u002F\u002F (url) => void\n",[120,350,351,354],{"class":122,"line":172},[120,352,353],{"class":137},"  disconnect",[120,355,169],{"class":130},[120,357,358,361],{"class":122,"line":183},[120,359,360],{"class":137},"  processSamples  ",[120,362,363],{"class":144},"\u002F\u002F (Float32Array) => void — feed PCM manually\n",[120,365,366,368,370,373,375,377,379,381,383,385,387,389,391,393,396,398,401,403,406,408,412,414],{"class":122,"line":194},[120,367,214],{"class":130},[120,369,217],{"class":130},[120,371,372],{"class":220}," useWebSocketFft",[120,374,224],{"class":137},[120,376,227],{"class":130},[120,378,231],{"class":230},[120,380,234],{"class":130},[120,382,238],{"class":237},[120,384,141],{"class":130},[120,386,243],{"class":230},[120,388,234],{"class":130},[120,390,248],{"class":237},[120,392,141],{"class":130},[120,394,395],{"class":230}," overlap",[120,397,234],{"class":130},[120,399,400],{"class":237}," 0.5",[120,402,141],{"class":130},[120,404,405],{"class":230}," autoReconnect",[120,407,234],{"class":130},[120,409,411],{"class":410},"sfNiH"," true",[120,413,271],{"class":130},[120,415,274],{"class":137},[87,417,418,419,422,423,429],{},"The raw WASM FFT processor is also exported from ",[91,420,421],{},"fft-visualizer-vue\u002Fwasm"," for direct use\n(re-exported from ",[96,424,426],{"href":425},"\u002Fcore\u002Faudio-engines#raw-wasm-processor",[91,427,428],{},"fft-visualizer-core\u002Fwasm",").",[431,432,433],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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 .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 .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 .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 .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":116,"searchDepth":134,"depth":134,"links":435},[436,437],{"id":103,"depth":134,"text":106},{"id":277,"depth":134,"text":280},"Standalone Vue composables that wrap the core audio engines as refs.","md",null,{},{"icon":80},{"title":77,"description":438},"5n_wDa1r7FZCx4FDREcs1LQEAlvNwNAr15axWkOdyXs",[446,440],{"title":72,"path":73,"stem":74,"description":447,"icon":75,"children":-1},"The Vue component API — props, emitted events, exposed methods, and slots.",1784963433391]