hi this is my first blog post! i suck at writing anything down anything so hopefully talking about random things helps.
this all started when i wanted to display my favorite songs on my /about page, i already have a spotify playlist of them so i could just use the official embed. the problem is that the embed loads 1.96 mb of minified javascript.
…and also makes tons of strange requests back to spotify, is extremely loud (with no volume slider!), and preloads some songs. on my old site i just gave in and used the official embed, but after seeing that scraping spotify embeds was possible (thanks l-m!), i tried making my own.
all of that javascript is even more insane considering this was meant to be used on other sites, you’d think the multi-billion $ company would care about performance for a simple embed. but it’s no secret that a lot of the web is getting megabytes of javascript larger, from complex frameworks and overkill libraries just to render mostly static sites. tonsky already has a great article on this.
here they are!
extremely good songs
open in spotifysheaskedwhatmylifeislike
ericdoa
1
Pastel Express
Cynax
2
Caught up (in circles)
Syzy
3
St. Chroma (feat. Daniel Caesar)
Tyler, The Creator, Daniel Caesar
4
let's go home
Jane Remover
5
can you tell?
Jane Remover
6
champ
Jane Remover
7
pretender
Jane Remover
8
kodak moment
Jane Remover
9
movies for guys
Jane Remover
10
misplace
Jane Remover
11
Catch me if you can
tn-shi
12
natural
zeroth
13
mint
Snail's House
14
Emerald Lakeside - Action
はがね, Kitsui Akira
15
back off!!!
Jane Remover, kmoe, juno
16
one more life
Murphmusic, park.
17
Clinozoisite
Ludicin
18
Duhhhhhhhhhhhhhhhhh
underscores
19
Rabbit In The Black Room
Rabbit House
20
String Theocracy - Key Ingredient ver.
Mili
21
My guy (Corporate shuffle)
underscores
22
wizards
xaev, mopearound
23
Everything Goes On
Porter Robinson, League of Legends
24
phobie d’impulsion
glaive
25
PUSH UR T3MPRR
femtanyl
26
Amethyst Aurora
BilliumMoto
27
the now now and never
what is your name?
28
Reverse Nightmare Tower
bye2
29
pop music
Limonène
30
EXACTLY WHY I'M STILL HERE - TURQUOISEDEATH Remix
bunnyprodge, TURQUOISEDEATH
31
even when the sun is dead, will you tell them how hard i tried
glaive
32
Tojita Sekai
Camellia
33
commatose
glass beach
34
200
glass beach
35
until the dawn breaks
Deathbrain
36
dumb party
Internet Girl
37
skinz
8485
38
Algas Danses
seatrus
39
うみのゆき
seatrus
40
Palmy Flakes
seatrus
41
Cloud99 (As Above Mix)
Machine Girl
42
enchanted love
linear ring
43
Midnight Theater
Kano, Nagi Nemoto
44
Mola mola
Marmalade butcher
45
Another Ride
ippo.tsk, Synthesizer V ANRI
46
neon glow
glass beach
47
I Still Miss You
bo en, Tomggg
48
(We Are) Friends
bo en, Winamp Boys
49
Our Time
bo en, PAS TASTA
50
Kansoku-eisei
Nanahira, Camellia
51
GURUGURU
Snail's House
52
About 10 Hours of Doubting Myself
Yem
53
GHOST OF LORELEY
lasah
54
awesome ends with ME and ugly starts with U
c0ncernn
55
DILF repellent
c0ncernn
56
タイニーリトル・アジアンタム
ShibayanRecords
57
lastnaut
Sleeping Pola
58
NekovhParavh
Sad Keyboard Guy, Gardens
59
cool delusions about morphing into a cat
crxw
60
Blooming Afternoon
ミツキヨ
61
you're Nxt -Dreams Remix- (feat. MisoilePunch)
uma, Morimori Atsushi, MisoilePunch♪
62
Tenebre Rosso Sangue (ULTRAKILL Original Game Soundtrack)
Keygen Church
63
Altars of Apostasy
Heaven Pierce Her
64
Charisma Overload
Spacey☆Jester
65
Floccinaucinihilipilification
Marmalade butcher
66
Get Your Wish - Anamanaguchi Remix
Porter Robinson, Anamanaguchi
67
Mirror
Porter Robinson
68
Blossom
Porter Robinson
69
Look at the Sky
Porter Robinson
70
Get Your Wish
Porter Robinson
71
Something Comforting
Porter Robinson
72
Falling Behind
Laufey
73
Take Note
Portraits Of Tracy
74
Misery Song
Adust Rain
75
Voice of Chloe
Marmalade butcher
76
Mate Um Bonito Hoje Mesmo!
Marcioz
77
Raindrop
seatrus
78
Amanita
Marmalade butcher
79
though I fear, I still walk
ippo.tsk
80
oyasumination
ippo.tsk
81
oyasumination
ippo.tsk
82
oyasumination
ippo.tsk
83
ギターと孤独と蒼い惑星
kessoku band
84
Jamal Dub
Earl Grey
85
Steppa Pig
JPEGMAFIA, Danny Brown
86
Lean Beef Patty
JPEGMAFIA, Danny Brown
87
GONE, GONE / THANK YOU
Tyler, The Creator
88
IGOR'S THEME
Tyler, The Creator
89
Take Me Home
PinkPantheress
90
Alone - Soru Remix
Yutaka Yamada, Soru
91
星座になれたら
kessoku band
92
NEW MAGIC WAND
Tyler, The Creator
93
waitingforyou
linear ring
94
I DON'T LOVE YOU ANYMORE
Tyler, The Creator
95
Sense - "Leads to Another" Full Version
Silentroom, BilliumMoto
96
bedroom community
glass beach
97
Reality Distortion
Camellia, Akira Complex
98
BEST INTEREST
Tyler, The Creator
99
灼熱にて純情(wii-wii-woo)
Hoshimachi Suisei
100
there's more songs on spotify :)
the track embed was made with 0 JS, and the playlist embed was made with 1.84kb (minified) of JS, that’s 99.9061% smaller than the official embed, and i think it fits my site much better :)
ill get the playlist volume slider done one of these days… (9/14/2024: done!)
how
first, you can just make a fetch request to the normal embed url (either for a song or playlist) pretending to be a browser
const res = await fetch(
`https://open.spotify.com/embed/playlist/2m2lebj9Lg6Riwfyv7G9AD`,
{
headers: {
"User-Agent":
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:124.0) Gecko/20100101 Firefox/124.0",
Accept: "text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,*/*;q=0.8",
"Accept-Language": "en-US,en;q=0.5",
"Upgrade-Insecure-Requests": "1",
"Sec-Fetch-Dest": "iframe",
"Sec-Fetch-Mode": "navigate",
"Sec-Fetch-Site": "cross-site",
Pragma: "no-cache",
"Cache-Control": "no-cache",
},
method: "GET",
},
);
const html = await res.text();
and in the html response you get back, at the end there’s a magical script tag with the id __NEXT_DATA__ that contains everything you need!
const json = html.substring(
html.lastIndexOf(`type="application/json">`) +
`type="application/json">`.length,
html.lastIndexOf(`</script>`),
);
const data: PlaylistEmbedData = JSON.parse(json);
you can make whatever with this data now! i’d highly recommend caching it. you can cache song embed data much more aggressively than playlists cause those shouldn’t change.
it’s possible to make your embeds use 0 JS by using the native <audio /> element, which is what i do for singular song embeds. there’s a pretty big problem when using <audio /> for each song in a playlist embed though, it might take safari 8 seconds to load your site sometimes (not an exaggeration).
yes i did pinpoint the loading times to the hundred <audio /> elements, safari really doesn’t like that rendering that many…
note that you can barely style <audio /> elements and the element looks very different across each browser. because of all that i used a bit of JS with web components for my playlist embed, which gets server side rendered with astro.