The Changelog: Software Development, Open Source - Winamp2 JS (Interview)

Episode Date: April 6, 2018

Jordan Eldredge joined the show to talk with us about Winamp2-js — a reimplementation of Winamp 2.9 in HTML5 and Javascript. For many of our listeners, talking about Winamp may bring to mind some extreme nostalgia about the internet of the past ... and it's certainly that way for Jerod and I. Jordan started this project in 2014 and it's what ultimately got the attention of some folks at Facebook, where he now works on Nuclide. We shared stories about Winamp back in the day, actually listening to music as an mp3, the technical hurdles and learning Jordan has experienced, skinning it, playlists, making it a frontend for Spotify -- which is so ironic to actually say. Also, Jerod has been hacking it via livestream on Twitch to add it as an alternate audio player on Changelog.com.

Bandwidth for Changelog is provided by Fastly. Learn more at fastly.com. We move fast and fix things here at Changelog because of Rollbar. Check them out at rollbar.com. And we're hosted on Linode servers. Head to linode.com slash changelog. This episode is brought to you by Rollbar. Move fast and fix things. Resolve errors in minutes and deploy with confidence. Head to rollbar.com slash changelog, request a demo, get started today.

It's loved by developers, trusted by enterprises, and most of all, we use it here at Changelog. Move fast and fix things with Rollbar. Once again, rollbar.com slash changelog. All right, welcome back, everybody. This is the ChangeLog, a podcast featuring the hackers, leaders, and innovators of open source. I'm Adam Stachowiak, editor-in-chief of ChangeLog. In this episode, Jared and I talk with Jordan Eldridge about Winamp 2.js, a reimplementation of Winamp 2.9 in HTML5 and JavaScript. For many of our listeners, talking about Winamp may bring to mind some extreme nostalgia about the internet of the past. And honestly, it's the same way for Jared and I.

Jordan started this project in 2014, and it's what ultimately got the attention of some folks at Facebook where he now works on New Clyde. We shared stories about Winamp back in the day for all of us, where he now works on New Clyde. We shared stories about Winamp back in the day for all of us, actually listening to music as an MP3, the technical hurdles and learning Jordan has experienced, skinning it, adding playlists, making it a front end for Spotify, which is so ironic to actually say. Also, Jared has been hacking on it via live stream on Twitch, so check the show notes for that link. And little did Jared and I know, but Jordan was a big fan of the show, which you'll learn about at the end of the show. I think the best place to actually start is by talking about this tweet that you put out

first year. And it was like, I don't know, it was huge, right? Like it was 3000 retweets or something. It was crazy. Well, that might be hyperbolic, but it was definitely popular. But that wasn't the first time to the rodeo. That was like, there was Reddit,

there was Hacker News, there was other stuff. And the thing we're talking about is called Winamp2.js. You can find it at webamp.com. Is it.com? It's not.org. Webamp.org. Let me share some coverage here because I was actually looking this up You can find it at webamp.org. Let me share some coverage here because I was actually looking this up as I was live streaming the other day, hacking on this WebAmp 2.js.

In the readme, Jordan has press coverage, and he's been covered by TechCrunch, Gizmodo, Motherboard, the changelog, which is in a different section but i understand and i was looking at the different dates and i was thinking do we scoop these guys so i looked at uh motherboard they they covered it in like february this year we scooped them i was looking at tech crunch it was like right after you know they saw motherboard posted basically and they covered it and that was like february you know, they saw Motherboard posted basically. And they covered it. And that was like February this year.

We scooped them. And I was starting to feel pretty good about myself. And then I went to Gizmodo's coverage of WinAM2.js. And it was like February, I don't know the month, but it was 2014. 2014. So props to Gizmodo for scooping this project up years ago. And I guess that helps us kind of date how long it's been around and how long you've been working on this. So tell us a little bit of the story. You know, it's four years later. What was this idea and

what were you doing back in 2014? Yeah, it's a funny backstory. So I was sitting in my room, just I don't have any idea what I was doing, but the memory of Winamp skins came back to me. And I guess for anyone who doesn't remember, Winamp skins was the way that you could theme Winamp. And the implementation of it was just a zip file that contained bitmap files, which were sprite sheets. And I guess at work, I had been doing some stuff with CSS sprite sheets. And suddenly this parallel kind of popped into my head that like, whoa, Winamp skins were sprite sheets. And I'm used to doing sprite sheets and I'm used to doing sprite sheets in CSS now. I wonder if you could sort of reconstruct the Winamp UI, uh, using CSS. And so I was like, Oh, that sounds really fun. So I sat down at my computer and, uh, tried to, you know, pull up some BMPs, realize that, Hey, browsers can still play or still show Bmps just like any other image uh and yeah

you could do it and bmp uh bitmap it's like a very primitive non-compressed uh image format yeah no transparency in bitmaps um but yeah so that that first little bit worked. And I was like, wow, that's pretty cool. And then I was like, well, how do you connect up the audio? And so I went and learned about Web Audio API stuff. And I got the main window. So it's like Winamp is broken up into three different windows. There's a main window, which has like play and volume and a little visualizer on there. And then there's a equalizer window and then there's

a playlist window, but I got just the first one working and I tweeted about it. Um, cause I thought, you know, Hey, maybe my friend Jake would think this is cool. Um, and yeah, it kind of blew up, um, back, you know, back then was that 2014. Uh, and, uh, I think it, that's, I think when you were saying gizmodo picked it up made it to news and you know that's like a exactly yeah it's like a uh someone who was i guess fairly new to sort of the mainstream tech industry uh that was like i don't know i was like over the moon that all these you know that i got sure posted to Hacker News and it was kind of unbelievable. And I guess maybe just that, that interest was like, well, I guess I'll keep working on this. And then, you know, four years later, I guess I haven't really ever thought to question whether I should stop.

How much time do you have into this? It's a good question. So it's a long-term project but it sort of goes in phases where I come back to it and work on it and then sort of walk away for a while. I'm a person who likes to have a lot of different projects going in parallel so that when I get blocked on one, rather than sort of being forced to solve a problem in an imperfect way, I can just sort of walk away until, you know, sometime in a shower, two months later, I'm like, Oh, Oh, that's how I could do it. And then, you know, I can come back to the project. So I really have no idea, but I, you know, probably often we'll spend, you know, three or four hours a week or, or more, you know, and on busy times when I'm really feeling it probably a lot more than that. Reminds me of a tweet I saw recently where it was a cartoon and we retweeted it. So if you follow us on Twitter, you'll see this, but it was a cartoon.

It was a brain and saying, Hey, to the person who owns the brain, essentially, Hey, you're going to go to sleep. And then the next pane, it says, yes, now shut up. The person talking to the brain and the brain says, I think I figured out how to debug your program. And then suddenly the next one is the eyes wide open. It's like, you know, just you're up now. You got to go to work. So, you know, it's nice to have those side projects where you can sort of like step away and do something different.

In this case, it's sleep. But you get the point. Take a shower? Yeah, take a shower. I like that. You know, it's got to give yourself room. And that's an interesting. You. Take a shower? Yeah, take a shower. I like that. You know, it's, you gotta give yourself room and that's an interesting.

You like taking showers? What do you say? Well, I think it's an interesting perspective to have a reason to have many projects ongoing so that you can break from one on blocks and still have fun and enjoy, you know, your craft, but not get stuck and be like

