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

BIRDBRAIN

Jamie Paige, OK Glass

1

In the dark

venturing

2

Set In Stone

slayr

3

Love Blur

slayr

4

Music Baby

Jane Remover

5

media offline

ariiol

6

The End

Danny Brown, ta Ukrainka, Zheani, Cynthoni

7

Music and Me

fakemink

8

MIRINAE

TAK, Zekk

9

Rain Capsule

Namitape

10

Overfeel

Namitape

11

All At Once

Ninajirachi

12

Infohazard

Ninajirachi

13

Delete

Ninajirachi

14

weathergirl

FLAVOR FOLEY

15

Lawsyn

ayowitty

16

THUNDRRR

Quadeca

17

THAT'S WHY

Quadeca

18

WAGING WAR

Quadeca, Olēka

19

NO QUESTIONS ASKED

Quadeca

20

Always Have Always Will

Jane Remover

21

SLAM PUNK

Che

22

Akibare

Mylta

23

My life is mine alone! (feat. nenne)

Mylta, nenne

24

disarmed

kumosai, Sayako

25

spectrum

icesawder

26

NOWNEVER

Jaron

27

Pretty Peach

Lucy Bedroque

28

How to Pretend

Lucy Bedroque

29

Knot Me

Lucy Bedroque

30

Sweet Pitcher

Lucy Bedroque

31

Thousand yard stare

kmoe

32

angels in camo

Jane Remover

33

Professional Vengeance

Jane Remover

34

Dreamflasher

Jane Remover

35

Experimental Skin

Jane Remover

36

Psychoboost

Jane Remover, Danny Brown

37

Dancing with your eyes closed

Jane Remover

38

Spider

venturing

39

Believe

venturing

40

alucarda lives!

smiling broadly

41

fake blood recipe

smiling broadly

42

flower bed

defsharp

43

sheaskedwhatmylifeislike

ericdoa

44

Caught up (in circles)

Syzy

45

Pastel Express

Cynax

46

St. Chroma (feat. Daniel Caesar)

Tyler, The Creator, Daniel Caesar

47

let's go home

Jane Remover

48

can you tell?

Jane Remover

49

champ

Jane Remover

50

pretender

Jane Remover

51

kodak moment

Jane Remover

52

movies for guys

Jane Remover

53

misplace

Jane Remover

54

Catch me if you can

tn-shi

55

natural

zeroth

56

mint

Snail's House

57

Emerald Lakeside - Action

はがね, Kitsui Akira

58

back off!!!

Jane Remover, kmoe, juno

59

one more life

Murphmusic, park.

60

Clinozoisite

Ludicin

61

Duhhhhhhhhhhhhhhhhh

underscores

62

Rabbit In The Black Room

Rabbit House

63

String Theocracy - Key Ingredient ver.

Mili

64

My guy (Corporate shuffle)

underscores

65

Wizards

xaev, mopearound

66

Everything Goes On

Porter Robinson, League of Legends

67

phobie d’impulsion

glaive

68

PUSH UR T3MPRR

femtanyl

69

Amethyst Aurora

BilliumMoto

70

the now now and never

what is your name?

71

Reverse Nightmare Tower

bye2

72

pop music

Limonène

73

EXACTLY WHY I'M STILL HERE - TURQUOISEDEATH Remix

bunnyprodge, TURQUOISEDEATH

74

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

glaive

75

Tojita Sekai

Camellia

76

commatose

glass beach

77

200

glass beach

78

until the dawn breaks

Deathbrain

79

dumb party

Internet Girl

80

skinz

8485

81

Algas Danses

seatrus

82

うみのゆき

seatrus

83

Palmy Flakes

seatrus

84

Cloud99 (As Above Mix)

Machine Girl

85

enchanted love

linear ring

86

Midnight Theater

Kano, Nagi Nemoto

87

Mola mola

Marmalade butcher

88

Another Ride

ippo.tsk, Synthesizer V ANRI

89

neon glow

glass beach

90

I Still Miss You

bo en, Tomggg

91

(We Are) Friends

bo en, Winamp Boys

92

Our Time

bo en, PAS TASTA

93

Kansoku-eisei

Nanahira, Camellia

94

GURUGURU

Snail's House

95

About 10 Hours of Doubting Myself

Yem

96

GHOST OF LORELEY

lasah

97

awesome ends with ME and ugly starts with U

c0ncernn

98

DILF repellent

c0ncernn

99

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

ShibayanRecords

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