59:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/0ebkvqksdxj8m.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2zqx3_h6kju09.js","/creators-assets/_next/static/immutable/chunks/1xkjm3oyldl_r.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3wk6_kr5br5aj.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/2ee50z0bknh40.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/0e-wwv74y78f7.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/03j_erjzu_t0-.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js","/creators-assets/_next/static/immutable/chunks/0rfcd366io6r9.js"],"PostDetailCard"] 5a:Tff6,

What is Music Player Premium?

Music Player Premium is a production-ready audio player component with features found in apps like Spotify and Apple Music. It supports multiple tracks, real-time frequency visualisation, looping canvas video backgrounds, 3D artwork tilt effects, and mobile lock screen integration. Built for portfolios, landing pages, artist sites, and music-focused web experiences that demand polish.

Core Features

Real-time audio visualiser synced to the playing track, with Bars and Wave modes, adjustable sensitivity, bar count, color, and opacity
Spotify-style canvas video that replaces album artwork with a looping video per track
Native lock screen and browser media controls via the MediaSession API, including play, pause, skip, and seek
Five design presets — Glass, Dark, Light, Neon, and fully Custom — with complete color control
Interactive 3D artwork tilt with customisable glare, depth intensity, and smooth spring physics
Built-in artist profile page with monthly listeners, follow button, tabs, and a scrollable track list
Per-track favouriting, verified artist badges, and playlist drawer
Keyboard shortcuts for play, pause, seek, and mute
Single-instance playback — starting one player automatically pauses others on the page

Controls inside Framer

Design Preset

Glass, Dark, Light, Neon, or Custom theme
Full color override for card, text, accent, progress, and button elements

Display

Toggle progress bar, time display, volume slider, playlist button, and shuffle/repeat controls

Tracks

Title, artist, cover image, and audio file per track
Optional canvas video, artist image, monthly listeners, favourite status, and verified badge per track

Visualiser

Show/hide visualiser
Style: Bars or Wave
Position: Behind Artwork or Below Controls
Bar count, color, opacity, and sensitivity

Canvas Video

Enable or disable looping video replacement for album art

Lock Screen

Toggle mobile lock screen and browser media control integration

3D Artwork

Tilt intensity and glare toggle

Card Style

Border radius, padding, blur amount, image radius, border, and shadow

Button Style

Button size and gap

Artist Page

Monthly listeners, follow button, play button, and tab visibility
Follow link URL and listeners label text

Typography

Custom font family and weight for title, artist, and time labels

Best use cases

Music artist and label portfolio sites that need a premium, branded player
SaaS and app landing pages showcasing audio features or media playback
Creative agency and freelancer portfolios with background music or sound design showcases
Event and festival websites with artist profiles and track previews

Music Player Premium gives your Framer site the audio experience your visitors expect.

Questions or custom requests?

We design and build custom Framer components. Get in touch at contact@teampixel.com.au.

56:[["$","$L59",null,{"post":{"id":"019d8b0c-e467-79a0-873f-d1a94e39a24d","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"933880df-e4cb-4aa4-a707-3089c7ab1ac7","name":"Aidan Looker","slug":"aidan-looker","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1284783/avatar-F6tgyME9x2RFxZFIP129WTmVxbuxWg.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"4uNOcfGDJusiS3FMNGDE","resolved":true,"title":"Music Player Premium","body":"$5a","bodyJson":null,"introduction":"Music player with live visuals.","slug":"music-player-premium","author":{"framerUserId":"933880df-e4cb-4aa4-a707-3089c7ab1ac7","name":"Aidan Looker","slug":"aidan-looker","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/1284783/avatar-F6tgyME9x2RFxZFIP129WTmVxbuxWg.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/4uNOcfGDJusiS3FMNGDE/music-player-premium-EGWdEwmD7kzCgbVK2ptELtsIKVJLRW","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-02T14:31:25.644Z","updatedAt":"2026-07-16T08:23:53.356Z","publishedAt":"2026-04-14T08:12:51.175Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://musicplayerpremium.framer.media/","price":"12","paymentUrl":"https://teampixelau.lemonsqueezy.com/checkout/buy/b135275c-56ad-480e-9c60-17fdf22659ce","workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"7L6rO8lBXPoFtOlxIVfg","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":5},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-04-14T08:12:51.175Z","updatedAt":"2026-04-14T08:12:51.175Z","reported":false}}],"$L5b"]

Suggested for you