pulling your hair out. And I think that's another big advantage of side projects is that they enable you to work in that way where rather than, you know, being forced to solve a problem, if you don't have a good solution, you can just say, oh, okay, you know, putting that one on hold. Um, and you know, either, either I'll decide that it's important to come back and hack something in and move forward with something imperfect, or hey, I'll just sit it on the back burner and let it stew for a while. Whereas in work, you've got to ship, otherwise you're not going to get your paycheck.

So there's kind of two kinds of people and and probably a uh a sliding scale between them you have people with a bunch of ideas and no time to do them or maybe just enough time to work on one or two and then you have people with a lot of time and no ideas and then like i said there's a sliding scale but uh jordan you seem like kind of guy who's got lots of ideas and you also execute on some of them at least we've seen whenamp 2 will also probably get around to talking about URL.me which is cool as well. Where do your ideas come from and can you give somebody advice? I can't think of a cool side project.

How do you initiate a cool side project? It's really funny because I spent a lot of time feeling like I was in that first camp where I had all this time and like, I really wanted to be doing something cool, um, or to be like participating, but I didn't feel like I had any ideas. And I think as you pointed out, you know, now I'm sort of transitioned into this other situation where I've got, you know, more things that I want to do than I have time in which to do them. And I was looking back at, you know, all these projects that I've done, and I'm definitely like a side project kind of oriented person. And I realized that the one

like theme throughout them is trying to do something in a medium in which that thing is surprising. So with like Winamp 2.jsamp2.js, I think it's somewhat surprising that you can do as much as you can, that you can re-implement to the level of detail that is possible inside of the browser, which is a pretty tight constraint. And with URL meme, which you said we might get into later, which is like a meme generator where the URL is the user interface,

so you should be able to generate a sort of, you know, a quote unquote meme image by just typing a URL. You know, it's again, like, I think a surprising thing that you could actually do that. And looking back at all my projects, I think that's sort of the recurring theme. And the inspiration then I think ends up coming from understanding the technology and thinking about the things, you know, learning about the features of the technology and then those ideas sort of bubbling around in your brain and overlapping with other things that you've come across in your life. So, you know, this example of, uh, when I'm being inspired really by this idea of CSS sprite sheets overlapping with my memory of, uh, you know, hacking on Winamp skins as a teenager. Um, so I think, you know, I wish I had like a direct, like go do this thing and you will have great ideas. Um, but I think really it was when I started having a deeper understanding of technology and exploring sort of the edges of obscure APIs and things like that that these ideas started coming to me more regularly.

Yeah. and discuss what makes something interesting or what makes it popular or what resonates with developers because those are things that I think intellectually stimulate us. And obviously we're in the arena of covering those kind of things and talking about them. And Winamp2.js specifically had two things going toward it. The first was an extreme amount of nostalgia that it invokes to most people who were around either, I guess,

in the formative years or older in the late 90s, early 2000s when it was very popular. And then secondly, this little bit of a surprise factor that impresses you that you can actually do this in the browser. this little bit of a surprise factor that impresses you that you can actually do this in the browser. It has those two aspects to it,

which makes it very I don't want to say necessarily viral. I guess it has waves of coverage and has resonated with so many people. It's sticky. Thank you. It's sticky. You turn back somebody's time a little bit, especially somebody who's sticky. I mean, like, you go back, you turn back somebody's time a little bit,

especially somebody who's actually used this to play music, not just look at it as this thing here, which is cool, of course, but somebody who's used it and managed playlists and, you know, fine-tuned the EQ to their favorite rock song or whatever. Like, you know, you kind of bring out this inner child, you know, this childlike joy that we don't often get to face because, you know, you're stuck on a block and you don't get enough side projects or you got to ship because you got to get a paycheck, as you said earlier. Like you give that back and then you're like, oh, then go one step further and dig a little further into this open source code base that if you want to learn something, hey, this is how you learned it. Yeah, I think the nostalgia angle is really huge. And I think, you know, if I have any advice for like how to come up with a side project that is going to generate interest, it's, you know, ride somebody else's coattails as far as possible.

Because really, that's, you know, that's what it is. You know, this thing has gotten, you know, like posted in a bunch of places with, you know, comments. And every time I read through the comments, you know, maybe 5% are actually about the project and the rest of the comments like, oh man, Winamp, uh, you know, I still use Winamp or Winamp was the best and everything, you know, more recent is garbage. Um, but that, and I think, you know, the same, that was the same impetus for me doing it was I have, like you said, this sort of emotional memory of this MP3 player from a time that was formative for me, both as a person, right? Like music as a teenager, which I think is probably the people with whom this is resonating the best. Um, you know, the way that you consume music as a teenager has got to make an imprint on you because music is so important, I think as a, in your, in your teenage and college

years. Um, and so I think much in the same way that that's what has maybe driven the interest in this. It was also what drove my own personal interest in it, um, was, you know, wanting to recreate those experiences. In fact, um, you know, I said that the original idea came from Winamp skins. And that was actually, I think the first like constructive thing I ever did on a computer, you know, where I went from a consumer of software to, you know, creating something from nothing, uh, which is, I think a really powerful moment for any, I probably almost any programmer can remember that first moment when you like sat down at a computer and then sometime later, a thing existed that didn't exist before only out of, you know, your time and your brain. Uh, there were no, you know, you didn't have to go to the

store and buy parts. Um, it was just your idea made something new in the world. And that experience, I think, even though, you know, there were, I was making the world's ugliest wind amp skin that never saw the light of day and nor should it have. Um, but, but I think that was really informative and I see a direct line, that experience through to writing software today. And the experience of working on Winamp 2.js definitely feels like that same kind of joy of sitting down at a computer and making something that didn't exist before exist just from your own, you know, time and, and mental energy. Yeah. Well, Winamp definitely has the same warm, fuzzy feelings for me as well. I didn't take it as far as you, I didn't actually create skins, but I do remember this was like specifically for me is attached to Napster and the timeline in terms of like what was happening at the same time.

And it was like, you're waiting for your files to download, right? And they were taking forever because the internet was slow back then. And while you do that, what do you do? Well, I'm just out there downloading WinAMP skins and swapping them out and creating playlists and just wasting hours upon hours. And I never quite made it across the void like you did to like, I'm going to create my own. But it definitely had, you know,

down the road, I had times where I peeled back the covers and saw the power of programming. Adam, were you a Winamp user back in the, back in the day? I was. And actually your story reminded me when it talks about skinning was skinning forums. That was a huge thing. I can't remember the most well-known forum. Maybe you all might remember the brand name of it but it was the most used and skinning those and skinny win amp was like the coolest thing and yeah i was never cool enough to do either yeah i totally remember having these like you know downloading these these skins and uh and just being like, oh, my God, the people who made these must be like, you know, the most massive, you know, kings among men. And, you know, through this project,

end up connecting up with a couple of people who were, you know, sort of big time skinners back in the day and had made some of these very cool skins. Um, and it's really funny, you know, having a little bit more perspective in life, uh, getting to, to talk to those people. And, you know, certainly the work that they did was really incredible, but I, you know, the outsized presence that those people had in my mind as a teenager is really funny to look back on, you know, these days. Someone out there is screaming VB Bulletin because that's what it was called. VB Bulletin. Or VBulletin, I guess, is probably.

