JuicyDrop – Winamp Music Visualization with JavaScript and Canvas

http://www.nihilogic.dk/labs/juicydrop/

by auchenberg • 13 years ago

66 44 13 years ago

nihilogic.dk

untothebreach• 13 years ago

Ah yes, Atwood's Law (http://www.codinghorror.com/blog/2007/07/the-principle-of-le...) strikes again.

talles• 13 years ago

My first thought ^^

JonnieCache2• 13 years ago

Ahhh, the days of milkdrop...

Best viewed via a crap projector thrown onto a hippie's face.

Surely we can simulate that in js as well now?

Fuck, we can probably do it in css.

prg318• 13 years ago

Speaking of Milkdrop, the sources of milkdrop 1 and 2 have been released [1]. A couple developers have taken the milkdrop 1 sources and built them into a cross platform visualization software called projectM [2]. Milkdrop forever!

[1] http://forums.winamp.com/showthread.php?t=214971 [2] http://projectm.sourceforge.net/

rplnt• 13 years ago

Actually, no. That's a winamp-like skin with some random audio player. I doubt that skin is in javascript and the player is generic something. Nothing like winamp at all. Audio visualizations in javascript would be a betetr title.

l0gicpath2• 13 years ago

The title does state that it's Winamp music visualisation.

leviathan• 13 years ago

when the OP commented it was: "Winamp in JavaScript. Yes"

Shish2k• 13 years ago

Can we just accept that javascript is as practically turing complete as any other language and move on with our lives? :P

ansimionescu• 13 years ago

Not before coding EVERYTHING in 30 lines of JS or less!

JonnieCache2• 13 years ago

Someone needs to write a js interpreter in 30 lines of js and then maybe we can draw a line under all this.

vbuterin• 13 years ago

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function () {
      if (xhr.readyState == 4) {
        eval(xhr.responseText)
      }
    }
    xhr.open("GET", "http://mywebsite.com/everything_doer.js", true);
    xhr.send();

arnarbi• 13 years ago

Turing completeness has little to do with it. JS was always Turing complete, yet these little exercises were not possible 5 years ago.

csmuk3• 13 years ago

Not desirable either. Not sure they are desirable now either.

Sephr• 13 years ago

These little exercises that "were not possible 5 years ago" were released... about 5 years ago.

mbillie1• 13 years ago

I keep hoping...

nailer• 13 years ago

UI appears but all boxes are dark on Chrome 31.0, OS X.

Edit: enabled Flash and it's playing. Looks like this is Flash/AS, not JS.

coldtea• 13 years ago

Not sure what you're talking about. This is plain Javascript.

k3n2• 13 years ago

I don't believe it is. I have click-to-play for plugins, which means that JS runs without issue, but I have to specifically allow any plugins, e.g. Flash.

I get the same thing as parent when I visit -- black boxes -- along with an indication in my address bar that plugins have been blocked.

Looking further at the source on index.html, I see this:

    soundManager.url = './'; // path to directory containing SoundManager2 .SWF file

So this is very obviously just a shell around a Flash file.

nashashmi• 13 years ago

Same here. I have flash blocked and I cannot see anything.

Tagbert• 13 years ago

In the code, I see this (currently blocked by flashblock) srcattribute="./soundmanager2_flash9.swf"

This looks like JavaScript controlling a Flash object, not just JavaScript.

fat0wl5• 13 years ago

I know everybody is tired of these Javascript POC apps but I think it's a testament to the fact that it's so easy to implement webapps vs desktop stuff, and can perform functionally well.

If Google released a version of Chrome that could camouflage itself as a desktop app (browser-based UI over C++ functionality, but that browser appears as it's own app rather than another damn open tab) I think we would see a flourishing of better desktop apps rather than just everything-you-can-think-of-stuck-in-a-browser.

EDIT: Funny I got downvoted because the responses that follow are probably the greatest amount of insight/interest on the whole page. The rest of the comments are just whining about how this isn't a perfect Winamp emulation lol.

jbroman2• 13 years ago

Have you seen the Chrome apps platform?

http://developer.chrome.com/apps/about_apps.html

It's pretty damned close to what you're asking for.

fat0wl5• 13 years ago

yeah this is close.... i just wish that it could be a layer on top of C++ or Java rather than js only. The point is that I want to make an app as powerful as a desktop app, just with this type of UI.

If you could run a c++/java app in the background and make RPCs to it from browser events, that would be closer...

zanny• 13 years ago

I don't know of a good framework to cache an app in localstorage so its available offline transparently. IE, you want it so once someone runs your "app" once, and adds it as an app (a .desktop file, whatever the equivalent in Windows is, etc) so that it only ever pulls the pages from the network when an update is found.

fat0wl5• 13 years ago

heh i don't want to build an APP!! that's kinda the point, lol.

i'm not an app developer. i make audio stuff with machine learning tools & I'm a web dev to pay the bills. But in this case all i really want is to build a desktop application (c++,java,whatever) and have a browser-based UI... but not have it appear as a browser tab.

csmuk3• 13 years ago

What you just described is pretty much Silverlight. It can do out of browser stuff.

fat0wl5• 13 years ago

Eh I don't want to program Silverlight though....... I'd rather just use html/css/js for UI.

islon• 13 years ago

It's not a valid javascript post if it doesn't say how many lines of code did you use.

Edit: grammar

ArekDymalski• 13 years ago

Oh, I hoped that would recreate Winamp's AVC. Sigh ...

drobati• 13 years ago

Posted 4 years ago. https://news.ycombinator.com/item?id=532080

jheriko• 13 years ago

cool tribute, but yeah... missing all the stuff that made winamp actually cool.

vcherubini• 13 years ago

Looks like it's a bit old if it's still using jQuery 1.2.6 from 2008.

k3n2• 13 years ago

Good eye, see drobati's comment -- it was evidently posted here 4 years ago.

djmollusk• 13 years ago

The mp3s that are commented out are the best ones.

l0gicpath2• 13 years ago

Audio visualisation/winamp-like/winamp/take your pick, it's still a cool experiment. I'm digging the music choice too.

laveur• 13 years ago

Forget the visualizer go to the article for the visualizer and enjoy pseudo-playing Mario Brother's in the Background!

JuicyDrop – Winamp Music Visualization with JavaScript and Canvas

Related Stories