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.

here they are!

extremely good songs

open in spotify

Sweet Pitcher

Lucy Bedroque

1

unable to rea� save fiĦe

AZALI

2

Thousand yard stare

kmoe

3

Dreamflasher

Jane Remover

4

Experimental Skin

Jane Remover

5

Psychoboost feat danny brown

Jane Remover, Danny Brown

6

Dancing with your eyes closed

Jane Remover

7

Spider

venturing

8

Believe

venturing

9

alucarda lives!

smiling broadly

10

fake blood recipe

smiling broadly

11

flower bed

defsharp

12

sheaskedwhatmylifeislike

ericdoa

13

Caught up (in circles)

Syzy

14

Pastel Express

Cynax

15

St. Chroma (feat. Daniel Caesar)

Tyler, The Creator, Daniel Caesar

16

let's go home

Jane Remover

17

can you tell?

Jane Remover

18

champ

Jane Remover

19

pretender

Jane Remover

20

kodak moment

Jane Remover

21

movies for guys

Jane Remover

22

misplace

Jane Remover

23

Catch me if you can

tn-shi

24

natural

zeroth

25

mint

Snail's House

26

Emerald Lakeside - Action

はがね, Kitsui Akira

27

back off!!!

Jane Remover, kmoe, juno

28

one more life

Murphmusic, park.

29

Clinozoisite

Ludicin

30

Duhhhhhhhhhhhhhhhhh

underscores

31

Rabbit In The Black Room

Rabbit House

32

String Theocracy - Key Ingredient ver.

Mili

33

My guy (Corporate shuffle)

underscores

34

wizards

xaev, mopearound

35

Everything Goes On

Porter Robinson, League of Legends

36

phobie d’impulsion

glaive

37

PUSH UR T3MPRR

femtanyl

38

Amethyst Aurora

BilliumMoto

39

the now now and never

what is your name?

40

Reverse Nightmare Tower

bye2

41

pop music

Limonène

42

EXACTLY WHY I'M STILL HERE - TURQUOISEDEATH Remix

bunnyprodge, TURQUOISEDEATH

43

even when the sun is dead, will you tell them how hard i tried

glaive

44

Tojita Sekai

Camellia

45

commatose

glass beach

46

200

glass beach

47

until the dawn breaks

Deathbrain

48

dumb party

Internet Girl

49

skinz

8485

50

Algas Danses

seatrus

51

うみのゆき

seatrus

52

Palmy Flakes

seatrus

53

Cloud99 (As Above Mix)

Machine Girl

54

enchanted love

linear ring

55

Midnight Theater

Kano, Nagi Nemoto

56

Mola mola

Marmalade butcher

57

Another Ride

ippo.tsk, Synthesizer V ANRI

58

neon glow

glass beach

59

I Still Miss You

bo en, Tomggg

60

(We Are) Friends

bo en, Winamp Boys

61

Our Time

bo en, PAS TASTA

62

Kansoku-eisei

Nanahira, Camellia

63

GURUGURU

Snail's House

64

About 10 Hours of Doubting Myself

Yem

65

GHOST OF LORELEY

lasah

66

awesome ends with ME and ugly starts with U

c0ncernn

67

DILF repellent

c0ncernn

68

タイニーリトル・アジアンタム

ShibayanRecords

69

lastnaut

Sleeping Pola

70

NekovhParavh

Sad Keyboard Guy, Gardens

71

cool delusions about morphing into a cat

crxw

72

Blooming Afternoon

ミツキヨ

73

you're Nxt -Dreams Remix- (feat. MisoilePunch)

uma, Morimori Atsushi, MisoilePunch♪

74

Tenebre Rosso Sangue (ULTRAKILL Original Game Soundtrack)

Keygen Church

75

Altars of Apostasy

Heaven Pierce Her

76

Charisma Overload

Spacey☆Jester

77

Floccinaucinihilipilification

Marmalade butcher

78

Get Your Wish - Anamanaguchi Remix

Porter Robinson, Anamanaguchi

79

Mirror

Porter Robinson

80

Blossom

Porter Robinson

81

Look at the Sky

Porter Robinson

82

Get Your Wish

Porter Robinson

83

Something Comforting

Porter Robinson

84

Falling Behind

Laufey

85

Take Note

Portraits Of Tracy

86

Misery Song

Adust Rain

87

Voice of Chloe

Marmalade butcher

88

Mate Um Bonito Hoje Mesmo!

Marcioz

89

Raindrop

seatrus

90

Amanita

Marmalade butcher

91

though I fear, I still walk

ippo.tsk

92

oyasumination

ippo.tsk

93

oyasumination

ippo.tsk

94

oyasumination

ippo.tsk

95

ギターと孤独と蒼い惑星

kessoku band

96

Jamal Dub

Earl Grey

97

Steppa Pig

JPEGMAFIA, Danny Brown

98

Lean Beef Patty

JPEGMAFIA, Danny Brown

99

GONE, GONE / THANK YOU

Tyler, The Creator

100

there's more songs on spotify :)

the now now and never

what is your name?

open in 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 :)

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).

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.

source code for scraper, components, and typescript types