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

You Look So Good

Moe Shop

1

Music Baby

Jane Remover

2

Typing

ariiol

3

SUNFADED

初星学園, 篠澤 広

4

media offline

ariiol

5

The End

Danny Brown, ta Ukrainka, Zheani, Cynthoni

6

Music and Me

fakemink

7

MIRINAE

TAK, Zekk

8

Rain Capsule

Namitape

9

Overfeel

Namitape

10

All At Once

Ninajirachi

11

Infohazard

Ninajirachi

12

Delete

Ninajirachi

13

weathergirl

FLAVOR FOLEY

14

Lawsyn

ayowitty

15

THUNDRRR

Quadeca

16

THAT'S WHY

Quadeca

17

WAGING WAR

Quadeca, Olēka

18

NO QUESTIONS ASKED

Quadeca

19

Always Have Always Will

Jane Remover

20

SLAM PUNK

Che

21

Akibare

Mylta

22

My life is mine alone! (feat. nenne)

Mylta, nenne

23

disarmed

kumosai, Sayako

24

spectrum

icesawder

25

NOWNEVER

Jaron

26

Pretty Peach

Lucy Bedroque

27

How to Pretend

Lucy Bedroque

28

Knot Me

Lucy Bedroque

29

Sweet Pitcher

Lucy Bedroque

30

Thousand yard stare

kmoe

31

angels in camo

Jane Remover

32

Professional Vengeance

Jane Remover

33

Dreamflasher

Jane Remover

34

Experimental Skin

Jane Remover

35

Psychoboost

Jane Remover, Danny Brown

36

Dancing with your eyes closed

Jane Remover

37

Spider

venturing

38

Believe

venturing

39

alucarda lives!

smiling broadly

40

fake blood recipe

smiling broadly

41

flower bed

defsharp

42

sheaskedwhatmylifeislike

ericdoa

43

Caught up (in circles)

Syzy

44

Pastel Express

Cynax

45

St. Chroma (feat. Daniel Caesar)

Tyler, The Creator, Daniel Caesar

46

let's go home

Jane Remover

47

can you tell?

Jane Remover

48

champ

Jane Remover

49

pretender

Jane Remover

50

kodak moment

Jane Remover

51

movies for guys

Jane Remover

52

misplace

Jane Remover

53

Catch me if you can

tn-shi

54

natural

zeroth

55

mint

Snail's House

56

Emerald Lakeside - Action

はがね, Kitsui Akira

57

back off!!!

Jane Remover, kmoe, juno

58

one more life

Murphmusic, park.

59

Clinozoisite

Ludicin

60

Duhhhhhhhhhhhhhhhhh

underscores

61

Rabbit In The Black Room

Rabbit House

62

String Theocracy - Key Ingredient ver.

Mili

63

My guy (Corporate shuffle)

underscores

64

Wizards

xaev, mopearound

65

Everything Goes On

Porter Robinson, League of Legends

66

phobie d’impulsion

glaive

67

PUSH UR T3MPRR

femtanyl

68

Amethyst Aurora

BilliumMoto

69

the now now and never

what is your name?

70

Reverse Nightmare Tower

bye2

71

pop music

Limonène

72

EXACTLY WHY I'M STILL HERE - TURQUOISEDEATH Remix

bunnyprodge, TURQUOISEDEATH

73

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

glaive

74

Tojita Sekai

Camellia

75

commatose

glass beach

76

200

glass beach

77

until the dawn breaks

Deathbrain

78

dumb party

Internet Girl

79

skinz

8485

80

Algas Danses

seatrus

81

うみのゆき

seatrus

82

Palmy Flakes

seatrus

83

Cloud99 (As Above Mix)

Machine Girl

84

enchanted love

linear ring

85

Midnight Theater

Kano, Nagi Nemoto

86

Mola mola

Marmalade butcher

87

Another Ride

ippo.tsk, Synthesizer V ANRI

88

neon glow

glass beach

89

I Still Miss You

bo en, Tomggg

90

(We Are) Friends

bo en, Winamp Boys

91

Our Time

bo en, PAS TASTA

92

Kansoku-eisei

Nanahira, Camellia

93

GURUGURU

Snail's House

94

About 10 Hours of Doubting Myself

Yem

95

GHOST OF LORELEY

lasah

96

awesome ends with ME and ugly starts with U

c0ncernn

97

DILF repellent

c0ncernn

98

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

ShibayanRecords

99

lastnaut

Sleeping Pola

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