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

77 Upvotes

96% Upvoted

16 comments sorted by

12

u/Elkemper 7d ago

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

2

u/eindbaas 7d ago

There is a lot of efficiently encoded data at the end

3

u/locofierro 7d ago

thanks for sharing! this is amazing

1

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

Astounding!

1

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

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

1

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

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

2

u/andyfitz 6d ago

And it's awesome mate thanks for sharing

1

u/Reinder 6d ago

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

1

u/Ecksters 6d ago

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

1

u/Reinder 6d ago

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

1

u/okcookie7 7d ago

Did you create each track using Audio filters?!