Smithsboard

Several years back I had a CD from a group called Emergency Broadcast Network (EBN). I recall it being extremely sample-heavy music, but one of the things that stood out to me at the time was that if you put the CD into a computer's CD player, there was an app of some sort embedded on the cd. "Multimedia" was the term. It offered some visual candy while the music played. It wasn't a music video so much as a grid of animated gifs or just images that faded in and out (and I'm likely heavily misremembering this).

Whatever it was, it stuck with me, and it's something I had thought would be fun to recreate in HTML one day. Because I recall it going well with music, I wanted to find some interesting music bits to put with it, and I also wanted it to be interactive. The Smiths song 'How Soon is Now' certainly has that mood. I grabbed some stills from the music video and created a CSS grid, inserted all the images into each area of the grid in a random order (I learned a bit about the Fisher-Yates shuffling method in the process), and borrowed a fade effect I found on another site to handle the animated transition of one image to the next.

Wes Bos's instruction of a JavaScript Drum Kit as part of the JavaScript30 course seemed like a good approach to making it interactive. Instead of keys to trigger a snare or hi-hat, I wanted to isolate tracks of 'How Soon is Now' so that I could play around with those a bit. That blaring guitar and the wavering rhythm guitar would be fun to have isolated and trigger at a key press. After googling around I found this jamkazam site that had the tracks already recorded and isolated, so that's what was used.

As part of this effort, I also set up 'lab' of a subdomain in order to have a place to park some sketches. This is likely the kind of thing I should leverage CodePen for, but can bring myself to do it yet.