[{"data":1,"prerenderedAt":1180},["ShallowReactive",2],{"navigation_docs":3,"-reference-props":47,"-reference-props-surround":1175},[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":33,"body":49,"description":1168,"extension":1169,"links":1170,"meta":1171,"navigation":1172,"path":34,"seo":1173,"stem":35,"__hash__":1174},"docs\u002F2.reference\u002F1.props.md",{"type":50,"value":51,"toc":1158},"minimark",[52,57,62,230,234,364,368,705,709,763,767,771,1118,1122,1154],[53,54,56],"h2",{"id":55},"props","Props",[58,59,61],"h3",{"id":60},"data-source","Data source",[63,64,65,84],"table",{},[66,67,68],"thead",{},[69,70,71,75,78,81],"tr",{},[72,73,74],"th",{},"Prop",[72,76,77],{},"Type",[72,79,80],{},"Default",[72,82,83],{},"Description",[85,86,87,109,131,151,171,194,210],"tbody",{},[69,88,89,96,101,106],{},[90,91,92],"td",{},[93,94,95],"code",{},"mode",[90,97,98],{},[93,99,100],{},"'websocket' | 'local' | 'external'",[90,102,103],{},[93,104,105],{},"'websocket'",[90,107,108],{},"Where FFT data comes from",[69,110,111,116,121,124],{},[90,112,113],{},[93,114,115],{},"websocketUrl",[90,117,118],{},[93,119,120],{},"string",[90,122,123],{},"—",[90,125,126,127,130],{},"WebSocket URL (used when ",[93,128,129],{},"mode=\"websocket\"",")",[69,132,133,138,143,145],{},[90,134,135],{},[93,136,137],{},"data",[90,139,140],{},[93,141,142],{},"Uint8Array",[90,144,123],{},[90,146,147,148,130],{},"External FFT magnitudes, mono (",[93,149,150],{},"mode=\"external\"",[69,152,153,162,166,168],{},[90,154,155,158,159],{},[93,156,157],{},"dataLeft"," \u002F ",[93,160,161],{},"dataRight",[90,163,164],{},[93,165,142],{},[90,167,123],{},[90,169,170],{},"External FFT magnitudes per channel (stereo external mode)",[69,172,173,178,183,188],{},[90,174,175],{},[93,176,177],{},"audioSource",[90,179,180],{},[93,181,182],{},"'mic' | 'display'",[90,184,185],{},[93,186,187],{},"'mic'",[90,189,190,191,130],{},"Local capture source (",[93,192,193],{},"mode=\"local\"",[69,195,196,201,205,207],{},[90,197,198],{},[93,199,200],{},"audioDeviceId",[90,202,203],{},[93,204,120],{},[90,206,123],{},[90,208,209],{},"Specific input device for local mic capture",[69,211,212,217,222,227],{},[90,213,214],{},[93,215,216],{},"autoReconnect",[90,218,219],{},[93,220,221],{},"boolean",[90,223,224],{},[93,225,226],{},"false",[90,228,229],{},"Reconnect the WebSocket with exponential backoff (1s→30s) after an unexpected drop",[58,231,233],{"id":232},"data-processing","Data processing",[63,235,236,248],{},[66,237,238],{},[69,239,240,242,244,246],{},[72,241,74],{},[72,243,77],{},[72,245,80],{},[72,247,83],{},[85,249,250,270,290,308,327,346],{},[69,251,252,257,262,267],{},[90,253,254],{},[93,255,256],{},"bands",[90,258,259],{},[93,260,261],{},"10 | 20 | 40 | 80",[90,263,264],{},[93,265,266],{},"80",[90,268,269],{},"Number of frequency bands displayed",[69,271,272,277,282,287],{},[90,273,274],{},[93,275,276],{},"noiseFloor",[90,278,279],{},[93,280,281],{},"number",[90,283,284],{},[93,285,286],{},"0",[90,288,289],{},"Cut magnitudes below this threshold (0–255)",[69,291,292,297,301,305],{},[90,293,294],{},[93,295,296],{},"smoothing",[90,298,299],{},[93,300,281],{},[90,302,303],{},[93,304,286],{},[90,306,307],{},"Temporal smoothing (0 = none, 0.9 = heavy)",[69,309,310,315,319,324],{},[90,311,312],{},[93,313,314],{},"showPeaks",[90,316,317],{},[93,318,221],{},[90,320,321],{},[93,322,323],{},"true",[90,325,326],{},"Show falling peak indicators",[69,328,329,334,338,343],{},[90,330,331],{},[93,332,333],{},"peakDecay",[90,335,336],{},[93,337,281],{},[90,339,340],{},[93,341,342],{},"0.997",[90,344,345],{},"Peak fall speed (0.99 = slow, 0.9 = fast)",[69,347,348,353,357,361],{},[90,349,350],{},[93,351,352],{},"stereo",[90,354,355],{},[93,356,221],{},[90,358,359],{},[93,360,226],{},[90,362,363],{},"Stereo mode: left channel top, right channel bottom",[58,365,367],{"id":366},"appearance","Appearance",[63,369,370,382],{},[66,371,372],{},[69,373,374,376,378,380],{},[72,375,74],{},[72,377,77],{},[72,379,80],{},[72,381,83],{},[85,383,384,402,429,447,465,484,503,521,539,557,576,596,616,639,665,687],{},[69,385,386,391,395,399],{},[90,387,388],{},[93,389,390],{},"ledBars",[90,392,393],{},[93,394,221],{},[90,396,397],{},[93,398,226],{},[90,400,401],{},"LED segment effect",[69,403,404,409,414,419],{},[90,405,406],{},[93,407,408],{},"ledShape",[90,410,411],{},[93,412,413],{},"'segment' | 'meter'",[90,415,416],{},[93,417,418],{},"'segment'",[90,420,421,424,425,428],{},[93,422,423],{},"segment"," = fixed-pixel gap lines; ",[93,426,427],{},"meter"," = short, wide segments like a classic LED meter",[69,430,431,436,440,444],{},[90,432,433],{},[93,434,435],{},"lumiBars",[90,437,438],{},[93,439,221],{},[90,441,442],{},[93,443,226],{},[90,445,446],{},"Full-height bars whose brightness follows the level",[69,448,449,454,458,462],{},[90,450,451],{},[93,452,453],{},"radial",[90,455,456],{},[93,457,221],{},[90,459,460],{},[93,461,226],{},[90,463,464],{},"Circular spectrum: angle = frequency, radius = level",[69,466,467,472,476,481],{},[90,468,469],{},[93,470,471],{},"radialInnerRadius",[90,473,474],{},[93,475,281],{},[90,477,478],{},[93,479,480],{},"0.35",[90,482,483],{},"Radial: inner hole radius as a fraction of outer radius (0–0.9)",[69,485,486,491,495,500],{},[90,487,488],{},[93,489,490],{},"barSpace",[90,492,493],{},[93,494,281],{},[90,496,497],{},[93,498,499],{},"0.25",[90,501,502],{},"Gap between bars as a fraction of bar width (0–0.9)",[69,504,505,510,514,518],{},[90,506,507],{},[93,508,509],{},"reflexRatio",[90,511,512],{},[93,513,281],{},[90,515,516],{},[93,517,286],{},[90,519,520],{},"Mirrored reflection (0 = off). Linear mono: fraction of height (max 0.7). Radial: > 0 mirrors bars inward",[69,522,523,528,532,536],{},[90,524,525],{},[93,526,527],{},"reflexAlpha",[90,529,530],{},[93,531,281],{},[90,533,534],{},[93,535,499],{},[90,537,538],{},"Reflection brightness (0–1)",[69,540,541,546,550,554],{},[90,542,543],{},[93,544,545],{},"glow",[90,547,548],{},[93,549,281],{},[90,551,552],{},[93,553,286],{},[90,555,556],{},"Glow above the bar tops (0 = off, 1 = max)",[69,558,559,564,569,573],{},[90,560,561],{},[93,562,563],{},"rotation",[90,565,566],{},[93,567,568],{},"0 | 90 | 180 | 270",[90,570,571],{},[93,572,286],{},[90,574,575],{},"Rotate the whole visual clockwise, in degrees",[69,577,578,583,588,593],{},[90,579,580],{},[93,581,582],{},"gradient",[90,584,585],{},[93,586,587],{},"GradientName | GradientStop[]",[90,589,590],{},[93,591,592],{},"'classic'",[90,594,595],{},"Bar colors: a preset name or custom stops",[69,597,598,603,608,613],{},[90,599,600],{},[93,601,602],{},"gradientDirection",[90,604,605],{},[93,606,607],{},"'vertical' | 'horizontal'",[90,609,610],{},[93,611,612],{},"'vertical'",[90,614,615],{},"Gradient axis",[69,617,618,623,628,633],{},[90,619,620],{},[93,621,622],{},"colorMode",[90,624,625],{},[93,626,627],{},"'gradient' | 'bar-level'",[90,629,630],{},[93,631,632],{},"'gradient'",[90,634,635,638],{},[93,636,637],{},"bar-level"," colors each whole bar by its current level",[69,640,641,646,650,655],{},[90,642,643],{},[93,644,645],{},"background",[90,647,648],{},[93,649,120],{},[90,651,652],{},[93,653,654],{},"'#0a0a0a'",[90,656,657,658,158,661,664],{},"Background behind\u002Fbetween bars. Any CSS color, incl. ",[93,659,660],{},"'transparent'",[93,662,663],{},"rgba(…)"," (fixed at mount)",[69,666,667,672,676,680],{},[90,668,669],{},[93,670,671],{},"showStats",[90,673,674],{},[93,675,221],{},[90,677,678],{},[93,679,323],{},[90,681,682,683,686],{},"Show the small connection\u002Ffps overlay (overridable via the ",[93,684,685],{},"stats"," slot)",[69,688,689,694,698,702],{},[90,690,691],{},[93,692,693],{},"debug",[90,695,696],{},[93,697,221],{},[90,699,700],{},[93,701,226],{},[90,703,704],{},"Log connection\u002Fconfig diagnostics to the console",[53,706,708],{"id":707},"events","Events",[63,710,711,723],{},[66,712,713],{},[69,714,715,718,721],{},[72,716,717],{},"Event",[72,719,720],{},"Payload",[72,722,83],{},[85,724,725,737,749],{},[69,726,727,732,734],{},[90,728,729],{},[93,730,731],{},"connected",[90,733,123],{},[90,735,736],{},"Data source became active",[69,738,739,744,746],{},[90,740,741],{},[93,742,743],{},"disconnected",[90,745,123],{},[90,747,748],{},"Data source stopped",[69,750,751,756,760],{},[90,752,753],{},[93,754,755],{},"error",[90,757,758],{},[93,759,120],{},[90,761,762],{},"Error message (WS error, capture failure, WebGL init failure)",[53,764,766],{"id":765},"exposed-methods","Exposed methods",[768,769,770],"p",{},"Access via a template ref:",[772,773,778],"pre",{"className":774,"code":775,"language":776,"meta":777,"style":777},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cscript setup>\nimport { ref } from 'vue'\nconst viz = ref()\n\n\u002F\u002F Manual connection control\nviz.value.connect()\nviz.value.disconnect()\nviz.value.isConnected            \u002F\u002F Ref\u003Cboolean>\n\n\u002F\u002F Feed FFT frames imperatively (mode=\"external\") — copies the data, so it works\n\u002F\u002F even when you reuse one buffer each frame (unlike the reference-watched `data` prop)\nviz.value.feedData(mono)               \u002F\u002F Uint8Array\nviz.value.feedData(mono, left, right)  \u002F\u002F stereo\n\n\u002F\u002F Local-audio device management\nawait viz.value.getAudioDevices()   \u002F\u002F Promise\u003CAudioDevice[]> (prompts for mic permission)\nviz.value.audioDevices              \u002F\u002F Ref\u003CAudioDevice[]>\nviz.value.activeAudioDeviceId       \u002F\u002F Ref\u003Cstring | undefined>\n\u003C\u002Fscript>\n\n\u003Ctemplate>\n  \u003CFFTVisualizer ref=\"viz\" mode=\"local\" \u002F>\n\u003C\u002Ftemplate>\n","vue","",[93,779,780,800,829,847,854,861,880,896,913,918,924,930,950,980,985,991,1015,1032,1049,1059,1064,1074,1109],{"__ignoreMap":777},[781,782,785,789,793,797],"span",{"class":783,"line":784},"line",1,[781,786,788],{"class":787},"sMK4o","\u003C",[781,790,792],{"class":791},"swJcz","script",[781,794,796],{"class":795},"spNyl"," setup",[781,798,799],{"class":787},">\n",[781,801,803,807,810,814,817,820,823,826],{"class":783,"line":802},2,[781,804,806],{"class":805},"s7zQu","import",[781,808,809],{"class":787}," {",[781,811,813],{"class":812},"sTEyZ"," ref",[781,815,816],{"class":787}," }",[781,818,819],{"class":805}," from",[781,821,822],{"class":787}," '",[781,824,776],{"class":825},"sfazB",[781,827,828],{"class":787},"'\n",[781,830,832,835,838,841,844],{"class":783,"line":831},3,[781,833,834],{"class":795},"const",[781,836,837],{"class":812}," viz ",[781,839,840],{"class":787},"=",[781,842,813],{"class":843},"s2Zo4",[781,845,846],{"class":812},"()\n",[781,848,850],{"class":783,"line":849},4,[781,851,853],{"emptyLinePlaceholder":852},true,"\n",[781,855,857],{"class":783,"line":856},5,[781,858,860],{"class":859},"sHwdD","\u002F\u002F Manual connection control\n",[781,862,864,867,870,873,875,878],{"class":783,"line":863},6,[781,865,866],{"class":812},"viz",[781,868,869],{"class":787},".",[781,871,872],{"class":812},"value",[781,874,869],{"class":787},[781,876,877],{"class":843},"connect",[781,879,846],{"class":812},[781,881,883,885,887,889,891,894],{"class":783,"line":882},7,[781,884,866],{"class":812},[781,886,869],{"class":787},[781,888,872],{"class":812},[781,890,869],{"class":787},[781,892,893],{"class":843},"disconnect",[781,895,846],{"class":812},[781,897,899,901,903,905,907,910],{"class":783,"line":898},8,[781,900,866],{"class":812},[781,902,869],{"class":787},[781,904,872],{"class":812},[781,906,869],{"class":787},[781,908,909],{"class":812},"isConnected            ",[781,911,912],{"class":859},"\u002F\u002F Ref\u003Cboolean>\n",[781,914,916],{"class":783,"line":915},9,[781,917,853],{"emptyLinePlaceholder":852},[781,919,921],{"class":783,"line":920},10,[781,922,923],{"class":859},"\u002F\u002F Feed FFT frames imperatively (mode=\"external\") — copies the data, so it works\n",[781,925,927],{"class":783,"line":926},11,[781,928,929],{"class":859},"\u002F\u002F even when you reuse one buffer each frame (unlike the reference-watched `data` prop)\n",[781,931,933,935,937,939,941,944,947],{"class":783,"line":932},12,[781,934,866],{"class":812},[781,936,869],{"class":787},[781,938,872],{"class":812},[781,940,869],{"class":787},[781,942,943],{"class":843},"feedData",[781,945,946],{"class":812},"(mono)               ",[781,948,949],{"class":859},"\u002F\u002F Uint8Array\n",[781,951,953,955,957,959,961,963,966,969,972,974,977],{"class":783,"line":952},13,[781,954,866],{"class":812},[781,956,869],{"class":787},[781,958,872],{"class":812},[781,960,869],{"class":787},[781,962,943],{"class":843},[781,964,965],{"class":812},"(mono",[781,967,968],{"class":787},",",[781,970,971],{"class":812}," left",[781,973,968],{"class":787},[781,975,976],{"class":812}," right)  ",[781,978,979],{"class":859},"\u002F\u002F stereo\n",[781,981,983],{"class":783,"line":982},14,[781,984,853],{"emptyLinePlaceholder":852},[781,986,988],{"class":783,"line":987},15,[781,989,990],{"class":859},"\u002F\u002F Local-audio device management\n",[781,992,994,997,1000,1002,1004,1006,1009,1012],{"class":783,"line":993},16,[781,995,996],{"class":805},"await",[781,998,999],{"class":812}," viz",[781,1001,869],{"class":787},[781,1003,872],{"class":812},[781,1005,869],{"class":787},[781,1007,1008],{"class":843},"getAudioDevices",[781,1010,1011],{"class":812},"()   ",[781,1013,1014],{"class":859},"\u002F\u002F Promise\u003CAudioDevice[]> (prompts for mic permission)\n",[781,1016,1018,1020,1022,1024,1026,1029],{"class":783,"line":1017},17,[781,1019,866],{"class":812},[781,1021,869],{"class":787},[781,1023,872],{"class":812},[781,1025,869],{"class":787},[781,1027,1028],{"class":812},"audioDevices              ",[781,1030,1031],{"class":859},"\u002F\u002F Ref\u003CAudioDevice[]>\n",[781,1033,1035,1037,1039,1041,1043,1046],{"class":783,"line":1034},18,[781,1036,866],{"class":812},[781,1038,869],{"class":787},[781,1040,872],{"class":812},[781,1042,869],{"class":787},[781,1044,1045],{"class":812},"activeAudioDeviceId       ",[781,1047,1048],{"class":859},"\u002F\u002F Ref\u003Cstring | undefined>\n",[781,1050,1052,1055,1057],{"class":783,"line":1051},19,[781,1053,1054],{"class":787},"\u003C\u002F",[781,1056,792],{"class":791},[781,1058,799],{"class":787},[781,1060,1062],{"class":783,"line":1061},20,[781,1063,853],{"emptyLinePlaceholder":852},[781,1065,1067,1069,1072],{"class":783,"line":1066},21,[781,1068,788],{"class":787},[781,1070,1071],{"class":791},"template",[781,1073,799],{"class":787},[781,1075,1077,1080,1083,1085,1087,1090,1092,1094,1097,1099,1101,1104,1106],{"class":783,"line":1076},22,[781,1078,1079],{"class":787},"  \u003C",[781,1081,1082],{"class":791},"FFTVisualizer",[781,1084,813],{"class":795},[781,1086,840],{"class":787},[781,1088,1089],{"class":787},"\"",[781,1091,866],{"class":825},[781,1093,1089],{"class":787},[781,1095,1096],{"class":795}," mode",[781,1098,840],{"class":787},[781,1100,1089],{"class":787},[781,1102,1103],{"class":825},"local",[781,1105,1089],{"class":787},[781,1107,1108],{"class":787}," \u002F>\n",[781,1110,1112,1114,1116],{"class":783,"line":1111},23,[781,1113,1054],{"class":787},[781,1115,1071],{"class":791},[781,1117,799],{"class":787},[53,1119,1121],{"id":1120},"slots","Slots",[63,1123,1124,1135],{},[66,1125,1126],{},[69,1127,1128,1131,1133],{},[72,1129,1130],{},"Slot",[72,1132,56],{},[72,1134,83],{},[85,1136,1137],{},[69,1138,1139,1143,1148],{},[90,1140,1141],{},[93,1142,685],{},[90,1144,1145],{},[93,1146,1147],{},"{ connected, bands, fps }",[90,1149,1150,1151,1153],{},"Replace the default corner overlay with your own (only rendered when ",[93,1152,671],{}," is true)",[1155,1156,1157],"style",{},"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 .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}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 .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);}",{"title":777,"searchDepth":802,"depth":802,"links":1159},[1160,1165,1166,1167],{"id":55,"depth":802,"text":56,"children":1161},[1162,1163,1164],{"id":60,"depth":831,"text":61},{"id":232,"depth":831,"text":233},{"id":366,"depth":831,"text":367},{"id":707,"depth":802,"text":708},{"id":765,"depth":802,"text":766},{"id":1120,"depth":802,"text":1121},"The complete component API — every prop, event, exposed method, and slot.","md",null,{},{"icon":36},{"title":33,"description":1168},"RBqj4GXM_QqSOGHFD9qQkmYb7IzDp1rbBmIUwIxdSXI",[1176,1178],{"title":21,"path":22,"stem":23,"description":1177,"icon":24,"children":-1},"The three ways to get audio data into the visualizer — local, WebSocket, and external.",{"title":38,"path":39,"stem":40,"description":1179,"icon":41,"children":-1},"Color the bars with a built-in preset or your own CSS-color stops.",1784469224092]