Where were you when you downloaded your first pirated song back in the ’90s? Whew, what a wild time. MP3s spread like wildfire, Zunes tried their damnedest to find homes in consumer pockets, and desktop apps like Napster and Kazaa made it clear that the music industry was in for an abrupt awakening.

You didn’t have to be a computer nerd to feel the effects of all these changes on your music-listening experience. But if you were a computer nerd, you and all your friends were playing back those downloaded tunes — regardless of how you got them — in a single, ubiquitous program forever known as Winamp.

If you’re too young for this memory or weren’t quite the 90s-00s tech dweeb, just know this: I swore my music always sounded better when I played it in Winamp.

Maybe it was some killer EQ defaults, maybe it was the sheer number of of visualization plugins and player skins, or maybe it was that I just felt proud to be using The Mother Of All Media Players. Whatever the reason, there was something special about launching the program for the first time and being greeted with some indiscrete message referencing a llama’s tail-end (if you know, you know).

Nowadays, I spend most of my time with video, writing code and blog posts, talking with other developers, and reminiscing about the past. So you can bet when I heard Wietse Hage from Mave.io was working on a Winamp theme for media-chrome, I had to jump in to help bring it to life.

What would happen if we tried to recreate the Winamp experience in media-chrome? After all, media-chrome is simply a player framework built on modern technology, with video playback support in addition to audio. We could slap a video playlist in there and watch the videos play back in our own custom viewing area.

Really — what would happen? Would my videos suddenly look better than all the rest, too? Would media-chrome be deemed the new Mother Of All Video Players™?

Fair reader, there’s only one way to find out. Come along with me on this journey as we build a Winamp theme to play back our videos using only media-chrome.

Let’s start at the beginningLink to Let’s start at the beginning

For the purposes of this article, you’re going to need an eMachines eTower 566ir, a CD burner, and a sketchy copy of Nero Burning ROM. Just kidding — but you will need to bootstrap the project with these couple steps:

1. Check out the Media Chrome project on your own machine and run git clone https://github.com/muxinc/media-chrome.git to get the existing examples copied to your machine.
2. From the root of the project folder, run yarn install followed by yarn dev. You should be able to browse all example themes at http://localhost:8000/examples/, giving you a look at some Media Chrome themes in action.

As Winamp was a music player and not a video player, we will be repurposing the visualizer window to show our video content in there. This means our controls will live separately from our video window, making this theme a perfect candidate to build on the “Standalone Controls Example” found under “Getting started” on the index page we’ve just spun up in the previous step.

Copy the file standalone-controls.html file found in the root of the project folder and rename it to winamp-theme.html. After doing this, move the file into the themes folder where all the other themes already reside.

Upon opening your freshly created theme page, you might be surprised to see nothing in the spot where your controls should be. Don’t despair! Just a small fix to the script path in the header of your HTML document should do the trick. The Media Chrome script is found one level lower in the directory tree, so just add two extra dots and a forward-slash to the script path and you’ll be on your way: (src="http://www.mux.com/dist/index.js").

Creating the main layoutLink to Creating the main layout

Back in the day, Winamp made use of skins contained in portable skin files with the extension .wsz. These files are secretly just zip files containing all the visual pieces needed to draw a Winamp skin.

What we will be doing is downloading all of the original Winamp bitmap image files from the .wsz and using these visual elements to rebuild the whole interface piece by piece. Because what would rebuilding a Winamp interface be without the use of .bmp images?

Let’s start by setting our canvas — the main Winamp interface without any buttons. This is as easy as creating a div element with the same dimensions (275 by 116 px) of the classic Winamp player.

We’ll also use the MAIN.bmp file as the background image for this div. You might want to add a line break to get some space between our proto Winamp UI and the Media Chrome elements.

html

Let’s get this llama bleatingLink to Let’s get this llama bleating

It’s time to add our first button! No player is complete without a play button, so let’s start there. Just take the and add it to the div we’ve just created in the previous step. It should be looking something like this; make sure to test it out to make sure your video starts playing!

Using a sprite file for buttonsLink to Using a sprite file for buttons

Okay, that’s nice and all, but it still looks like a Frankensteinian Winamp…not the look we were aiming for. Don’t worry, we will get there! Let’s add our first custom button. All of the buttons can be found as a sprite in the file CBUTTONS.BMP within the Winamp skin zip file.

Add a new div element below the play button you added in the previous step. Dimensions for buttons in Winamp are 23px by 18px, and the trick with sprites is to use the background position to get the right part of an image.

The play button is the second button from the left, so by moving the background by 114px, we have our play button in view.

html

OK, now we’re getting somewhere! The next step is to combine both buttons. This is where the Media Chrome magic comes in: add the style attribute of the div element you’ve just made to the media-play-button element one line above it, and poof, it just works. You can now remove the old, unused div, and you’ll be left with the Winamp button that controls the video player below.

Cool, but shouldn’t the button switch to “pause” when I press it? Yep — and that’s where slots come in. By adding two children elements into the media-play-button element and giving them a slot attribute, we can switch between the button states.

As we are working with the play button, the slots available to us are play and pause. We will have to do some extra CSS work here, becaus