5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3fk0f7q4960ol.js","/creators-assets/_next/static/immutable/chunks/00fdmr6kfsdrw.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/1zwfgkv6hl7ih.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/1xwqa9rrktdcw.js","/creators-assets/_next/static/immutable/chunks/1p5p3hxx00owh.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/11rwwufuwaox5.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/2b15v_9ruhnys.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/26nhnsanh2piz.js","/creators-assets/_next/static/immutable/chunks/2riq6xk2ap_dl.js","/creators-assets/_next/static/immutable/chunks/1q3yt3z40r1ue.js","/creators-assets/_next/static/immutable/chunks/3_2gh-txmrtwa.js","/creators-assets/_next/static/immutable/chunks/3xhwx36tyhh8-.js","/creators-assets/_next/static/immutable/chunks/0w757zrv0hi6k.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2jy6qwxbn3dqw.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3sa-o_ztvtkwe.js","/creators-assets/_next/static/immutable/chunks/2051y-i4b0nnm.js"],"PostDetailCard"] 5f:Tee0,

Wave Audio Player

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.

What's inside

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.

States

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.

Features

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

Property controls

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.

Built for

Portfolio sites, product launches, creative studios, music artists, brand activations, and any Framer project where a generic embedded player would be an embarrassment.

⚡ Changelog v1.1

Floating Close & Minimize Control: Moved the control button out of the core wrapper into an external, absolute-positioned "floating bubble" to keep layouts clean and minimal.
Property Controls for Floating Bubble: Added full customization variables directly to the Framer properties panel—users can now change the bubble background color, icon color, size, and border radius effortlessly.
Customizable Hide Slide/Tab Color: Exposed property controls for the background color of the side tab animation when the player hides or minimizes.
UX Interaction Stability: Implemented an invisible layout bridge and a subtle micro-delay (debounce) to eliminate hover drop-offs, making cursor movements over the external controls incredibly smooth.

Need help?

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.

5b:[["$","$L5e",null,{"post":{"id":"019d934e-fa0d-79fb-9803-43523180a491","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"9e63854e-4560-47cb-9615-85ae7d476c1e","name":"Vizualogy","slug":"vizualogy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/739001/avatar-3aFLaSsj8u9SRBwlHJ9oMWWkGxBfkO.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"D3gY6gSQcliiWGG0GmbV","resolved":true,"title":"WaveAudioPlayer","body":"$5f","bodyJson":null,"introduction":"Brutalist audio player with live waves","slug":"waveaudioplayer","author":{"framerUserId":"9e63854e-4560-47cb-9615-85ae7d476c1e","name":"Vizualogy","slug":"vizualogy","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/739001/avatar-3aFLaSsj8u9SRBwlHJ9oMWWkGxBfkO.jpg","badges":["available","pro","studio"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/D3gY6gSQcliiWGG0GmbV/waveaudioplayer-Etgk1mjhCVwyQBUqYe172mEf66IV5a","metadata":{"tint":"hsl(270 67% 9%)","aspectRatio":1.3333333333333333}}],"post":null,"createdAt":"2026-04-12T19:56:35.440Z","updatedAt":"2026-05-20T23:19:45.074Z","publishedAt":"2026-04-15T22:41:59.821Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Wave-Audio-Player-UbQQql.js@llbHiKvaA4k5Qmk1xz6F","previewUrl":"https://waveaudioplayer.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"3a855006-6097-4489-b33b-8024cb26633e","name":"Interactions","slug":"interactions"}],"lastSaveId":"llbHiKvaA4k5Qmk1xz6F"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":34,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-15T22:41:59.821Z","updatedAt":"2026-04-15T22:41:59.821Z","reported":false}}],"$L60"]

Suggested for you