And not VB. VBulletin. Was that a specific website or was that just the forum software that that's the forum software i think that was like the most popular and a couple others that i recall but yeah envision i think might have been the other one phpbb what year did that come out that's the one i was thinking of phpbb i was thinking of vision and then v bulletin and yeah phpb as well that was in the mix too but yeah you'd hang out on these forums. You'd find people to connect with.

Like this is the old days of the internet. And like you would, I guess you still do that, but like that was the only way then. That was pre-blogs where it was like on the cusp of blogs. Right. And it was totally in the era of like Napster

and downloading music when it was, you know, you did it not because you wanted to steal. You did it because it was new. You know, it was, I never, I don't music when it was, you know, you did it not because you wanted to steal. You did it because it was new. You know, it was, I never, I don't, maybe I was, I was probably poor then too, but so I probably had to, I couldn't afford it, but I don't think I did it because it was like, I want to steal your stuff.

It was more like, that's how you do it now, I guess. I mean, it's the world's changing. I don't know. MP3s, give it to me. That's changing. I don't know. MP3s, give it to me. That's right. Yeah, I think it's hard to untangle the experience of Winamp from the experience of digital media, digital audio being available for the very first time and sort of just skyrocketing into the mainstream, uh, and, you know, suddenly this huge availability of, of music and the ability to just ingest, you know, music from all over with very little friction. Um, I think, I think everybody who went from, you know, through that transition from, oh, you only get music at a CD store when you can drop, you know, 10, 15 bucks on a CD to, uh, you know, Oh, everything

is suddenly available to me at my fingertips. And I think that feeling is probably very, it's probably a very important, potent part of the emotional reaction that people have to win. I would guess. And not just music that you could buy at the CD store. Is that a thing? When you said CD store, I was like, CD store? That's interesting. What is that called? Music store.

Music store. A record store? A record store. Yeah, it has been a while. You should label it by the media type. CD store. We used to go to the MP3 store. But actually new music, things that didn't exist outside of the digital, right?

Like the covers and the remixes and these, like, the MIDI stuff. There was so much new. Yeah, bootlegs. But one thing I want to ask both you guys, I guess, open question, because as developers, even asking Jordan, like, what's something that, you know, what's some secrets to creating something that will resonate with the community? Thinking about Winamp, in this case, you're tapping into the love of Winamp to a certain degree. But if we're thinking about Winamp as a software product and what people loved about it, we want to create things that people love, right? That gives them value and joy. Are there lessons we can learn aside from the one that it's attached to music and that was also formative and important to people? What was it about Winamp that we all loved about it?

Was it the customizability? Was it the interface? What do you guys think? Right time, right place. That's all? I mean, it was cool, but what else competed like you might have had like windows media player maybe yeah you know like there was nothing that was like that was catchy sticky that allowed you to like uh jordan said earlier become the creator you know come something

from nothing that didn't i don't think windows wanted you to change their media player so that might have been the customizability of it and the timing i i think you know you're you're you're kind of spot on with the timing but i think there's another aspect to it as well um which is that it was a little bit punk uh i think at that time the um the mp3 algorithm was still like under, like, you know, you couldn't use it without a license. That's right, yeah. And then somebody like leaked it or something like that. I don't, someone probably knows the story better than I do, but there was the Fraunhofer Institute or whatever. Somebody like leaked the source to an MP3 decoder engine,

and suddenly it basically became possible for anyone to integrate it. And I don't know what the legal implications of that were, but I think basically that patent suddenly became indefensible. And so I think Winamp was one of the first to jump on that and be like, no, we're shipping this inside you know, inside free software. I guess that's another thing that's a big piece of it is that it was, you know, shareware or freeware or whatever, which I think was also, you know, another thing of that time.

Yeah, it didn't cost you anything. Exactly. And it had to catch its song, or not the song, the tagline. I mean, that does play into the punk, or at least it had attitude, right? Yeah, and I think a lot of that's attributed back to, you know, sort of the main guy, Justin Frankel, who created it. And, you know, maybe your listeners know sort of the story of him that after he sold Winamp, or I guess he and Nullsoft sold Winamp to AOL, there were a number of

stories about his behavior within AOL because he was, you know, then on, on contracted to, you know, or to, to stay on the project for some number of years. But he did not fit in at AOL at all. And so he was like releasing peer-to-peer file sharing software, like on AOL's website against his boss's wishes and a bunch of other stuff after they paid him millions and millions of dollars payday. Yeah, so according to the history books,

they sold it to AOL in 1999 for $80 million. And the nostalgia for Winamp 2 specifically, because you didn't build Winamp 3.js or Winamp 5.js, even though these things exist, is that once AOL took it over, it lost a lot of the things that people loved.

There's a major rewrite, new UI. It was very AOL, which is like anti-punk, right? It's like the most mainstream thing, company at the time. And so another reason why I'm thinking why it's so nostalgic is because it reminds us of a better piece of software

than, you know, currently exists and kind of like the glory days. Yeah. Well, you know, it was fast. And I think we have a lot of, maybe as a JavaScript developer and, you know, I feel this a little bit,

you know, more cutting than others, but, you know i feel this a little bit you know more cutting than others but you know this sort of uh rebelling against you know modern high-level languages which you know are comparatively slow and resource heavy uh you know hey it was it was fast and it was you know graphically beautiful or i guess depending on your aesthetic tastes. But yeah, I think the fact that it was a singular vision from a very singular person, I think, and then it was just well executed on top of that. And it wasn't compromised into any kind of corporate requirement. It was like this was the thing that Justin wanted to build.

And that, I think, has a lot of power. This episode is brought to you by Linode, our cloud server of choice. It's so easy to get started. Head to linode.com slash changelog. Pick a plan, pick a distro, and pick a location, and in minutes, deploy your Linode cloud server. They have drool-worthy hardware, native SSD cloud storage, 40 gigabit network, Intel E5 processors, simple, easy control panel, 99.9% uptime guarantee. We are never down. 24-7 customer support, 10 data centers, 3 regions, anywhere in the world they got you covered.

Head to leno.com slash changelog to get $20 in hosting credit. That's 4 months free. Once again, leno.com slash changelog. So, Jordan, you've been working on this off and on for four plus years. Surely it's taken different forms. I notice now it's built with React and Redux. Those things didn't exist in 2014. So take us through some of the history of the software itself, maybe some technical hurdles or interesting bits, and we can talk about all that's packed into Winamp2.js.

Yeah, yeah. So originally it was written in jQuery and I think it didn't last very long in that form. But I honestly didn't know JavaScript at all when I started the project. Like I was trying to figure out like how do you make a class, which of course is not a thing, or how do you split this across multiple files? Were you used to coding at the time? I was just writing bad PHP and bad jQuery, stitching together plugins and whatnot. And it was really this project that taught me JavaScript. I was curious about it, so I'd come home each night eager to try to make it better. whatnot. Um, and it was really this project that taught me JavaScript. Uh, you know, I, I was curious about it. So I'd come home each night eager to try to make it better.

