{"id":18063017,"url":"https://github.com/stagas/x-visualizer","last_synced_at":"2025-07-21T04:34:34.400Z","repository":{"id":50631517,"uuid":"474572657","full_name":"stagas/x-visualizer","owner":"stagas","description":"oscilloscope, spectrogram, spectrum, waveform audio visualizers","archived":false,"fork":false,"pushed_at":"2022-08-01T14:27:48.000Z","size":5884,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-05T13:12:34.220Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stagas.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-03-27T08:01:37.000Z","updated_at":"2022-07-31T03:14:50.000Z","dependencies_parsed_at":"2022-09-04T19:01:39.115Z","dependency_job_id":null,"html_url":"https://github.com/stagas/x-visualizer","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":"stagas/ts","purl":"pkg:github/stagas/x-visualizer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-visualizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-visualizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-visualizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-visualizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stagas","download_url":"https://codeload.github.com/stagas/x-visualizer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-visualizer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266241107,"owners_count":23898065,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-31T05:09:10.344Z","updated_at":"2025-07-21T04:34:34.335Z","avatar_url":"https://github.com/stagas.png","language":"TypeScript","readme":"\u003ch1\u003e\nx-visualizer \u003ca href=\"https://npmjs.org/package/x-visualizer\"\u003e\u003cimg src=\"https://img.shields.io/badge/npm-v1.0.0-F00.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"src\"\u003e\u003cimg src=\"https://img.shields.io/badge/loc-113-FFF.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"https://cdn.jsdelivr.net/npm/x-visualizer@1.0.0/dist/x-visualizer.min.js\"\u003e\u003cimg src=\"https://img.shields.io/badge/brotli-18.8K-333.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-MIT-F0B.svg?colorA=000\"/\u003e\u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp\u003e\u003c/p\u003e\n\nOscilloscope, spectrogram, spectrum, waveform audio visualizers.\n\n\u003ch4\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003enpm i x-visualizer \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003epnpm add x-visualizer \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003eyarn add x-visualizer\u003c/code\u003e\n\u003c/td\u003e\u003c/tr\u003e\u003c/table\u003e\n\u003c/h4\u003e\n\n## Examples\n\n\u003cdetails id=\"example$web\" title=\"web\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#example$web\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eweb\u003c/strong\u003e\u003c/code\u003e\u003c/summary\u003e  \u003cul\u003e    \u003cdetails id=\"source$web\" title=\"web source code\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#source$web\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eview source\u003c/strong\u003e\u003c/code\u003e\u003c/summary\u003e  \u003ca href=\"example/web.tsx\"\u003eexample/web.tsx\u003c/a\u003e  \u003cp\u003e\n\n```tsx\n/** @jsxImportSource sigl */\nimport $ from 'sigl'\n\nimport { VisualizerElement } from 'x-visualizer'\n\nconst ctx = new AudioContext({ sampleRate: 44100, latencyHint: 'playback' })\n\ninterface AppElement extends $.Element\u003cAppElement\u003e {}\n\n@$.element()\nclass AppElement extends HTMLElement {\n  input?: AudioNode\n  Visualizer = $.element(VisualizerElement)\n  visualizer?: VisualizerElement\n  mounted($: AppElement['$']) {\n    $.render(({ Visualizer, input }) =\u003e (\n      \u003cdiv\n        onpointerdown={$.event.stop(function() {\n          console.log('cycle')\n          $.ref.visualizer?.current?.cycle()\n        })}\n      \u003e\n        \u003cstyle\u003e\n          {/*css*/ `\n          div {\n            width: 300px;\n            height: 150px;\n          }\n        `}\n        \u003c/style\u003e\n        \u003cVisualizer\n          ref={$.ref.visualizer}\n          input={input}\n          kind=\"oscilloscope\"\n        /\u003e\n      \u003c/div\u003e\n    ))\n  }\n}\n\nconst App = $.element(AppElement)\n\nconst fetchAudioBuffer = async (audio: AudioContext, url: string) =\u003e {\n  const res = await fetch(url)\n  const arrayBuffer = await res.arrayBuffer()\n  const audioBuffer = await audio.decodeAudioData(arrayBuffer)\n  return audioBuffer\n}\n\nlet playing = false\nlet source: AudioBufferSourceNode\nconst toggle = async () =\u003e {\n  window.onclick = null\n  if (playing) {\n    ctx.suspend()\n    playing = false\n    console.log('stopped')\n    return\n  }\n\n  ctx.resume()\n  playing = true\n  if (source) return\n\n  const audioBuffer = await fetchAudioBuffer(\n    ctx,\n    './example/alpha_molecule.ogg'\n  )\n  source = ctx.createBufferSource()\n  source.buffer = audioBuffer\n  source.loop = true\n  source.connect(ctx.destination)\n  source.start(0, 33)\n\n  // for (let i = 0; i \u003c 1; i++) {\n  $.render(\u003cApp input={source} /\u003e, document.body)\n  console.log('rendered')\n  // }\n\n  // const osc = ctx.createOscillator()\n  // osc.frequency.value = 40\n  // osc.type = 'sine'\n  // osc.start()\n  // osc.connect(analyser)\n\n  // const noise = ctx.createScriptProcessor(512, 1, 1)\n  // noise.onaudioprocess = e =\u003e {\n  //   const output = e.outputBuffer.getChannelData(0)\n  //   for (let i = 0; i \u003c output.length; i++)\n  //     output[i] = Math.random() * 2 - 1\n  // }\n  // noise.connect(analyser)\n\n  // spectrogram.current!.analyser = analyser\n  console.log('playing')\n  // setTimeout(() =\u003e {\n  //   analyser.fftSize = 16384 * 2\n  //   waveform.current!.analyser = null\n  //   waveform.current!.analyser = analyser\n  // }, 1000)\n}\n\n// window.onclick = toggle\ntoggle()\n```\n\n\u003c/p\u003e\n\u003c/details\u003e\u003c/ul\u003e\u003c/details\u003e\n\n## API\n\n\u003cp\u003e  \u003cdetails id=\"VisualizerElement$2\" title=\"Class\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#VisualizerElement$2\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eVisualizerElement\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L16\"\u003esrc/x-visualizer.tsx#L16\u003c/a\u003e  \u003cul\u003e        \u003cp\u003e  \u003cdetails id=\"constructor$11\" title=\"Constructor\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#constructor$11\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003econstructor\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e  \u003cdetails id=\"new VisualizerElement$12\" title=\"ConstructorSignature\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#new VisualizerElement$12\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003enew VisualizerElement\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"$$69\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#$$69\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003e$\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/sigl.d.ts#L25\"\u003esrc/work/stagas/sigl/dist/types/sigl.d.ts#L25\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$73\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$73\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ector\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctor)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eCleanClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$88\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$88\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ectx\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctx)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eWrapper\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e} \u0026amp; \u003cspan\u003e__module\u003c/span\u003e \u0026amp; {\u003cp\u003e  \u003cdetails id=\"Boolean$92\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$92\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eBoolean\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L9\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L9\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | boolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"Number$91\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$91\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eNumber\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L8\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L8\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | number\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"String$90\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$90\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eString\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L7\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L7\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | string\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e}, \u003ccode\u003e\"transition\"\u003c/code\u003e\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"analyser$27\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#analyser$27\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eanalyser\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003efalse\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L68\"\u003esrc/x-visualizer.tsx#L68\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ccode\u003efalse\u003c/code\u003e | \u003cspan\u003eAnalyserNode\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"autoResize$15\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#autoResize$15\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eautoResize\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003etrue\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L31\"\u003esrc/x-visualizer.tsx#L31\u003c/a\u003e  \u003cul\u003e\u003cp\u003eboolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"background$16\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#background$16\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ebackground\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e'#123'\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L32\"\u003esrc/x-visualizer.tsx#L32\u003c/a\u003e  \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"color$17\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#color$17\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ecolor\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e'#1ff'\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L33\"\u003esrc/x-visualizer.tsx#L33\u003c/a\u003e  \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"context$93\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#context$93\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003econtext\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/sigl.d.ts#L26\"\u003esrc/work/stagas/sigl/dist/types/sigl.d.ts#L26\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eContextClass\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$97\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$97\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ector\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctor)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eCleanClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$112\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$112\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ectx\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctx)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eWrapper\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e} \u0026amp; \u003cspan\u003e__module\u003c/span\u003e \u0026amp; {\u003cp\u003e  \u003cdetails id=\"Boolean$116\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$116\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eBoolean\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L9\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L9\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | boolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"Number$115\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$115\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eNumber\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L8\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L8\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | number\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"String$114\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$114\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eString\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L7\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L7\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | string\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e}, \u003ccode\u003e\"transition\"\u003c/code\u003e\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"cycle$25\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#cycle$25\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ecycle\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L48\"\u003esrc/x-visualizer.tsx#L48\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eFn\u003c/span\u003e\u0026lt;[    ], void\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"disabled$14\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#disabled$14\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003edisabled\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003efalse\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L29\"\u003esrc/x-visualizer.tsx#L29\u003c/a\u003e  \u003cul\u003e\u003cp\u003eboolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"dispatch$54\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#dispatch$54\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003edispatch\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/events.d.ts#L4\"\u003esrc/work/stagas/sigl/dist/types/events.d.ts#L4\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eDispatch\u003c/span\u003e\u0026lt;\u003cdetails id=\"__type$55\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$55\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003cem\u003e(name, detail, init)\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"name$59\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#name$59\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ename\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eEvent\u003c/span\u003e | \u003cspan\u003eNarrow\u003c/span\u003e\u0026lt;\u003ca href=\"#K$57\"\u003eK\u003c/a\u003e, string\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"detail$60\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#detail$60\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003edetail\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#E$58\"\u003eE\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"init$61\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#init$61\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003einit\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eCustomEventInit\u003c/span\u003e\u0026lt;any\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eK\u003c/span\u003e, \u003cspan\u003eE\u003c/span\u003e\u0026gt;\u003cem\u003e(name, detail, init)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003eany\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"height$18\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#height$18\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eheight\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e50\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L34\"\u003esrc/x-visualizer.tsx#L34\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"host$68\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#host$68\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ehost\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/sigl.d.ts#L24\"\u003esrc/work/stagas/sigl/dist/types/sigl.d.ts#L24\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"input$26\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#input$26\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003einput\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L67\"\u003esrc/x-visualizer.tsx#L67\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ccode\u003enull\u003c/code\u003e | \u003cspan\u003eAudioNode\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"kind$13\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#kind$13\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ekind\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L28\"\u003esrc/x-visualizer.tsx#L28\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ca href=\"#VisualizerKind$1\"\u003eVisualizerKind\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"onmounted$66\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#onmounted$66\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eonmounted\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eEventHandler\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e, \u003cspan\u003eCustomEvent\u003c/span\u003e\u0026lt;any\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"onunmounted$67\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#onunmounted$67\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eonunmounted\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eEventHandler\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e, \u003cspan\u003eCustomEvent\u003c/span\u003e\u0026lt;any\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"oscilloscope$21\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#oscilloscope$21\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eoscilloscope\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L43\"\u003esrc/x-visualizer.tsx#L43\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eOscilloscopeElement\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"spectrogram$22\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#spectrogram$22\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003espectrogram\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L44\"\u003esrc/x-visualizer.tsx#L44\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eSpectrogramElement\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"spectrum$23\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#spectrum$23\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003espectrum\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L45\"\u003esrc/x-visualizer.tsx#L45\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eSpectrumElement\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"visualizer$20\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#visualizer$20\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003evisualizer\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L38\"\u003esrc/x-visualizer.tsx#L38\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eOscilloscopeElement\u003c/span\u003e | \u003cspan\u003eSpectrogramElement\u003c/span\u003e | \u003cspan\u003eSpectrumElement\u003c/span\u003e | \u003cspan\u003eWaveformElement\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"waveform$24\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#waveform$24\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ewaveform\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L46\"\u003esrc/x-visualizer.tsx#L46\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eWaveformElement\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"width$19\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#width$19\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ewidth\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e150\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L35\"\u003esrc/x-visualizer.tsx#L35\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"visualizers$3\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#visualizers$3\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003evisualizers\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L17\"\u003esrc/x-visualizer.tsx#L17\u003c/a\u003e  \u003cul\u003e\u003cp\u003e{\u003cp\u003e  \u003cdetails id=\"oscilloscope$5\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#oscilloscope$5\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eoscilloscope\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eComponent\u003c/span\u003e\u0026lt;\u003cspan\u003eOscilloscopeElement\u003c/span\u003e, \u003cspan\u003eHTMLElement\u003c/span\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"spectrogram$6\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#spectrogram$6\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003espectrogram\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eComponent\u003c/span\u003e\u0026lt;\u003cspan\u003eSpectrogramElement\u003c/span\u003e, \u003cspan\u003eHTMLElement\u003c/span\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"spectrum$7\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#spectrum$7\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003espectrum\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eComponent\u003c/span\u003e\u0026lt;\u003cspan\u003eSpectrumElement\u003c/span\u003e, \u003cspan\u003eHTMLElement\u003c/span\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"waveform$8\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#waveform$8\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ewaveform\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e...\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eComponent\u003c/span\u003e\u0026lt;\u003cspan\u003eWaveformElement\u003c/span\u003e, \u003cspan\u003eHTMLElement\u003c/span\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e}\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"kinds$9\" title=\"Accessor\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#kinds$9\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ekinds\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L24\"\u003esrc/x-visualizer.tsx#L24\u003c/a\u003e  \u003cul\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"created$117\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#created$117\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ecreated\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e(ctx)\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"ctx$119\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$119\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ectx\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$123\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$123\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ector\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctor)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eCleanClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$138\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$138\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ectx\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctx)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eWrapper\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e} \u0026amp; \u003cspan\u003e__module\u003c/span\u003e \u0026amp; {\u003cp\u003e  \u003cdetails id=\"Boolean$142\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$142\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eBoolean\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L9\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L9\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | boolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"Number$141\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$141\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eNumber\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L8\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L8\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | number\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"String$140\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$140\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eString\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L7\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L7\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | string\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e}, \u003ccode\u003e\"transition\"\u003c/code\u003e\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003ecreated\u003c/strong\u003e\u003cem\u003e(ctx)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003evoid\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"mounted$28\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#mounted$28\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003emounted\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e($)\u003c/em\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L70\"\u003esrc/x-visualizer.tsx#L70\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"$$30\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#$$30\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003e$\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$34\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$34\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ector\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctor)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eCleanClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$33\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$49\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$49\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ectx\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u0026lt;\u003cspan\u003eT\u003c/span\u003e\u0026gt;\u003cem\u003e(ctx)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eWrapper\u003c/span\u003e\u0026lt;\u003ca href=\"#T$48\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e} \u0026amp; \u003cspan\u003e__module\u003c/span\u003e \u0026amp; {\u003cp\u003e  \u003cdetails id=\"Boolean$53\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$53\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eBoolean\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L9\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L9\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | boolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"Number$52\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$52\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eNumber\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L8\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L8\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | number\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"String$51\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$51\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eString\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/work/stagas/sigl/dist/types/index.d.ts#L7\"\u003esrc/work/stagas/sigl/dist/types/index.d.ts#L7\u003c/a\u003e  \u003cul\u003e\u003cp\u003eundefined | string\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e}, \u003ccode\u003e\"transition\"\u003c/code\u003e\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003emounted\u003c/strong\u003e\u003cem\u003e($)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003evoid\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"on$62\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#on$62\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eon\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e(name)\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"name$65\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#name$65\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ename\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#K$64\"\u003eK\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003eon\u003c/strong\u003e\u0026lt;\u003cspan\u003eK\u003c/span\u003e\u0026gt;\u003cem\u003e(name)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003eOn\u003c/span\u003e\u0026lt;\u003cspan\u003eFn\u003c/span\u003e\u0026lt;[  \u003cspan\u003eEventHandler\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e, \u003cspan\u003eLifecycleEvents\u003c/span\u003e \u0026amp; object  [\u003ca href=\"#K$64\"\u003eK\u003c/a\u003e]\u0026gt;  ], \u003cspan\u003eOff\u003c/span\u003e\u0026gt;\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"toJSON$143\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#toJSON$143\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003etoJSON\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003etoJSON\u003c/strong\u003e\u003cem\u003e()\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003e\u003cspan\u003ePick\u003c/span\u003e\u0026lt;\u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e, keyof     \u003ca href=\"#VisualizerElement$2\"\u003eVisualizerElement\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e\u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"VisualizerKind$1\" title=\"TypeAlias\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#VisualizerKind$1\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eVisualizerKind\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-visualizer.tsx#L11\"\u003esrc/x-visualizer.tsx#L11\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ccode\u003e\"oscilloscope\"\u003c/code\u003e | \u003ccode\u003e\"spectrogram\"\u003c/code\u003e | \u003ccode\u003e\"spectrum\"\u003c/code\u003e | \u003ccode\u003e\"waveform\"\u003c/code\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e\n\n## Credits\n\n- [everyday-utils](https://npmjs.org/package/everyday-utils) by [stagas](https://github.com/stagas) \u0026ndash; Everyday utilities\n- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) \u0026ndash; Web framework\n- [x-oscilloscope](https://npmjs.org/package/x-oscilloscope) by [stagas](https://github.com/stagas) \u0026ndash; Audio oscilloscope visualizer Web Component\n- [x-spectrogram](https://npmjs.org/package/x-spectrogram) by [stagas](https://github.com/stagas) \u0026ndash; Audio spectrogram Web Component.\n- [x-spectrum](https://npmjs.org/package/x-spectrum) by [stagas](https://github.com/stagas) \u0026ndash; Audio spectrum analyser Web Component\n- [x-waveform](https://npmjs.org/package/x-waveform) by [stagas](https://github.com/stagas) \u0026ndash; Audio waveform visualizer Web Component\n\n## Contributing\n\n[Fork](https://github.com/stagas/x-visualizer/fork) or [edit](https://github.dev/stagas/x-visualizer) and submit a PR.\n\nAll contributions are welcome!\n\n## License\n\n\u003ca href=\"LICENSE\"\u003eMIT\u003c/a\u003e \u0026copy; 2022 [stagas](https://github.com/stagas)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fx-visualizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstagas%2Fx-visualizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fx-visualizer/lists"}