Media@knitui/media
Audio Visualizer
A Skia-rendered audio visualizer driven by the @knitui/media/dsp FFT, attached to a real <Audio> player. useAudioSpectrum taps the player's off-thread sampler (sampleUpdate), runs the FFT once per frame, and pushes frequency bands to <AudioVisualizer> — no per-frame React renders. Press play. (@knitui/graphics/Skia is a dev-only dependency; the shipped kit is Skia-free.)
import { PlayerSpectrum } from "@knitui/media";Playground
Loading playground…
<PlayerSpectrum
source="https://mdn.github.io/webaudio-examples/audio-basics/outfoxing.mp3"
title="Outfoxing"
artist="Live spectrum"
variant="bars"
count={64}
height={120}
responseTime={90}
gradient={["#22d3ee", "#6366f1", "#ec4899"]}
/>Examples
Player
Real player → live frequency bars off the actual track. Press play. The track is a remote, CORS-enabled source and the player sets crossOrigin="anonymous", so Web Audio is allowed to read it and the bars react to the music — the real-app pattern for visualizing remote audio. (A cross-origin source WITHOUT CORS can't be sampled: the browser taints the buffer, sampling reports unsupported, and the player just plays silently to the visualizer.)
Loading example…
Glow
A neon glow behind a crisp shape (a Skia blur), still player-driven.
Loading example…
Radial
Bars radiating from the center as spokes — pair with a sweep gradient.
Loading example…
Live Microphone
Live microphone → useAudioStream PCM → SpectrumAnalyzer → visualizer. Press Start and grant mic permission. Works on web (getUserMedia) and native (expo-audio).
Loading example…
Variants Preview
Style preview only: every built-in variant fed by a permission-free SYNTHETIC signal (no playback). Use it to compare the visual styles; the real data path is the player/microphone stories above.
Loading example…
Props
Prop extraction did not resolve this component. Run pnpm docs:generate, or add an override in apps/docs/content/overrides/.