Audio Player Components

Dev Design Library indexes 20 audio player components from 13 open-source UI libraries, with the most coming from LocalMode, OpenSourceUI, audiocn, Watermelon UI and UI Lab. Each one links to its page with the source code, a live preview where available, the library license and the install command. Audio player components belong to the Media group.

• Audio PlayerAI Elements · ReactA composable audio player component built on media-chrome, with shadcn styling and flexible controls.
• Voice NoteRare UI · ReactA voice message bar with a scrubbable waveform and a play control.
• Music PlayerVengeance UI · ReactCollapsible glass music player with equalizer and seekable progress
• Music Player CardOpenSourceUI · React
• Music PlayerComponentry · ReactA fun interactive vinyl record music player with swinging tonearm.
• Skeumorphic Music CardObsidianUI · React
• Audio Playeraudiocn · ReactA composable audio player: transport, seek bar with buffering, time, volume, playback rate, loop and keyboard shortcuts.
• Template PodcastShark UI · React
• Audio PlayerWatermelon UI · React
• Cassette ScrubberUI Lab · ReactScrub audio by dragging the tape, with reels that spin like the real thing.
• Audio Scrub PlayerLocalMode · ReactA composable scrubbable audio player for local Blob/object-URL audio (Kokoro TTS output or recordings) — play/pause, a…
• Glass PlayerOpaline · ReactNow-playing widget with scrubber, transport controls and volume.
• Voice MemoFibo · ReactAn aluminium recorder that writes down what you say, with the transcript filling in beside it as you talk.
• Music Playlist CardOpenSourceUI · React
• Music Playeraudiocn · ReactA playlist player with a waveform seek bar, shuffle, repeat, volume and optional ducking under the microphone.
• Audio Player With WaveformWatermelon UI · React
• Waveform PlayerUI Lab · ReactInks in a podcast's waveform, with chapter markers and a ghost playhead.
• Transcribed Note CardLocalMode · ReactA transcription list item pairing transcript text with inline <audio> playback — relative timestamp (hover ->…
• Audiobook Reader BlockLocalMode · ReactLong-text streaming synthesis (useStreamSpeech) with early playback that begins before synthesis completes, a live…
• Voice Explorer BlockLocalMode · ReactBrowse, search, preview, and A/B-compare all 29 Kokoro voices (grouped by language label; play/stop preview where…

Libraries with audio player components

• LocalMode
• OpenSourceUI
• audiocn
• Watermelon UI
• UI Lab

Related categories

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