Hacker News new | past | comments | ask | show | jobs | submit login
Webamp: Winamp 2 in the browser (webamp.org)
281 points by DyslexicAtheist on April 14, 2021 | hide | past | favorite | 104 comments



Hey! Project author here! Happy to answer any questions.

This project is open source and the code, and instructions to use it on your site, can be found here: https://github.com/captbaritone/webamp

Webamp's ability to render classic Winamp skins led to a collaboration with the Internet Archive where we preserved ~70k (and counting) classic Winamp skins.

I also built the Winamp Skin Museum (https://skins.webamp.org/) where you can infinite scroll through those 70k skins and try them out in your browser with one click.

Most recently I've been experimenting with improving the visualizer's performance with an in-browser Eel-Wasm compiler. Blog post here: https://jordaneldredge.com/blog/speeding-up-winamps-music-vi...

The project has given me lots of enjoyment over the years, and I'm glad to see that others are enjoying it as well.


Have you considered spinning off the visualizer as a separate project? I'd love to it running on its own, on top of any audio I may have playing on the background


Yes, it's already its own project and the developer who built it helped integrate it into Webamp.

https://github.com/jberg/butterchurn

If you want to visualize audio coming from the browser (Spotify etc) check out his browser extension: https://chrome.google.com/webstore/detail/butterchurn-music-...



Props for Diablo Swing Orchestra! Never would have expected to see that there.


Listening to them now - loving it


Good job! I am really impressed. Reminds me of XMMS as well of which I have great memories. Your blog post on the in-browser Eel-Wasm compiler sounds really interesting, will read!


How is the Skin Museum's default layout organized? I assumed by most downloads, but I'm not sure from where and the Archive sorts by views which is a completely different list.

Really impressive project, I was surprised how well it worked on my phone.


Thanks! The list is ordered by the most number of likes/retweets from the @winampskins twitter bot I run.

I wrote a post about the design of the site here: https://jordaneldredge.com/blog/winamp-skin-musuem/

And then gave a meetup talk based on that post which can be found here: https://www.youtube.com/watch?v=jEUr_NzP6xg&t=2s


Didn't expect that, the list seemed so similar to the ones I browsed twenty years ago I assumed they had the same source. I guess the collective nostalgia is very similar to my memory at least. Thanks for the answer!


This is great! I see there's Winampify but I can't figure out how I would connect my Spotify account to it. Any ideas?


Try opening one of the folders.


Oh nice! haha I kept trying different buttons on the player and settings, never thought to just click a folder. Thanks for this!


A couple years ago I tried to integrate this into a website specifically for the visualizations, but couldn't get it working... did the work you did on the visualizer just increase performance, or did it also increase support or ease of getting it setup on a new site?


Setting up Webamp with the visualizer is sadly not any easier. If you’re still interested, come join our Discord https://Webamp.org/chat and we can help you figure it out. This example would be a good start: https://github.com/captbaritone/webamp/blob/master/examples/...


That equalizer curve for the Rock preset is burnt into my memory, its shape, and color, and positions of sliders.

Say what you want about the skeuomorphic design, but it really felt great to slide the volume a bit higher when at your favorite part of the song. It really felt like a piece of hardware in your hands.


Mark this: Skeumorphic design is coming back, hopefully not in the form of Neumorphic design [1], but it is going to make a comeback. Unfortunately, designers will latch onto the worse of both - there is already a huge interest in neumorphic design which is basically flat material UI x skeumorphism, but the combination is worse than the individual parts.

Just today, I was reading comments praising Coinbase UI. It is just cliches piled on top of cliches by designers. Everything that happened between 2010-2020 made UI worse in many ways.

Winamp UI was whimsical, functional and successful.

[1] https://www.justinmind.com/blog/neumorphism-ui/


Oh god I hope not. Neumorphism is just what dribbble "designers" who have 0 idea about usability like to drool over the past couple years. Absolute drivel.


Buttons are going to look like buttons again? Depth and borders are back? Can't wait for this!


I don't really see what's wrong with it.

It's not far off from 90s UIs but with more circular elements and less gray. Those UIs are viewed as very functional in retrospective.

However, I thought then and still think now that it's a bit ugly.


Lack of borders.


Terse but unhelpful.


This type of design would work well with "shape-changing" displays: https://appleinsider.com/articles/17/03/21/apple-patents-sha...


Somebody will start adding colour, then a little texture here and there, then some nice satisfying sound effects and we'll be back where we should be!

Hrm, I wonder if you can activate a phones rumbler from the UI for tactile feedback.



considering how much it can be abused, it might be for the better


I really miss having an equalizer actually. I just realized to day I haven't seen one for years!


Wow. I was expecting the UI to feel dated/retro, but it still looks really good. And the window snapping behavior is still as satisfying as it always was. Timeless?


Yes, i was quite surprised too. I can't figure out if i actually like it more or if it's just nostalgia. It's like modern interfaces are way to flat and everything are is just floating in empty space with too much whitespace and not enough texture and depth.

Is something very wrong with modern interfaces? Quite interesting..


Modern interfaces revolve around mobile and touch interfaces. The narrow/small buttons don't work consistently enough in this context and presents many usability and accessibility issues.

I look at it and remember those days, and the system was quite usable with a high resolution mouse to be the primary interface. While I can use it on mobile, I would hate to try to do so under any kind of degraded condition. Cold fingers, inclement weather, driving in a card/bus/train.


Touch interfaces don't have to be flat though.


No, they don't have to be flat. There are two items that hinder it. One is that winamp has a fixed size, modern layout systems have to support a multitude of screen sizes, which is a hard problem. Throw on some nice 3d texture as a full skin and getting that to work is much more difficult. It's not impossible, but some of the items on the skins would be very hard.

The other big one is accessibility. People with poor eyesight can struggle when the system has low contrast.

3d buttons or adding depth to controls and the like are pretty simple and don't have any major impediments that I'm aware of. I often will accent my GUI designs with a light touch of depth.

I can't tell you for sure as to the evolution of the systems, I design modern systems and while I did toy with GUIs back in that day I didn't do major systems then - I was a kid. Aesthetics takes a major backseat to usability in my work.

Though I'd say that some of today's look and style is much like clothing. It's a style of the day.


E.g. iOS <7


Past related threads:

WebAmp: WinAmp 2 in Your Browser - https://news.ycombinator.com/item?id=17583997 - July 2018 (41 comments)

A Reimplementation of Winamp 2.9 in HTML5 and JavaScript - https://news.ycombinator.com/item?id=16333550 - Feb 2018 (208 comments)


I'm sure some (most) of it is just nostalgia, but Winamp, to me, represents the pinnacle of internet culture.

A free, infinitely-customizable piece of software, playing a simple and open-ish format (open for everyone who wanted to use it by figuring out how to use liblame), sharing files of dubious origins, ...

I guess basically I liked the internet better when it was just a bunch of shady pirates running amok.

Except, I'll keep my fiber internet.


One of my first practical pieces of software I wrote was for Winamp. I noticed at the time Winamp didn't support using the Media Keys unless it was focused. So I whipped up a simple application that listens to the media keys, then forwards the message to the Winamp process directly.

I haven't used a media player since Winamp that I like as much as I liked Winamp. I really miss it.


Such happy memories. I am using QMMP on my RPi4 these days and using CherryMusic to also offer the same giant directory of music to my other devices over HTTP, whilst running a classic WindowMaker desktop for lightness and speed. It's the pinnacle of computing in my opinion! xfe, xfimage, pluma, geany, qmms. Happy speedy computing!

I loved the old Winamp where you could set it to be always on top, and then simply Alt-Shift-Tab on Windows and know that it'd focus Winamp, then use B, C, V whatever.

I used to use xmms on Linux for a while I think but I couldn't seem to find anything like what I remember in the repos.

Anyway, interesting project and like the milkdrop implementation! I seem to remember Goom as some plugin?


I remember using a plugin where I could setup my Microsoft Sidewinder to skip songs and control other settings. I felt very advanced to have such controls.


I know some low budget radio stations use winamp to output their playlists, mostly because of the shoutcast plugin. It's crazy, but it kinda works.


They might find idjc really helpful.

http://idjc.sourceforge.net/index.html


I've checked it out and run it on various things. It might be a better choice, but pretty much only because it's current and maintained.

The use case is a little different. IDJC has a lot of features for live DJs who are doing stuff. If you just want to run a playlist, winamp is actually a little more usable, and the shoutcast plugin also streams your audio input device. Our live DJs just press pause and do their thing with records and CDs, then they kick the playlist back on when they finish. For remote broadcasting, we just use BUTT. IMO, both BUTT and Winamp are easier than IDJC for most volunteer DJs

I'm a tech volunteer for our local LP-FM station.


Now you can really whip the llama's ass...on the web


So many memories. From a time far away. Before I got my first Macbook. When computer were honest. When the underlying OS was ugly and nobody cared if apps used their own style.


Very nice. Also looking at Milkdrop visualizer and CPU utilization on 4K full screen it seems that they did based on WebGL. Great work.


https://github.com/jberg/butterchurn This is the visualizer that they're using.


someone (podiki) submitted butternchurn to hn[1].

this is 50% of the winamp2 experience. glad to see it again.

[1] https://news.ycombinator.com/item?id=26813265


Yes, Milkdrop! Never seen anything nearly as good since then; lost many an hour staring at Milkdrop listening to music....so good.


We recently took on a project to use Wasm to speed it up a bit. Blog post here: https://jordaneldredge.com/blog/speeding-up-winamps-music-vi...


Seems like you need to be on Chrome to see that.


Works fine here on Firefox


I see it on Firefox just fine


nope, works well with firefox 78.9.0esr from debian stable


Must just be incompatible with the default configuration of Safari then.


Safari does not currently support WebGL2, which is the blocker. They support it behind and flag, and it seems to work there, but until they enable it by default, Butterchurn will not work on Safari.


Since XMMS2 ist not supported anymore, any other winamp compatible linux player?

https://en.wikipedia.org/wiki/XMMS2


guayadeque https://github.com/anonbeat/Guayadeque

It looks different but I always found it to be very similar.

Haven't used it for long though.


audacious media player


Its close and I use it but I have trouble getting the MPRIS/playback controls working right


Very cool! I am particularly intrigued by the "full-colour" bitmap font approach you took. (I'm trying to get a Fallout 2 font into my F2-inspired browser game, and so far I've managed to get PNG-in-SVG-in-OT working in everything except Chrome. Infuriating.)

I want to ask, did you notice any performance hits when wrapping each character in its own <span> with background-image? Do you think that would scale for a page with up to ~2 screens of text at one time?


I'm a bit lucky here in that the number of characters on the screen at any given time is bounded, so at max we have maybe 50 spans, which should not be a big deal.

I'm not sure how it would scale. In general, if you employ windowing all UI rendering issues are bounded by the number of items visible at a time which can let you get away with a lot of craziness, but if the number of items on the screen is as much as the number of characters on the screen... that could end up being a bit much.

I know a lot of things like that end up using shaders to render text, but that is a lot of added complexity.


This bring me tears to my eyes. Nostalgia. Thank you!


Anyone know what happened to Winamp?

They got bought by a company who said they were working on another version, and then nothing.


An updated version got "leaked" about two years ago, then they decided to release that for real. https://winamp.com/


I never understood the llama-whipping.



Hey, wouldn't it be cool if someone connected this to youtube or Spotify or something?


For Spotify, someone has! Check out: https://winampify.io


All right! Thanks!


Visualizations kick ass, I bet they are even better than original. Enjoyable thing but playlist could be larger! It ran out of songs pretty quickly and the show was prematurely over.


You can drag in audio files from your hard drive if you want.


Ah so many parties with just a playlist on winamp and drinking cheap spirits in college :) . Thanks for bringing back a couple memories haha.