And as part of that, I ran up against my own, you know, limitations of knowledge. And so, you know, I kept having to learn like, okay, how do you actually, you know, like I said, do make a class or learn about prototypical inheritance and whatnot. And so I wrote it all in jQuery at first. It was very primitive at that point. It didn't do very much. And then pretty quickly, I realized that this wasn't really the right way to go about it. And so I rewrote it all in just what we call vanilla JavaScript without any framework at all. And it existed in that form for quite a while until I then I started to run up against limitations of that. And having learned a little bit about React at that point, I realized that this sort of declarative nature of being able

to rather than managing transition between states, just managing state and then, you know, a projection of that state into DOM state seemed like it made the right, made sense for this problem. Were those the bumps that you were hitting with the vanilla JS version? If you recall back then, like what were the particular aspects? Was it just like crazy amounts of state everywhere and you having to react to it or gosh yes i think that yeah i think the main uh the main thing is when you don't have this declarative um you know sort of react model of your ui being a function of your state you end up managing the transition between every state and so then you get this like your um you know your the complexity of your application

is exponential of the number of states that you have because you have to manage the transition between all of you know any two states have to be able to go between them. And so I was running into that with, you know, as I was adding more and more detail, the pain of maintaining that just, you know, was rapidly exploding. And so I felt a switch was necessary. And so, yeah, I switched to React and Redux. And, yeah, I think from there, you know, it was a pretty good fit for that, uh, for that model. Uh, but the, I think the real technical limitations were, were not, you know, like in the framework decision, but in the, you know, some of these, like I, you know, I think I said earlier about trying to do things which are surprising in a medium. So like, can you do the things that you can do in JavaScript that you might not think you could do? And some of those technical challenges, I think were a little bit more interesting. I think the most interesting one is, you know, Winamp2.js actually loads actual skin

files. And getting to do that inside the browser posed a bunch of interesting technical challenges. And I could go into that or not. But I think those kinds of problems were much more sort of interesting than what framework to use. Yeah, and that was a surprise to me. I assumed it was just going to be looking like Winamp and like the play button works and all that. But the fact that you can click the upper left-hand corner and swap skins was awesome.

And then when I actually cloned the code down because I was dorking around with it and I saw, no, these are actually just skin. This is not some sort of like, he didn't remake these skins. These are the actual, can you go download off of Adam's old V-Bolton forums, can you go download an old skin and pop it into WinAMP 2.js and it'll work?

Yeah, you can just drag it from your desktop right on top of it and it'll change. Uh-uh. That's not cool. That's what I say when I'm in complete disbelief. Uh-uh. You can do that. Yeah, yeah. It's a bunch of, it's hacks on top of hacks to get it to work inside the browser.

But yeah, I think once I realized that, you know, Winamp skins were just zip files of, you know, bitmaps and someone has written a, you know, JavaScript zip utility, it's like, well, okay, you can do it i guess so it unzips them and how does it work i mean yeah yeah so um some hacks the the you know the first step is right of course unzipping this you know binary blob and then you get access to these bitmap files um and then, of course, you need to treat those.

Those bitmap files can't just be used directly because those are sprites. And anyone who's done stuff with sprites might know that one of the limitations of sprites is that you can't do repeating tiles using sprites very easily because you'll end up repeating the whole sprite sheet. So we end up extracting the zip file, getting the sprite sheets out of the zip file, rendering those into a canvas, slicing the individual sprites out of that canvas into a data URI. And then given those data URIs, well, you might think,

oh, I can just set these as like background images on, you know, using JavaScript. But in many cases, you have to apply them to like pseudo elements. So like the hover state of an item or the like handle of a slider. And there's no way to do that from JavaScript. So what it ends up being is we get these data URIs and then we dynamically generate a CSS style sheet and then inject that into the DOM. So none of those things are particularly beautiful, but it does work. It does work. Which with a side project, it does work. It's pretty much what you're after, right?

Yeah, exactly. And I think actually the thing that was most interesting about it was not only does it work, but I feel pretty confident that even though it's not the right, it doesn't feel like a clean solution. It is the only solution. solution and and i think having a an excuse to do something terrible um where you're still doing the right thing is uh i think that's i think you know when i know i'm having fun so when you drop the the w whatever file wsz while you guys talking, I was hacking on some fun stuff here. Is it actually uploaded into your UI and then like deep pack? Cause it happened pretty quickly. I drug one on there and it, it changed it in real fast. Yeah.

So the, I think one of the limitations I set for myself for this project is there's no server component, right? So it's just JavaScript. So everything happens inside your browser. So it's, it's it, you know, when you add the file, when you drag the file in, I get access to, you know, a reference to that file and I can get access to the bits in that file.

And so, you know, it all goes from there inside your browser. Wow. Well, that was something you brought up actually in your Twitch live stream yesterday and i was thinking like that would be super cool and then i was thinking where do you even begin i don't know 1997 i think is where you gotta start yeah you gotta go back in time where do you begin jordan yeah i mean uh i guess if you want to make a skin all you really need to do i guess what you do is you go google Skinners Atlas, which was in 1998, sort of the canonical reference for how to write Winamp skins. And actually was a huge, was hugely valuable to me trying to reimplement all this stuff. Because I not only do I have to, I have to really fundamentally know how these skins get used in order to recreate the Winamp UI, you know, to a high degree of detail.

Yeah, and it's a bunch of bitmap files in a zip that's been renamed. And then there's a number of like config files in there as well. So some INI files and whatnot, which of course I also have to parse. Tangential, of course, but in this journey of yours, having to go to all these obscure, you know, to some degree, you know, kind of older websites that have information that not a lot of people are actually looking for anymore.

You got to deal with all these ads everywhere and this weird old school web too. Or maybe kind of new school. There's ads everywhere now. It's just like, is that a download skin button or is that an ad? Right. Yeah. Both. there's like this it has been an interesting experience with sort of understanding bit rot you

know and how you know these things that we sort of took for granted being around are not necessarily going to be around forever unless someone cares um and uh you know as part of that i actually uh this actually goes a little bit into one of the things that spun out of this project. Someone suggested I write a Twitter bot which tweets out Winamp skins. So if you go to twitter.com slash Winamp skins, I have a little bot there which once or twice a day'll tweet out a screenshot of a Winamp skin and a link to, uh, webamp.org with that skin turned on. Uh, but just as an, as an effort to sort of preserve some of these, uh, you know, these things that people put a huge amount of effort into and are really, uh, you know, iconic of that era. And sometimes it's because they're just like really

incredible and the craftsmanship that went into them and whatnot. And sometimes it's because they're just like really incredible and the craftsmanship that went into them and whatnot. But sometimes it's because they're, they're pretty atrocious and you're like, why is there a worm, you know, protruding from your MP3 player? That's a little bit strange, but it's impressive, I guess. Um, so yeah, I think, you know, I certainly didn't set out on this project with any kind of noble ambition. But I think in retrospect, if there is anything really valuable that has come out of it, it's that it does provide a way to take these artistic artifacts, which were becoming increasingly hard to share or to experience,, you know, sort of, you know, lower the barrier to entry there. And in fact, I've been, I've been reached out, I've reached out to some folks at the internet archive and looking into, you know, maybe ways that we could, you know, have a

