r/javascript • u/Reinder • 18d 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

96% Upvoted

19 comments sorted by

11

u/Elkemper 18d ago

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

2

u/eindbaas 17d ago

There is a lot of efficiently encoded data at the end

3

u/locofierro 17d ago

thanks for sharing! this is amazing

1

u/DetailOk1114 17d 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 17d ago

Astounding!

1

u/ajfoucault 17d 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 17d ago

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

1

u/Dampmaskin 16d 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 16d 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 16d ago

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

2

u/andyfitz 16d ago

And it's awesome mate thanks for sharing

1

u/Reinder 17d ago

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

1

u/Ecksters 17d ago

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

1

u/Reinder 16d ago

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

1

u/guinearabit 9d ago

Is this vibe coded?

1

u/okcookie7 17d ago

Did you create each track using Audio filters?!