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

keep me going (BIRDBRAIN)

slayr

1

God (with current joys & never goodbye)

matt proxy, Current Joys, never goodbye

2

STARS

matt proxy

3

Burn It

ok, fakemink

4

Trajectory

lapix, Mylta, RANASOL

5

fish in the pool

yeule

6

E7len's Knife

icesawder

7

Music Baby (leroy Remix)

Jane Remover

8

Dyad

Jamie Paige, unit.0

9

Machine Love

Jamie Paige

10

Flashout Freestyle

slayr

11

My Darling, My Companion

Jamie Paige

12

NOGWAPNOLIFE

bleood

13

BIRDBRAIN

Jamie Paige, OK Glass

14

In the dark

venturing

15

Set In Stone

slayr

16

Love Blur

slayr

17

Music Baby

Jane Remover

18

media offline

ariiol

19

SISTERHOOD (LOVE, HER.)

Lucy Bedroque

20

The End

Danny Brown, ta Ukrainka, Zheani, Cynthoni

21

Music and Me

fakemink

22

MIRINAE

TAK, Zekk

23

Rain Capsule

Namitape

24

Overfeel

Namitape

25

All At Once

Ninajirachi

26

Infohazard

Ninajirachi

27

Delete

Ninajirachi

28

weathergirl

FLAVOR FOLEY

29

Lawsyn

ayowitty

30

THUNDRRR

Quadeca

31

THAT'S WHY

Quadeca

32

WAGING WAR

Quadeca, Olēka

33

NO QUESTIONS ASKED

Quadeca

34

Always Have Always Will

Jane Remover

35

SLAM PUNK

Che

36

Akibare

Mylta

37

My life is mine alone! (feat. nenne)

Mylta, nenne

38

disarmed

kumosai, Sayako

39

spectrum

icesawder

40

NOWNEVER

Jaron Steele

41

Pretty Peach

Lucy Bedroque

42

How to Pretend

Lucy Bedroque

43

Knot Me

Lucy Bedroque

44

Sweet Pitcher

Lucy Bedroque

45

Thousand yard stare

kmoe

46

angels in camo

Jane Remover

47

Professional Vengeance

Jane Remover

48

Dreamflasher

Jane Remover

49

Experimental Skin

Jane Remover

50

Psychoboost

Jane Remover, Danny Brown

51

Dancing with your eyes closed

Jane Remover

52

Spider

venturing

53

Believe

venturing

54

alucarda lives!

smiling broadly

55

fake blood recipe

smiling broadly

56

flower bed

defsharp

57

sheaskedwhatmylifeislike

ericdoa

58

Caught up (in circles)

Syzy

59

Pastel Express

Cynax

60

St. Chroma (feat. Daniel Caesar)

Tyler, The Creator, Daniel Caesar

61

let's go home

Jane Remover

62

can you tell?

Jane Remover

63

champ

Jane Remover

64

pretender

Jane Remover

65

kodak moment

Jane Remover

66

movies for guys

Jane Remover

67

misplace

Jane Remover

68

Catch me if you can

tn-shi

69

natural

zeroth

70

mint

Snail's House

71

Emerald Lakeside - Action

はがね, Kitsui Akira

72

back off!!!

Jane Remover, kmoe, juno

73

one more life

Murphmusic, park.

74

Clinozoisite

Ludicin

75

Duhhhhhhhhhhhhhhhhh

underscores

76

Rabbit In The Black Room

Rabbit House

77

String Theocracy - Key Ingredient ver.

Mili

78

My guy (Corporate shuffle)

underscores

79

Wizards

xaev, mopearound

80

Everything Goes On

Porter Robinson, League of Legends

81

phobie d’impulsion

glaive

82

PUSH UR T3MPRR

femtanyl

83

Amethyst Aurora

BilliumMoto

84

the now now and never

what is your name?

85

Reverse Nightmare Tower

bye2

86

pop music

Limonène

87

EXACTLY WHY I'M STILL HERE - TURQUOISEDEATH Remix

bunnyprodge, TURQUOISEDEATH

88

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

glaive

89

Tojita Sekai

Camellia

90

commatose

glass beach

91

200

glass beach

92

until the dawn breaks

Deathbrain

93

dumb party

Internet Girl

94

skinz

8485

95

Algas Danses

seatrus

96

うみのゆき

seatrus

97

Palmy Flakes

seatrus

98

Cloud99 (As Above Mix)

Machine Girl

99

enchanted love

linear ring

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