collection of Winamp skins up there on the internet archive. That's a great idea did they yeah i think i tweeted something and uh a friend of mine uh tagged somebody else who i guess works there as a volunteer there and was like yes give me all of them in any format so i i still have to follow up with him and figure out exactly what uh you know what we can do and whether we i think my main goal goal would be if we could get a great UI for experiencing them and integrate it with WinAMP 2.js. But I don't know whether that's more than they want to take on. It looks like you can actually, by checking out your tweets,

it looks like you can actually inject a skin via URL. Yeah, if you pass a sort of carefully crafted um json uh in the in the hash of the url you can inject either an mp3 or a skin now mp3s and skins are both a little tricky because uh cross origin headers and whatnot uh so i i haven't exposed that's something that a lot of users have asked for is this ability to, you know, and in fact, Winamp itself could do this. You could paste in a URL and it would play it for you.

But alas, you know, due to the cross-origin restrictions, more often than not, that experience is not going to actually be good for the user. So I've opted to not expose it in the UI. So as part of that, a side effect or a side conversation might be, are you cataloging these things in an S3 bucket or something like that? Or because it looks like it's on Amazon AWS. Is this you kind of collecting these as you tweet these?

Yeah, so I got some huge zip file of many thousands of, um, of MP3 of, of, uh, skins. And I've been sort of reviewing them and, uh, you know, looking through them and picking ones that I thought were, you know, notable, I guess. Uh, so I mean, Pac-Man fever fever that was super cool march 10th that's notable so i there are definitely like i try to pick ones which are which are either interesting which are interesting not necessarily because they're great but because they are interesting so i try to include the ones that are you know great and also the ones that are surprisingly not great but yeah then i I just push them up to S3 because they do have to be available somewhere and that's a pretty

fast server and it's for me to host them there. And then somebody's not going to change the URL contents for you like you're pointing to something. Oh let me just change out this image for something malicious or just whatever. Right. Exactly. Yeah. So here's an idea. I'm still stuck on change log skin. So I'm trying to think of ways of getting. Yeah. So here's an idea. I'm still stuck on changelog skin. So I'm trying to think of ways of getting this done. So here's the plan.

So to the listening audience, this episode of the changelog, Jordan has agreed to host it indefinitely at webamp.org, which is his website for WebAmp2JS. Maybe we'll talk about names in a second. Webamp.org slash changelog. We'll link that up in the show notes.

When you go to that page, you can listen to this episode inside Winamp2.js. Now, how cool would it be if somebody, anybody out there, created a changelog skin that we can use on that player? So it's branded. Super cool, right? So if you have skills you have skills you don't have any skills you got time and you want to try this out contact us we would love to

work with you we even have like a bread a brand guideline you could use we have all of our colors our fonts like everything you need and you can just pull all the colors from our stock sheets too on the on the.com. I'm totally on board with this. I think this would be great. Awesome. So that's skins. Let's talk about other features because it's really quite functional.

You can separate the different segments, drag them around separately. You can resize. What all is in here that maybe people don't know? Yeah, I think it's taken on the form of like a puzzle box in that you open it up and it's like, oh, yeah, I can click play. But under the hood, the more you dig, I think the more little details that i guess just bothered me enough that i decided to do them uh will reveal themselves so uh you know the i think the simplest one is just you know you play and there's like a visualizer right so the there's two different kinds of visualizer if you click on it um in the main window it'll go between the sort of like bar

graph visualizer and a line graph visualizer and that's all hooked up through the web audio api um the equalizer works uh so you can uh you can twiddle the different levels of the different frequency bands and again that that works actually pretty simply through the web audio api once you work around a bug that i discovered in safari which depending on how you ordered things in the Web Audio API, it would just like hard crash like segfault Safari. So that took me like three months to figure out. But those are good ones. And then I think the window management has been interesting too.

So, you know, like I said, I released this first version, you know, back in 2014, and it was just the main window at that point. And then going from one window to two windows, suddenly there was a huge amount of additional, like extra layer of work required. So, you know, you can drag these windows around, but they, Winamp had this great feature where, you know, most of the time you probably want them sort of stuck to each other. You want the windows sort of arranged, but you want them to form a single unit. And so it had like snap.

So if you drag two windows close to each other, they'll sort of align directly. So getting that to work was quite a bit of effort. And in fact, just recently, another piece of that is, you know, the windows have this like shade mode where they'll like collapse down to just their title bar. And Winamp, again, has this interesting UI feature where if you have two windows, one on top of the other, and you put the top window into shade mode, all the lower windows will sort of travel along with it and so like getting that to work was another uh bunch of effort um let's see this laundry list of other things it can parse the binary equalizer format files that winamp

can generate and it can also generate them so if you like set the equalizer to a particular level you can export that as a binary file and then like drag it in to to uh bring it back to that level um the playlist works and you can export your current playlist as a html file which again winamp could do um yes this file type eqf it's pretty simple. I had never actually had to do anything with binary file formats, so it was my first entry into that kind of world, which is good. I learned a lot. But it's very simple. It's just a name and then 11 values between, you know, zero and 255.

So why can you save a preset for the equalizer and not the playlists? Is it completely different? Is it like just a JSON? Would you kind of modernize it or would you sort of still go old school with it? So you're saying like why can you save the export of the equalizer, but you can't, like, export your playlist? Yeah, exactly. Which I think Winamp also uses, like, the M3U format. Yeah, it's another thing people have asked for.

And the reason is that there's, like, I don't have direct access to your file system. So if you came back, if you had, you know, dragged in, you know, your Matrix soundtrack to listen to, and then you try to export that playlist and then you and then you load up that playlist again i can't go look on your on your file system and find those files for you um and so like while i could certainly you know read and generate m3u um files i can't go i can't actually do anything useful with them. So it's again one of these limitations of the browser where you can do a lot, but you can't do everything. Now,

maybe my memory isn't serving me, but this snap you mentioned before, when the different panes snap together, that just seems like exactly how Winamp used to work. Is that exactly i mean as much as you can or am i just having like backwards nostalgia where i think this yeah i

mean as much as possible i've tried very carefully to recreate everything exactly and and partially it's just because it's kind of fun to do um but also also, it's actually kind of freeing as an engineer who, you know, even with the most well-defined spec, I think any project ultimately ends up being a lot of judgment calls as an engineer of like, okay, how should this thing actually work to be the best? And there's something kind of liberating about not having to make that decision ever. And just knowing like, okay, the spec is this is this thing right i want it to behave exactly like this for better or for worse um so yeah it's like i was literally you know a slow-mo screen capturing actual winamp in a vm to see how many pixels away it is until it snaps um and yeah and

i guess to say for better or for worse, there are some cases where Winamp has bugs where things don't behave in a quite sensible way. I've actually gone ahead and re-implemented those bugs just because for me that's kind of more interesting than trying to make the best MP3 player just to make the one that already exists. This episode is brought to you by our friends at GoCD. GoCD is an open source continuous delivery server built by ThoughtWorks. Check them out at gocd.org or on GitHub at github.com slash gocd. GoCD provides continuous delivery out of the box with its built-in

pipelines, advanced traceability, and value stream visualization. With GoCD, you can easily model, orchestrate, and visualize complex workflows from end to end with no problem. They support Kubernetes and modern infrastructure with Elastic On-Dand agents and cloud deployments. To learn more about GoCD, visit gocd.org slash changelog. It's free to use and they have professional support and enterprise add-ons available from ThoughtWorks. Once again, gocd.org slash changelog. so i'm thinking about how this works it actually works, not just looks like it works, but it actually works and you've thought through all this cool stuff and even recreated bugs. And I'm thinking like, we're talking about usefulness and exporting playlists and equalization and all

