A high-end music player component engineered for Framer projects that refuse to look templated. Wave Audio Player ships with two states, a minimal collapsed icon that expands into a full dashboard on click, built around a brutalist aesthetic with zero compromise on functionality.
Wave Audio Player is not a styled div with a play button. It's a fully wired audio engine built on the Web Audio API, with a real-time frequency analyzer driving the waveform bars. Every visual detail, from the blurred cover art backdrop to the knurled volume slider, is controllable from the Framer property panel without touching code.
The collapsed state sits quietly as a small icon, configurable size, icon style, and border radius. When playing, hovering reveals the track info sliding in. One click expands it into the full dashboard: cover art, track title, artist, animated waveform, progress bar with scrubbing, timestamps, volume control, and skip buttons.
Real-time waveform visualizer powered by Web Audio API analyser
Multi-track playlist support with previous / next skip controls
Collapse → expand transition with spring cubic-bezier easing
Blurred cover art backdrop that updates per track
Scrubable progress bar with live timestamps
Volume slider + mute toggle
Fully independent collapsed and expanded border radius controls
Full font controls for title, artist, CTA, and timer
Accent color, background, and all text colors customizable
Brutalist hover state, track info slides in on playing state
CORS fallback for hosted audio files
Zero dependencies beyond React and Framer
Every visual property is exposed in the Framer panel. No code editing required after dropping it in. Playlist tracks are managed as an array, add title, artist, cover image, and audio file per track directly from the panel.
How to use
Drop the component onto your canvas. Add your tracks via the Playlist property control. Set your accent color, fonts, and sizing. Done. The component handles audio context initialization, CORS fallback, and cleanup automatically.
Portfolio sites, product launches, creative studios, music artists, brand activations, and any Framer project where a generic embedded player would be an embarrassment.
Drop us a message on X at @vizualogy, we're always around. Built by Vizualogy Studio. We design and build premium Framer experiences for founders and brands who care about the details.
Vizualogy
