5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5f:I[539959,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"CommentSection"] 5e:T532,

About this component

Live Music Card is a real-time music tracking widget for Framer. It connects to your music scrobbling account and displays your currently playing track with a spinning vinyl disc, real album art, scrolling track title, animated EQ bars, and a live progress bar.

When nothing is playing, it automatically falls back to your last played track — so your site always has something to show.

Customizable properties

Colour
Refresh rate
Vinyl Spinning Speed
Marquee Speed (When the title is too long to fit)
Edit code for better customization

Steps for setup

Get your free API key
Go to last.fm/api/account/create and create a new application. Copy the API key shown.
Add the component to your Framer project
Enter the details in the Properties panel
Customize and Publish

Note — This component is actively maintained and updated. Due to the nature of third-party music data sources, track duration and progress may occasionally not load for certain songs. This is a known limitation that is being worked on with each update. If you encounter any issues, feel free to contact me - voidcraft.contact10@gmail.com

5a:[["$","$L5d",null,{"post":{"id":"019e9d88-c77f-7e48-94f4-a567d2d641a8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"6443dec2-0edc-465c-9e95-ad90318375b1","name":"Voidcraft","slug":"voidcraft","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2286078/avatar-B8qOWnbclXwlDbc1zCUC6BvYw3JDNZ.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nPxuPRSSaAz5BrQfbCeX","resolved":true,"title":"Live-MusicTracker","body":"$5e","bodyJson":null,"introduction":"Real-time music tracker card component","slug":"live-musictracker","author":{"framerUserId":"6443dec2-0edc-465c-9e95-ad90318375b1","name":"Voidcraft","slug":"voidcraft","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/2286078/avatar-B8qOWnbclXwlDbc1zCUC6BvYw3JDNZ.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nPxuPRSSaAz5BrQfbCeX/live-musictracker-SvorNgh23qmneKmW0QiB5XgoEGQODU","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-05-29T04:11:22.424Z","updatedAt":"2026-06-05T16:30:23.175Z","publishedAt":"2026-06-06T15:24:07.423Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/MusicWidget-Y6s4YL.js@b3GXUd0pt09aac8s0J1U","previewUrl":"https://musicwidget.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"ae04a700-60cc-429a-b133-88f3c9709ec0","name":"Players","slug":"players"}],"lastSaveId":"b3GXUd0pt09aac8s0J1U","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":27,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-06T15:24:07.423Z","updatedAt":"2026-06-06T15:24:07.423Z","reported":false}}],["$","$L5f",null,{"target":{"kind":"post","postId":"019e9d88-c77f-7e48-94f4-a567d2d641a8"},"postId":"019e9d88-c77f-7e48-94f4-a567d2d641a8","postAuthor":"$5a:0:props:post:author","targetCommentId":"$undefined"}]]

Suggested for you