Audio Visualizer Components

Dev Design Library indexes 42 audio visualizer components from 20 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. 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
• V
  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
• Equalizer BarsKinetics · HTML/CSSPhase-offset bars pump like an audio meter — pure CSS
• Waveform ScrubSwiftPieces · SwiftUIA voice note player whose waveform is the scrubber, with a glass time bubble that rides the finger and a playback…
• 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…
• V
  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

Libraries with audio visualizer components

• Watermelon UI
• audiocn
• Amicro Micro Transitions
• LocalMode
• OpenSourceUI

Related categories

• React Audio Visualizer Components
• Tailwind CSS Audio Visualizer Components
• Animated Audio Visualizer Components
• Media Components
• Icon Components
• Image Components
• Gallery Components
• Logo Components
• Illustration Components
• Mockup Components
• Animated Icon Components
• Scene 3D Components
• Video Player Components
• QR Code Components
• Icon Set Components
• Audio Player Components
• Image Zoom Components
• Image Compare Components
• Model Viewer Components