that fun stuff. But like, could this be like a front end to say, Spotify as API, for example? Yeah. There've been a lot of people who, uh, you know, where they pull it up and they're like, Oh my gosh, you can really drag in MP3s. That's so cool. Let me go find an MP3. Oh, yeah. I don't have any. I don't have MP3s anymore. And so there have been a lot of requests for like, OK, how do you take this thing, which is, you know, really just a gimmick, right?

It's a web page. You can go to it and go to it you go oh neat and then you move on with your life um but there have been a number of people who thought like okay how do you turn this into something that's actually you know useful um and so i think the ones that i've seen are like you said the spotify people want it to integrate with spotify um they want it yeah yeah people what okay this isn't just you this is them poaching you all right cool let's hear more no i'm not necessarily spotify wants it but oh okay the people of spotify not spotify the company stepping back so spotify is that like spotify itself actually did uh, a player called spotty amp, which was a like C wind amp clone that you could run on your desktop if you had a Spotify like premium account. Um, and I wish I could remember the name of the

guy who did that because he's a, he's a notable guy. Um, but he was working at Spotify and he built this wind amp clone that you could download and run and it would interact with Spotify. And I think they had first, they had some licensing issues with it. Um, and then I think ultimately there was a whole to do about people were using the, the like, um, library, the underlying library, which that thing used, um, as a a as a hacking monetization model so they were like creating fake spotify accounts and then um they would like hack into arbitrary people's computers and like play tracks on those um spotify author accounts tracks and then make the like revenue from having their tracks listened to a bunch and so eventually spotify had to shut down that um or they chose to i guess shut down that

that thing so yeah spotify itself i think at least some people within spotify would like to see a winamp interface um and you know they do have this api that's available online um and i don't know for sure but i think it might have something to do with the new DRM enabled APIs in the browser. And that's a whole other conversation. But because of the DRM, we can't get direct access to the audio stream. And so there are some features which don't work. So the equalizer can't work cause we can't twiddle the bits in the way that we need to. And the visualizer can't work. Um, and the balance can't work. Um, so for now, and unless maybe the, you know, a bunch of these things get added as, um, you know, on top of the existing

web APIs for now, those things can't work. Someone has a copy working. And once I think that solidifies a little bit, I'll share that. But because it basically can't work fully, I think I'm not going to include it in the core. But today there's Dropbox integration. So you can, if you go to the options menu and you say like open a file or play file,

you can pick from your dropbox folder can you actually put it at a dropbox folder that becomes a playlist yeah you can like there's dropbox has a little like file picker ui and you just pick from there and it will populate your playlist with you know a directory of files wow while you were talking about that too i was also thinking about just like alternate ways to use this could be that would make a really sweet looking iPhone interface or even mobile interface because it's, you know, vertical, you know, and the playlist can be, you know, the top two seconds sections are essentially the same height. And then the bottom one is the same height, too. But I guess it's variable in the fact that you can scroll to see more playlists. That could be one more place to take it.

I've done some work to get it to work, to make sure it works on mobile. And it does work. But yeah, I think the touch target issue is pretty devastating. You can't really click on anything. Although it does bring to mind, I don't know where it is you know back

when the iphone was you know still like a myth that you know people were doing all these mock-ups of what an iphone would look like based on you know like what a mobile phone looked like and what an ipod looked like but someone did this like mock-up of a like hardware web amp or hardware winamp um which is i'll see if i can track it down maybe it's gonna stick in the show notes but it's pretty incredible it's it's literally just like a little you know candy bar size hardware device that looks like winamp ui on the top with like a headphone cable coming out of it yeah definitely share that with us and we will add it to the show notes let's talk about the name you just mentioned web amp again we've been calling it winamp2.js surely there's a story there there's always a story

so winamp2.js was i guess the name i came up with originally just because i thought it it was the most terse explanation of what the project was right it's winamp2 in javascript JavaScript. Um, and shortly after I, I tweeted it that first time the, I, I got a tweet response from, um, Tom Pepper, who I guess was one of the very early people at Nullsoft along with Justin Frankel. And he said like, Hey, congratulations from Nullsoft. Uh, we have these domains if you want them. Um, so that was webamp.com.org and.net and I guess I think they maybe had some internal project

or something like that at some point doing some kind of web thing and it never came to fruition and I don't know how he came into possession of those domains or whatever but yeah I guess there was a long story short there might have been some legal

complications about getting me those domains, but I have them now, um, except for.com, which, uh, I got scooped up, but so I thought it was very cool to one, have like a much more shareable URL than it was currently like on my own jordaneldridge.com, uh, domain with, you know, three sub directories down. Uh, so I thought I might as well take advantage of these uh this domain because it seems like a cool place for it to live um but i guess i haven't fully committed to changing the name and and you know introducing the complete confusion of uh you know like you said news articles or other things that talk about it as Winamp2.js. And then that not being the canonical name anymore.

But I, you know, it felt, it felt like a code name or something. The new name, but it's, I guess it's like too late now. There's going to be confusion. It's just a matter of like,

where does that confusion live? What's crazy is that you create this thing, you tweet about it. And then the originators of null soft what did you say his name was again uh tom pepper tom pepper i love that name too it's such a cool name i think tom pepper reaches out to you and says hey i got some we have some domains we can probably give you so why did you not get the dot com what happened there um let's see how do i how do i phrase this so uh i wasn't able to actually he wasn't

able to actually give me the domains um but in the intervening years they did expire uh rather conveniently but i wasn't watching closely enough i see okay so it's a bit delicately put but that's that's what yeah i'm reading everybody else read between the lines there we're not gonna repeat it because it's just not it's because it's just too close. But this is crazy though. So like a long time ago, you kind of got nostalgic and you wanted to play with this back in whatever, you released this 2014. And then now you're doing this. I think this is such a crazy journey. This is open source at its best. It really is. There haven't been a ton of contributors. I can say there have been people who have popped in and done a thing or two that they thought was interesting. I mean, I think most notably the addition of actually parsing the skin file in the browser using that JavaScript library was a very early pull request um but i think the the amount of input that has

influenced you know how it's evolved has been really tremendous just people you know popping up and be like hey did you know like this obscure thing about the web audio api that would allow you to do this other thing that you probably want to do. Um, and so, you know, it really has been, uh, you know, like while most of the code has been commits that I've written myself, the, a lot of the core ideas or breakthroughs did come from people in the community. And the, the, the, the attention that it got has really enabled that in a way that I certainly, you know, without people knowing about it, their ability to come in and lend their particular expertise, I don't think would be possible. It may not be

open source traditionally in the fact that you said there's not that many contributors. However, you know, it's not as if like this is code you have behind the firewall, nobody can see. And I think that is inviting for those with knowledge to contribute whether it's a direct code contribution or a hey did you know about being open source in the open with no at this point i assume commercial intentions you know it's that's that's that's the cool thing like why would you do this not open source that it would only make sense to do it open source. Yeah, I think, you know, a lot of people who are friends of mine or whatnot have seen, like, oh, man, like, you got, you know, I think when it got a tech crunch, that was, like, it felt pretty hilarious to me that something like this would get written up in a publication like that.

