React Audio Visualizer Components

Dev Design Library indexes 40 React audio visualizer components from 18 open-source UI libraries, with the most coming from Watermelon UI, audiocn, Amicro Micro Transitions, LocalMode and OpenSourceUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list targets React. Audio visualizer components belong to the Media group.

Voice PillReact Bits · ReactMic button that swells into a tinted capsule of level-driven equalizer bars and an elapsed clock while held or…
Comp 266Origin UI · React
Voice GlowLibraries.dev · ReactSound-reactive glow for React — a centered, colorful beam along the bottom edge that rises and blooms with voice…
Apple EqualizerAmicro Micro Transitions · ReactApple Equalizer loading animation.
AI VoiceKokonut UI · ReactVoice input with a scrolling waveform, then a take you can play back, discard or send.
Voice InputSpectrum UI · ReactA voice recorder pill with animated level bars and a live timer.
Audio Recorder WidgetOpenSourceUI · React
Bars ThemeNexvyn UI · ReactA traveling-wave bars visualization with 5 vertical bars sharing a sine-wave frequency, evenly phase-shifted left to…
Bar Visualizeraudiocn · ReactA row of bars driven by frequency bands, with idle, loading and mirrored modes. Bars paint without re-rendering React.
Voice ChatAI CSS · ReactA voice chat screen for an AI assistant: listening state, live waveform, transcript and voice settings.
Phosphor Score23rd.dev · ReactVertical sheet music on a CRT phosphor: notes fall, bloom at the playhead, then exit in a flare.
Audio Player With WaveformWatermelon UI · React
Now PlayingUI Lab · ReactA listening-to pill whose record slides out from behind the cover and spins while it plays.
Streaming Speech PanelLocalMode · ReactA streaming-TTS status surface: active state (WaveformActivityBars + spinner, synthesizing/playing label…
Voice Chat WidgetSpaceUI · ReactAn expandable voice chat pill with participant avatars, animated speaking indicators, and a smooth pill-to-panel…
Live Waveform Audio RecorderCue Foundations · React
Voice MemoFibo · ReactAn aluminium recorder that writes down what you say, with the transcript filling in beside it as you talk.
AI Voice 01ReactFrame · ReactA voice-assistant pill with a canvas audio-reactive visualizer, idle/listening/speaking states, a glowing edge ring…
Voice RingLibraries.dev · ReactVoice-reactive ring of light for React: a glassy spectrum that bends with the voice, takes the colour of its emotion…
Apple Sound WaveAmicro Micro Transitions · ReactApple Sound Wave loading animation.
Recorder Face WidgetOpenSourceUI · React
Electric Bar Visualizeraudiocn · ReactFrequency-band bars drawn as crackling filaments, with arcs between loud neighbours and sparks on sudden rises. Takes…
Transcribe Voice MessageWatermelon UI · React
Waveform PlayerUI Lab · ReactInks in a podcast's waveform, with chapter markers and a ghost playhead.
Voice OrbLocalMode · ReactAn animated Canvas 2D voice-agent orb/visualizer that reflects discrete agent states…
AI Voice 05ReactFrame · ReactA portrait voice-assistant card with a canvas audio-reactive curve visualizer, a mic button that grows on tap…
Siri WaveAmicro Micro Transitions · ReactSiri Wave loading animation.
Electric Waveformaudiocn · ReactOne electric line across the width: a crackling, white-hot trace with a tall glow, forks off the peaks and sparks…
Voice NoteWatermelon UI · React
Waveform Activity BarsLocalMode · ReactA pure-CSS row of pulsing vertical bars (sinusoid-derived heights, staggered animation) that doubles as an active…
Stroke WaveformAmicro Micro Transitions · React
Live Waveformaudiocn · ReactA canvas waveform of a live signal: scrolling level history or the current frame, as bars, a mirrored shape or a line.
Voice Note BaseWatermelon UI · React
Smooth Waveformaudiocn · ReactOne clean line across the width that follows the sound, as a smooth wave shaped by the frequency bands or a triggered…
Voice TranscribeWatermelon UI · React
Spectrumaudiocn · ReactA frequency spectrum analyser drawn on canvas as bars, a line or an area, with peak hold, a grid and frequency and…
Voice Transcribe BaseWatermelon UI · React
Waveformaudiocn · ReactA static waveform of a clip with a smooth playhead, seeking by pointer and keyboard, hover time, draggable regions and…
Waveform ScrubWatermelon UI · React
Waveform Scrub BaseWatermelon UI · React

React Audio Visualizer Components

Libraries with React audio visualizer components

Related categories