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

Burn It

ok, fakemink

1

Trajectory

lapix, Mylta, RANASOL

2

fish in the pool

yeule

3

E7len's Knife

icesawder

4

Music Baby (leroy Remix)

Jane Remover

5

Dyad

Jamie Paige, unit.0

6

Machine Love

Jamie Paige

7

Flashout Freestyle

slayr

8

My Darling, My Companion

Jamie Paige

9

NOGWAPNOLIFE

bleood

10

BIRDBRAIN

Jamie Paige, OK Glass

11

In the dark

venturing

12

Set In Stone

slayr

13

Love Blur

slayr

14

Music Baby

Jane Remover

15

media offline

ariiol

16

SISTERHOOD (LOVE, HER.)

Lucy Bedroque

17

The End

Danny Brown, ta Ukrainka, Zheani, Cynthoni

18

Music and Me

fakemink

19

MIRINAE

TAK, Zekk

20

Rain Capsule

Namitape

21

Overfeel

Namitape

22

All At Once

Ninajirachi

23

Infohazard

Ninajirachi

24

Delete

Ninajirachi

25

weathergirl

FLAVOR FOLEY

26

Lawsyn

ayowitty

27

THUNDRRR

Quadeca

28

THAT'S WHY

Quadeca

29

WAGING WAR

Quadeca, Olēka

30

NO QUESTIONS ASKED

Quadeca

31

Always Have Always Will

Jane Remover

32

SLAM PUNK

Che

33

Akibare

Mylta

34

My life is mine alone! (feat. nenne)

Mylta, nenne

35

disarmed

kumosai, Sayako

36

spectrum

icesawder

37

NOWNEVER

Jaron Steele

38

Pretty Peach

Lucy Bedroque

39

How to Pretend

Lucy Bedroque

40

Knot Me

Lucy Bedroque

41

Sweet Pitcher

Lucy Bedroque

42

Thousand yard stare

kmoe

43

angels in camo

Jane Remover

44

Professional Vengeance

Jane Remover

45

Dreamflasher

Jane Remover

46

Experimental Skin

Jane Remover

47

Psychoboost

Jane Remover, Danny Brown

48

Dancing with your eyes closed

Jane Remover

49

Spider

venturing

50

Believe

venturing

51

alucarda lives!

smiling broadly

52

fake blood recipe

smiling broadly

53

flower bed

defsharp

54

sheaskedwhatmylifeislike

ericdoa

55

Caught up (in circles)

Syzy

56

Pastel Express

Cynax

57

St. Chroma (feat. Daniel Caesar)

Tyler, The Creator, Daniel Caesar

58

let's go home

Jane Remover

59

can you tell?

Jane Remover

60

champ

Jane Remover

61

pretender

Jane Remover

62

kodak moment

Jane Remover

63

movies for guys

Jane Remover

64

misplace

Jane Remover

65

Catch me if you can

tn-shi

66

natural

zeroth

67

mint

Snail's House

68

Emerald Lakeside - Action

はがね, Kitsui Akira

69

back off!!!

Jane Remover, kmoe, juno

70

one more life

Murphmusic, park.

71

Clinozoisite

Ludicin

72

Duhhhhhhhhhhhhhhhhh

underscores

73

Rabbit In The Black Room

Rabbit House

74

String Theocracy - Key Ingredient ver.

Mili

75

My guy (Corporate shuffle)

underscores

76

Wizards

xaev, mopearound

77

Everything Goes On

Porter Robinson, League of Legends

78

phobie d’impulsion

glaive

79

PUSH UR T3MPRR

femtanyl

80

Amethyst Aurora

BilliumMoto

81

the now now and never

what is your name?

82

Reverse Nightmare Tower

bye2

83

pop music

Limonène

84

EXACTLY WHY I'M STILL HERE - TURQUOISEDEATH Remix

bunnyprodge, TURQUOISEDEATH

85

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

glaive

86

Tojita Sekai

Camellia

87

commatose

glass beach

88

200

glass beach

89

until the dawn breaks

Deathbrain

90

dumb party

Internet Girl

91

skinz

8485

92

Algas Danses

seatrus

93

うみのゆき

seatrus

94

Palmy Flakes

seatrus

95

Cloud99 (As Above Mix)

Machine Girl

96

enchanted love

linear ring

97

Midnight Theater

Kano, Nagi Nemoto

98

Mola mola

Marmalade butcher

99

Another Ride

ippo.tsk, Synthesizer V ANRI

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