But, you know, when I was telling my friends, you know, how cool that was and they're like, wow, like now that you've really, you know, hit the mainstream, like I've made it, are you going to start putting ads on there? You're going to, you know, what's your, what's the monetization strategy? Uh, yeah. Okay. Wait, wait. Yeah. What's the monetization strategy? How are you going to make money from this? I know what it is. You just sit there and wait for AOL to come. Right. It'll happen. And they're like, no, wait. Don't we already own that?

Haven't. Now they told it off. They'll buy it again. We'll buy it again. One more try. Very strictly do not have any interest in that. I guess, you know, the answer to my monetization strategy has been to do something really interesting, hope that people who know or who care see it, and then that that has like a positive influence on my career trajectory. And that actually is directly true in that my current job at Facebook was the result of a recruiter reaching out who had seen this project.

And then in my interview loop, I think two of the engineers I talked with had seen it. So it gave us something really interesting to talk about. So I guess don't discount just having something be visible as a monetization strategy by just improving your know, and of course, I think all of that is secondary to all the things I learned working on the project. How much of this overlaps with things you do day to day? Like how much of have, has what you've done at day job, either at Facebook or elsewhere, you know, kind of led back into this or vice versa? It's actually, yeah, I think the vice versa is actually more the case in that I started working on this project and then I got really into JavaScript.

And, you know, in order to do some of the things that I wanted to do here, I had to dig pretty deep into understanding the language and, you know, some of the web APIs and whatnot. And I got really fired up about JavaScript. And at my previous company, the sort of state of the JavaScript code base was a little bit lacking. And so then I sort of got on this warpath about improving things there. And then that led, you know, to me sort of evolving into a very JavaScript centric role there, sort of heading up the JavaScript infrastructure at that company. And, and then of course, that had a feedback loop to learning a lot more. So I think it really was like, you know, this project gave me the impetus to go really deep on some of these things, which then had value in my career. And then there was a feedback loop on top of that.

What you're not condoning is that the only way you get hired is by having side projects, right? No, I'm not condoning that. But you're saying that it could help i do think that um finding something that you're that you're passionate about um and certainly if you ideally like you should do that at your work and ideally you can do both of those things too right like you can you can have a project at work that you really care about and you can have um you know other things on top of that if you wish. Um, but you know, I think in the interview process, having something that you really like have, like you're, you're fired up about, um, and that you've thought about in that

like sort of all consuming way, I think comes across. And whether that thing is like, because you were able to find that alignment with your day job or whether that thing is something that you found, you know, on the side is, is, you know, certainly a personal choice. So I'm a big fan of experimentation myself. And in fact, if, uh, people listen to our previous episode, probably two episodes back now about live coding on Twitch with Suze Hinton. You'll be happy to hear that she has convinced us to actually begin live streaming some code. And I've had a couple of sessions now

committing to doing some experimentations every Monday afternoon, roughly, US time. Two o'clock, you'd be on time too. I guess. Well, two o'clock central. I like to, US time. 2 o'clock, you'd be on time too. I guess. Well, 2 o'clock central. Yeah, Monday. Which is like 4am Australia time. Which I found out

by one of our Australian friends in Slack who was a bit disappointed, but I think he understands. I think if you live in Australia, you're kind of used to a lot of stuff happening in the US. Well, the cool thing is you got the Australia, you're kind of used to a lot of stuff happening in the U S. Well, the cool thing is you got the playback though.

You got the videos going on. So the first one you didn't, but the second one you did, so you can get the playback. That's right. So if you're interested in that, uh, twitch.tv slash change log underscore.

If you, if you know us and you like us, give us slash change. Somebody out there. Get that underscore out there. Nobody wants it. For the time being, change log underscore, of course. You can also just go to our website and find a place to click on that.

Follow us on there if you want to live code with me on Monday afternoons. And I've been hacking on Winamp to JS. So Jordan had a sweet idea, which has kind of morphed into what we talked about earlier with the webamp.org slash changelog view. But how can we get a specialized player, maybe even on changelog.com? And so we've been experimenting with getting WinAMP 2 loaded into our site and running. And I'm happy to report that that worked, and it played one of our episodes served locally. But it hit some road bumps.

As Jordan said, there's people that are hacking on this, but not too many outside contributions. So the thing that we hit first and are still kind of stuck at is there doesn't seem to be much of a public API. It seems like the way you built it, it's very much for the single use of I'm loading a single page with just this on it in the middle, which hilariously also threw me for a loop because instead of it being in the middle of the viewport, it's actually in the middle of the page and you're not used to there being a scroll while our homepage is quite long. And so it took me 15 to 20 minutes to realize, oh, it's actually working. It just like completely outside of the viewport. That's funny. Which was funny.

I missed that live stream, so I missed that. Yeah. The video is out there. I think it's about like an hour and four minutes or something. I linked it into our Slack. But it made for one of those joyous programming moments when you realize something is working, and then you also realize you just wasted a half an hour thinking that it wasn't working. Jordan's laughing over there. He's enjoying it. Well, Jordan was actually kind enough to hop into that live stream and actually give me some feedback as I was dorking around with the code and trying to figure out how to use it.

So that was fun as well. But when we talk about what's coming down the roadmap, my hope is some sort of API so that we can at least invoke it from an outside party. Maybe pass it some metadata in a track or a playlist or something. I think the common wisdom is that open source works really well for libraries and not very well for applications. And I think this is sort of in a middle ground there where it's not quite low level enough to work with most of the abstractions that open source relies upon. and and having a like actual ui widget that works on other people's pages that that people can just like npm install is i think not um i think like i guess like web components was supposed to try to solve this but this is not a problem that's very solved so you know like i said earlier i actually have to like inject style

sheets into the dom in order to get this thing to work and while i try very hard not to you know step on anyone else's toes you know there's certain certain things that are just a little bit hard to figure out how to do uh on other on other pages but yeah it's something i'm very i'm very open to and i think there are people who are playing with it. Um, what is it like? Uh, let's see if I can find it. Like 98.js.org. Um, there's a guy who's done a really amazing, uh, JavaScript clone of, um, MS paint. And he has this like entire windows 98 clone going on at 98.js.org. He's included Winamp there. And there are some other, I think, projects that are similarly trying to pull it in. And yeah, I would love to get it to work.

And it should. And we do have some kind of public API where you can load it pre-populated. But I think there is a little bit of a question as to like, okay, well, if it's its own UI, how should you be able to control it from another UI? And I think at this point I'm looking for people who have use cases that they can show to me and say, like, this is how I want to use it. And then I would really like to add those APIs as necessary. Because all the logic's there. It's just a matter of exposing it in a way that doesn't expose internals that I want to be able to change in the future. Sure. Yeah, well, I'm happy to report that in terms of CSS clashes or anything like that,

it worked surprisingly well. There was a little bit of a Z-index issue where some of our avatars are on top of it, and I could just change in the console, I just changed the z-index to a really high value on winamp and that fixed that it's the the positioning uh that was problematic and I don't I'm sure I could probably override some css to to fix that as well and then really just the ability to just like pass it a track and say play as opposed to like right now the only way you can do that is right on initialization. It would probably be enough for us.