Very nice! This would be a great lightweight alternative to ampache when the goal is to share a handful of songs and have a great UI.


Works great! Now if only I could find the Yaxay3 skin :-(



I also built https://skins.webamp.org which might be helpful for this.

Is it one of these? https://skins.webamp.org/?query=Yaxay3


Is it possible to make it run out of the browser like an electron app?

Sorry for suggesting electron but it could be the ultimate multi-platform winamp clone.


> Sorry for suggesting electron but it could be the ultimate multi-platform winamp clone.

That however would defeat best Winamp's feature: being light and fast, which is the number one reason why I kept using the classic one ignoring all following versions until my last day on Windows. Today I use qmmp under Linux, which is close enough (has been ported to Windows too).

https://qmmp.ylsoftware.com/


Thanks for the tip, will try this out as it seems to have waveform support (a must for me).

I've been using Nulloy for a while, also pretty nice and minimal https://github.com/nulloy/nulloy/


As a novelty, we actually already tried that: https://desktop.webamp.org/

Note: Nobody thinks this is actually a good idea, but it's kidna fun.


Chromium Edge reports this download as unsafe with the message:

This app might harm your device Microsoft Defender SmartScreen reported that this app is not commonly downloaded; you should only open files you trust.

Name: webamp-desktop-web-setup-0.3.0.exe Publisher: Unknown


Probably good advice


It's fine, that's what Windows Sandbox is for!


You could just download and install Winamp, couldn't you? I know for a fact that it runs in Wine.


winamp 2 had at least one exploit that I got burned by a few times. Which is why I finally upgraded to 3, back whenever that was.


Yep, MP3's contain a lot potential places to launch exploits from. No reason to use a vulnerable player.


Have you tried re:AMP? https://re-amp.ru/


I'm not a desktop or a ui engineer by trade so I don't understand the contention with Electron. I know slack uses it and _seems_ to work fine but I have heard similar phrasing around "sorry for suggesting electron" and I'm curious to learn more about the cons of electron.


The reason a lot of people groan when we hear Electron is that it requires modern-ish hardware to do the same exact things that worked fine on hardware from 25 years ago.

The reason a bunch of people use it anyway is because they have to be cross platform, and target the web.


And because UI toolkits are generally not that good. Especially the cross platform ones


That accusation is quite the stone to be throwing around in the glasshouse that is the web technology stack. A portable version of Win32 would be infinitely better and more accessible than anything the web can come up with.


Many Electron apps are sluggish and use more resources than necessary for the problem they're trying to solve.

For example, IRC was doing most of the things Slack (desktop client in Electron) does, but 20+ years ago when computers were a thousandth (or less) as powerful. IRC clients were snappy to load and interact with, didn't use a gigabyte of RAM, and didn't eat a CPU core.

From https://tonsky.me/blog/disenchantment/:

> Your desktop todo app is probably written in Electron and thus has a userland driver for the Xbox 360 controller in it, can render 3D graphics and play audio and take photos with your web camera.


Also, before Slack there was Jabber and MSN/AIM, and with Kopete you could do the same you can do today in slack but by using 1/10 of resources.


Simple: you're running an entire web browser and all its requirements like network support, image decoding and other support features to interpret a javascript program for the task of playing an mp3 that should be way lighter than running a browser.


Also, there's a lot of overhead compared to running a new tab in a browser. It's basically an entire browser for a single tab.


Pros: you run your web app as a local app without reprogramming your app.

Cons: you are literally running a web app in a browser and not a native app.


Multiple executables ALL running their own version of the chrome browser - absolutely no resource/code sharing ?

Teams, Slack, VsCode, Adobe products, Vscode, Signal, The normal chrome browser, Microsoft edge browser

Providing a better user experience than "normal" desktop apps ? Really?


No but you can try this it works great on my machine! https://getwacup.com/


You can use Audacious https://audacious-media-player.org


There's a related project that forks and wraps it as an electron app.

The source code shows it's pretty much just a react app, but slick!


Unless this includes Winamp's modularity and plugin architecture then it would not be a Winamp clone


You can use XMMS, it supports old Winamp skins.


It would be nice if you could play a youtube playlist in this interface... probably the best media player ever ;)


It would be nice if you could use this as a simpler, more reliable frontend to YouTube Music.


or maybe VLC could clone the interface




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: