{"id":18062843,"url":"https://github.com/stagas/x-spectrogram","last_synced_at":"2025-10-16T17:16:49.164Z","repository":{"id":50624451,"uuid":"474493675","full_name":"stagas/x-spectrogram","owner":"stagas","description":"Audio spectrogram Web Component.","archived":false,"fork":false,"pushed_at":"2022-08-01T14:23:36.000Z","size":5966,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T11:21:38.315Z","etag":null,"topics":["audio","dsp","spectrogram","ui","web-component","webaudio"],"latest_commit_sha":null,"homepage":"","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-26T23:54:13.000Z","updated_at":"2023-10-19T07:35:19.000Z","dependencies_parsed_at":"2022-09-05T22:50:41.611Z","dependency_job_id":null,"html_url":"https://github.com/stagas/x-spectrogram","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":"stagas/ts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-spectrogram","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-spectrogram/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-spectrogram/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stagas%2Fx-spectrogram/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stagas","download_url":"https://codeload.github.com/stagas/x-spectrogram/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248429118,"owners_count":21101785,"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":["audio","dsp","spectrogram","ui","web-component","webaudio"],"created_at":"2024-10-31T05:08:40.694Z","updated_at":"2025-10-05T17:05:19.594Z","avatar_url":"https://github.com/stagas.png","language":"TypeScript","readme":"\u003ch1\u003e\nx-spectrogram \u003ca href=\"https://npmjs.org/package/x-spectrogram\"\u003e\u003cimg src=\"https://img.shields.io/badge/npm-v2.0.1-F00.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"src\"\u003e\u003cimg src=\"https://img.shields.io/badge/loc-182-FFF.svg?colorA=000\"/\u003e\u003c/a\u003e \u003ca href=\"https://cdn.jsdelivr.net/npm/x-spectrogram@2.0.1/dist/x-spectrogram.min.js\"\u003e\u003cimg src=\"https://img.shields.io/badge/brotli-16.1K-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\nAudio spectrogram Web Component.\n\n\u003ch4\u003e\n\u003ctable\u003e\u003ctr\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003enpm i x-spectrogram \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003epnpm add x-spectrogram \u003c/code\u003e\n\u003c/td\u003e\u003ctd title=\"Triple click to select and copy paste\"\u003e\n\u003ccode\u003eyarn add x-spectrogram\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\u003cp\u003e\u003c/p\u003e  \u003ca href=\"https://stagas.github.io/x-spectrogram/example/web.html\"\u003e\u003cimg width=\"274.2857142857143\" src=\"example/web.png\"\u003e\u003c/img\u003e  \u003cp\u003e\u003cstrong\u003eTry it live\u003c/strong\u003e\u003c/p\u003e\u003c/a\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.ts\"\u003eexample/web.ts\u003c/a\u003e  \u003cp\u003e\n\n```ts\nimport { fetchAudioBuffer } from 'webaudio-tools'\nimport { SpectrogramElement } from 'x-spectrogram/dist/esm'\n\ncustomElements.define('x-spectrogram', SpectrogramElement)\ndocument.body.innerHTML = `\n\u003cdiv id=\"demo\" style=\"display:inline-flex;height:80px;\"\u003e\n  \u003cx-spectrogram autoresize\u003e\u003c/x-spectrogram\u003e\n\u003c/div\u003e\n`\n\nconst ctx = new AudioContext({ sampleRate: 44100, latencyHint: 'playback' })\n\nconst analyser = ctx.createAnalyser()\nanalyser.fftSize = 4096\nanalyser.smoothingTimeConstant = 0\nanalyser.maxDecibels = 0\nanalyser.minDecibels = -100\n\n// @ts-ignore\nconst url = new URL('alpha_molecule.ogg', import.meta.url).toString()\n\nfetchAudioBuffer(ctx, url).then(audioBuffer =\u003e {\n  const source = ctx.createBufferSource()\n  source.buffer = audioBuffer\n  source.loop = true\n  source.connect(ctx.destination)\n  source.start(0, 30)\n  source.connect(analyser)\n  ;(document.querySelector('x-spectrogram') as SpectrogramElement).analyser =\n    analyser\n})\n\nwindow.onclick = () =\u003e ctx.state !== 'running' ? ctx.resume() : ctx.suspend()\nif (ctx.state !== 'running')\n  document.body.appendChild(new Text('click to start/stop'))\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=\"SpectrogramElement$1\" title=\"Class\" open\u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#SpectrogramElement$1\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eSpectrogramElement\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L29\"\u003esrc/x-spectrogram.ts#L29\u003c/a\u003e  \u003cul\u003e        \u003cp\u003e  \u003cdetails id=\"constructor$2\" title=\"Constructor\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#constructor$2\"\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 SpectrogramElement$3\" title=\"ConstructorSignature\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#new SpectrogramElement$3\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003enew SpectrogramElement\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003e\u003ca href=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003c/p\u003e    \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"$$83\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#$$83\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$87\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$87\"\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$47\"\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$47\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$102\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$102\"\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$62\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$62\"\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$62\"\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$106\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$106\"\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$105\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$105\"\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$104\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$104\"\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$16\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#analyser$16\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eanalyser\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L49\"\u003esrc/x-spectrogram.ts#L49\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eAnalyserNode\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"analyserData$17\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#analyserData$17\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eanalyserData\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-spectrogram.ts#L50\"\u003esrc/x-spectrogram.ts#L50\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eFloat32Array\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"autoResize$5\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#autoResize$5\"\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\u003efalse\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L32\"\u003esrc/x-spectrogram.ts#L32\u003c/a\u003e  \u003cul\u003e\u003cp\u003eboolean\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"background$9\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#background$9\"\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-spectrogram.ts#L38\"\u003esrc/x-spectrogram.ts#L38\u003c/a\u003e  \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"canvas$25\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#canvas$25\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003ecanvas\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L53\"\u003esrc/x-spectrogram.ts#L53\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eHTMLCanvasElement\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"color$10\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#color$10\"\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-spectrogram.ts#L39\"\u003esrc/x-spectrogram.ts#L39\u003c/a\u003e  \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"context$107\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#context$107\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$111\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$111\"\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$47\"\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$47\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$126\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$126\"\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$62\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$62\"\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$62\"\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$130\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$130\"\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$129\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$129\"\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$128\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$128\"\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=\"destroy$39\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#destroy$39\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003edestroy\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-spectrogram.ts#L76\"\u003esrc/x-spectrogram.ts#L76\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cdetails id=\"__type$40\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$40\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003e\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\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"dispatch$68\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#dispatch$68\"\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$69\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$69\"\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$73\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#name$73\"\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$71\"\u003eK\u003c/a\u003e, string\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"detail$74\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#detail$74\"\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$72\"\u003eE\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"init$75\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#init$75\"\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=\"draw$26\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#draw$26\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003edraw\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L58\"\u003esrc/x-spectrogram.ts#L58\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cdetails id=\"__type$27\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$27\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003e\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\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"getFFTLogIndex$18\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#getFFTLogIndex$18\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003egetFFTLogIndex\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L51\"\u003esrc/x-spectrogram.ts#L51\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cdetails id=\"__type$19\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$19\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003cem\u003e(normal)\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"normal$21\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#normal$21\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003enormal\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e    \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e  \u003cp\u003e\u003cstrong\u003e\u003c/strong\u003e\u003cem\u003e(normal)\u003c/em\u003e  \u0026nbsp;=\u0026gt;  \u003cul\u003enumber\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=\"height$8\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#height$8\"\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-spectrogram.ts#L36\"\u003esrc/x-spectrogram.ts#L36\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"host$82\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#host$82\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"loop$29\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#loop$29\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eloop\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L59\"\u003esrc/x-spectrogram.ts#L59\u003c/a\u003e  \u003cul\u003e\u003cp\u003e{\u003cp\u003e  \u003cdetails id=\"start$31\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#start$31\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003estart\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003estart\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=\"stop$33\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#stop$33\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003estop\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003estop\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\u003c/p\u003e}\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"maxFreq$12\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#maxFreq$12\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003emaxFreq\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e21000\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L42\"\u003esrc/x-spectrogram.ts#L42\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"minFreq$11\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#minFreq$11\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eminFreq\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003e62\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L41\"\u003esrc/x-spectrogram.ts#L41\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"onmounted$80\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#onmounted$80\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e, \u003cspan\u003eCustomEvent\u003c/span\u003e\u0026lt;any\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"onunmounted$81\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#onunmounted$81\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e, \u003cspan\u003eCustomEvent\u003c/span\u003e\u0026lt;any\u0026gt;\u0026gt;\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"pixelRatio$6\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#pixelRatio$6\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003epixelRatio\u003c/strong\u003e\u003c/code\u003e  \u003cspan\u003e\u003cspan\u003e\u0026nbsp;=\u0026nbsp;\u003c/span\u003e  \u003ccode\u003ewindow.devicePixelRatio\u003c/code\u003e\u003c/span\u003e  \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L33\"\u003esrc/x-spectrogram.ts#L33\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"renderNextAnimFrame$22\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#renderNextAnimFrame$22\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003erenderNextAnimFrame\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L52\"\u003esrc/x-spectrogram.ts#L52\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cdetails id=\"__type$23\" title=\"Function\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#__type$23\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003cem\u003e()\u003c/em\u003e    \u003c/summary\u003e    \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003e\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\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"root$4\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#root$4\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eroot\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-spectrogram.ts#L30\"\u003esrc/x-spectrogram.ts#L30\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eShadowRoot\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"width$7\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#width$7\"\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-spectrogram.ts#L35\"\u003esrc/x-spectrogram.ts#L35\u003c/a\u003e  \u003cul\u003e\u003cp\u003enumber\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"worker$14\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#worker$14\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eworker\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-spectrogram.ts#L46\"\u003esrc/x-spectrogram.ts#L46\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003ccode\u003enull\u003c/code\u003e | \u003cspan\u003eWorker\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"workerData$15\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#workerData$15\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eworkerData\u003c/strong\u003e\u003c/code\u003e    \u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L47\"\u003esrc/x-spectrogram.ts#L47\u003c/a\u003e  \u003cul\u003e\u003cp\u003e\u003cspan\u003eFloat32Array\u003c/span\u003e\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"workerUrl$13\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#workerUrl$13\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003eworkerUrl\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-spectrogram.ts#L45\"\u003esrc/x-spectrogram.ts#L45\u003c/a\u003e  \u003cul\u003e\u003cp\u003estring\u003c/p\u003e        \u003c/ul\u003e\u003c/details\u003e\u003cdetails id=\"created$131\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#created$131\"\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$133\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$133\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$137\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$137\"\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$47\"\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$47\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$152\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$152\"\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$62\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$62\"\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$62\"\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$156\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$156\"\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$155\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$155\"\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$154\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$154\"\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$42\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#mounted$42\"\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-spectrogram.ts#L78\"\u003esrc/x-spectrogram.ts#L78\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e    \u003cdetails id=\"$$44\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#$$44\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e \u0026amp; \u003cspan\u003eJsxContext\u003c/span\u003e\u0026lt;\u003ca href=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e\u0026gt; \u0026amp; \u003cspan\u003eOmit\u003c/span\u003e\u0026lt;{\u003cp\u003e    \u003cdetails id=\"ctor$48\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctor$48\"\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$47\"\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$47\"\u003eT\u003c/a\u003e\u0026gt;\u003c/ul\u003e\u003c/p\u003e  \u003cdetails id=\"ctx$63\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#ctx$63\"\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$62\"\u003eT\u003c/a\u003e | \u003cspan\u003eClass\u003c/span\u003e\u0026lt;\u003ca href=\"#T$62\"\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$62\"\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$67\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Boolean$67\"\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$66\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#Number$66\"\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$65\" title=\"Property\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#String$65\"\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$76\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#on$76\"\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$79\" title=\"Parameter\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#name$79\"\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$78\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e, \u003cspan\u003eLifecycleEvents\u003c/span\u003e \u0026amp; object  [\u003ca href=\"#K$78\"\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=\"start$35\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#start$35\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003estart\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e     \u0026ndash; Start displaying the spectrum.\u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L66\"\u003esrc/x-spectrogram.ts#L66\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003estart\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=\"stop$37\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#stop$37\"\u003e#\u003c/a\u003e\u003c/span\u003e  \u003ccode\u003e\u003cstrong\u003estop\u003c/strong\u003e\u003c/code\u003e\u003cem\u003e()\u003c/em\u003e     \u0026ndash; Stop displaying the spectrum.\u003c/summary\u003e  \u003ca href=\"src/x-spectrogram.ts#L72\"\u003esrc/x-spectrogram.ts#L72\u003c/a\u003e  \u003cul\u003e    \u003cp\u003e      \u003cp\u003e\u003cstrong\u003estop\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=\"toJSON$157\" title=\"Method\" \u003e\u003csummary\u003e\u003cspan\u003e\u003ca href=\"#toJSON$157\"\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=\"#SpectrogramElement$1\"\u003eSpectrogramElement\u003c/a\u003e, keyof     \u003ca href=\"#SpectrogramElement$1\"\u003eSpectrogramElement\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\u003c/p\u003e\n\n## Credits\n\n- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) \u0026ndash; Web framework\n- [webaudio-tools](https://npmjs.org/package/webaudio-tools) by [stagas](https://github.com/stagas) \u0026ndash; Useful tools for WebAudio.\n\n## Contributing\n\n[Fork](https://github.com/stagas/x-spectrogram/fork) or [edit](https://github.dev/stagas/x-spectrogram) 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-spectrogram","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstagas%2Fx-spectrogram","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstagas%2Fx-spectrogram/lists"}