But yeah, our use case is, I don't even know if we'd ever even ship it. I would have a hard requirement of lazy loading it when somebody invokes it from our onsite player because I wouldn't want to ship that every page load because like 0.1% of our users would ever click on it. So we'd love to get it working and probably we'll continue to hack on it in upcoming Monday afternoon sessions.

It's a thing I've been thinking about for sure. And it actually has influenced somewhat the architectural choices that I've made. So I actually do, you know, there's like a Winamp class internally, which then I, you know, consume on the pageamp class internally which then I you know consume on the page itself so for example the Dropbox integration it's not actually part of the core library but that's a like an API that I exposed to myself

such that I could inject it on the web amp org page very cool anything else aside from you know me bugging you to add apis that you have planned like this is where i'm taking it are there aspects of winamp 2.9 that it doesn't do or their grand plans for the future or do you feel like it's yeah i'm definitely like approaching the the limit of getting everything of these main three windows working. And so on one hand, that's exciting, but on the other hand, it raises this issue of like, okay, what's next?

So there are people working, or there's at least somebody working on an Electron app, which would be one interesting place to take it. I'm a little bit skeptical that something that's like, wow, that's so cool in the browser, as soon as it's an Electron app, the response like oh god electron javascript everything is slow like i remember winamp winamp was fast this is not fast and that there's going to be this sort of like uh like i don't know like an uncanny valley uh i don't know if you know like that notion in like

uh 3d rendering that like as things get more and more real, eventually they reach a point where they're so real, but not quite real enough that they become very disconcerting. And I worry a little bit that if this does actually get packaged up as a desktop application, that something which felt like a very detailed and accurate reimplementation in the browser is going to feel like jarringly not quite right on top. So that's one thing that I'm thinking about. The other one, of course, is that Spotify thing, although I don't think that that will ever really can ever quite be right due to the DRM limitations. But the thing I'm actually more interested in is there's this, one of the, I think, other iconic things about Winamp was the visualizations. There were these very ornate visualizers.

I think the most notable one was called Milk Drop, which would do these psychedelic visualizations of your music in real time. You'd sort of see the screen undulating in beat with your music. And all that stuff should be possible in JavaScript. So there's a guy here in the Bay Area who's done a project called butterchurnviz.com. And it's basically a JavaScript reimplantation ofimplantation of milk drop which was one of these visualizers um and we've we've gone back and forth a few times i think he's interested in trying to integrate it um but he's you know been busy and it's not his project is not open source

so i can't just jump on it um and then there are some – the other main visualizer, which I think was built in to Winamp, was called AVS. I don't know what it stands for. But that actually did get open sourced as Nullsoft sort of got acquired or whatever. So the C or C++ source code is out there. And there are some people working on the JavaScript part of that. And there's also someone working on like a web assembly transpilation. I was just going to say that might be a good use of web assembly. And there's a, yeah, so there's some talk of trying to get that to work.

And I would really love to see that because the AVS worked with these presets, which were these like declarative files that that people you know these like i guess in the same way that skin authors would be distributing these skins they had made these preset authors would be distributing these visualizations and similarly there's like no place to go experience those anymore and so it would be really cool to offer you know a home for those things that could be you know revitalized on the web so those are the things I'm thinking about. But I would love to see if anyone else has any other ideas of places that we could take this or other things like that.

What a journey. I mean, just one side project away. And then next thing you know, down the rabbit hole, all this fun, Facebook, archiving the web, going back into history, hitting up old forums, resurrecting skins, tweeting them even and loading them via URL. That's it's an interesting path. And then also, like you said, the vice versa on the learning process of like, you know, taking what you've learned here and applying it to stuff you do at work is it's crazy. It's just crazy. I'm'm impressed very much it's been pretty amazing i think how how much has unlocked uh contact with different people i think that really has been the one thing that um you know i'm a self-taught engineer and i spent a lot of

time doing contract work outside of what i felt was sort of like the developer community. And in fact, it's funny to mention this. I remember listening to this very podcast, you know, before I really had any friends in the industry and being like, oh, this is what like real engineers are talking about. And so you're talking about this podcast? Yeah, the Change Log podcast. What? Yeah, I'm serious. Tell me more. I'm listening.

Not this episode, I hope. It's a time travel story. I wish it was. Not that your story is not good, facing to you. You know, and feeling very isolated and not knowing, you know, whether engineer or not, whether, you know, these like PHP website, WordPress websites I was slinging were, you know, garbage or whether github and um you know and then getting to meet you know actual other engineers who have thought about these things and and connecting up with people i think it really is like the human network has been like the long-term benefit of this project like the people i've been able to meet the um you know the people i've been able to learn from um because

that's stuff that i you just you can't self you know, you just, you can't self, you know, there's certain things you can't self teach without, uh, you know, learning from other people. And so I think that's been no amount of money can buy that. Totally. Yes, exactly. And, um, so having this like community and getting to build this community of all these people who have, you know, related interests has been really pretty incredible. That's awesome. I'm glad it's come full circle here and you've been able to, one, be a listener. Bummer on being isolated, but thank you for letting us be a resource for you

to not feel so isolated. And three, just kind of continuing that journey and then ultimately coming on the show and sharing this cool story. I mean, that's, I'm kind of touched, man. That's awesome. Yeah, when you guys reached out on Twitter, I definitely was like, play cool, play cool. But yeah, I think, you know, finding, finding your community is really important. And, and for

me, a big part of that was, you know, you know, learning podcasts and other things like that, you know, blogs and whatnot. And then, you know, as you do more things and other things like that you know blogs and whatnot and then you know as you do more things and get more things out there being able to connect up with real people and not being afraid to reach out and say like hey you know what's up let's talk yeah hey what's up come talk i like that well jordan thank you so much i mean this ending here is is uh super special because I didn't know that you were a listener and what we just shared there. That's really cool. And I'm so glad that Jared and I get the honor to host this show and then have listeners like you and others listening to this show and being changed, being transformed, being welcomed, invited by it because that's what we try to do ourselves. And that means a lot to me to hear that. So thank you for sharing your story.

Anything else you want to share before we call the show? I think I'm just very, like I said, I'm very, very cool to be on here. And thanks for all the work that you guys do. Cool. Well, thank you. Call this show done. Thanks for listening, everybody. All right, that's it for this episode of The Change Log. If you enjoyed going back in the past to learn about Winamp and WebAmp and HTML5 and JavaScript and all this fun stuff to make something nostalgic come to life through open source, this fun project for Jordan is just this fun to go back into and dive into. It's a lot of fun doing this.

If you enjoyed this, share it with a friend. Read us an Apple podcast, go on overcast and favorite it. Whatever you use, like it, favorite it, share it, tweet it, whatever. Do us that favor. And also thanks to our sponsors, Rollbar, Linode and GoCD. And of course, bandwidth for changangelog is provided by Fastly, so learn more at Fastly.com. And we move fast and fix things here at Changelog because of Rollbar. Check them out at Rollbar.com.

And Changelog.com is hosted on Linode servers. Head to Linode.com slash Changelog. Check them out. Support this show. This show is hosted by myself, Adam Stachowiak and Jared Santo editing for this episode is by Tim Smith music is by Breakmaster Cylinder and you can find more shows just like this at changelog.com or on overcast or have a podcast or wherever you get your podcasts that's it it's over thanks for listening and we'll see you next week.