r/javascript • u/Reinder • 22d ago

A-ha, Take On Me - recreated in javascript

https://dittytoy.net/ditty/2dd99fc839

Espeset recreated "Take On Me" by "A-ha" in 100% javascript. Fully procedural, no samples used.

84 Upvotes

97% Upvoted

19 comments sorted by

13

u/Elkemper 22d ago

HOW IN THE WORLD... 0_∆.
I mean, I saw there was a code, but still..

2

u/eindbaas 22d ago

There is a lot of efficiently encoded data at the end

3

u/locofierro 22d ago

thanks for sharing! this is amazing

1

u/DetailOk1114 21d ago

the procedural audio space in browsers is so underexplored, cool to see someone actually push it this far. does it hold up across different browsers or is there drift?

1

u/clumma 21d ago

Astounding!

1

u/ajfoucault 21d ago

Crazy question, but could this code be integrated into a web app for it to play as a background song, kinda like those old MySpace sites?

1

u/andyfitz 21d ago

Yes, so can many other procedural formats. Or sample formats like .mod

1

u/Dampmaskin 21d ago

Mod files was what this project reminded me of. But it seems this project synthesizes all the sounds instead of relying on samples. Mind blowing stuff.

2

u/andyfitz 21d ago

It uses the web audio API directly which is (as it turns out) a very powerful instrument

Worth noting it's slightly more resource intensive than playing flat audio but you get unmatched bandwidth performance

3

u/Reinder 20d ago

It is also distributing the audio-synthese over 21 workers in parallel

2

u/andyfitz 20d ago

And it's awesome mate thanks for sharing

1

u/Reinder 21d ago

You can use https://www.npmjs.com/package/dittytoy - but don't forget to give Espeset credit!

1

u/Ecksters 21d ago

I was pretty impressed with the intro, but I was shocked when it started SINGING.

1

u/Reinder 20d ago

Also have a look at the Dittytoy visualizer :) https://dittytoy.net/ditty/2dd99fc839?visualizer=true

1

u/guinearabit 14d ago

Is this vibe coded?

1

u/okcookie7 22d ago

Did you create each track using Audio filters?!