sknob/music v5 Release Notes
WARNING: Long geeky post. Proceed with caution.
Long story short, the code underlying my music site was nearly 15 years old, and woefully obsolete.
I'd only been meaning to update it for about a decade...
Some background
You’ll find some embarrassing old posts about it on my mothballed blog:
For reasons I can’t divulge yet, I got back into the coding saddle recently, and so I decided it was finally time to give it a shot.
While I wanted to keep all the song data in XML + XSL because I just love it (look, no code!), I was ready to redo everything else from scratch.
My site still worked fine with a really old version of jQuery and a JQuery plugin for the XML transform step, but any attempt to move to a recent version of jQuery failed miserably, which was the final nail in the jQuery coffin. Good riddance. And while I would have loved to get rid of javascript altogether, that’s sadly not a real option if you're dealing with a lot of audio. Putting ~180 native audio players in a web page is not a good idea (I tried, don’t ask).
Because yes, I wanted to keep everything on a single-page.
Nitty-gritty
- I started with a bare-bones design, which I ended up keeping more or less as is, because it’s kind of a relief after nearly 15 years of visual excess. I can always spruce it up later if needed.
- I wrote clean CSS and simple javascript (the kind I’m likely to understand if I ever want to update or change what I did down the road).
- I replaced ~800 lines of super-compact jQuery code with about 450 lines of verbose, commented and airily-formatted plain javascript.
- I optimized image handling (the image sizes were all over the place, and lazy loading didn’t even exist back then).
- Last but not least, out of laziness (and incompetence), and after Google announced they wanted to remove XSLT support from Chrome, I ended up doing the XML transform server-side in less than 10 lines of PHP (which I had never used before).
Gory details about line endings and HTML entities. Click to view at your own risk.
I needed to do two things to the HTML generated by the XML/XSL (same as on the previous site): Change \n new lines in the lyrics CDATA to <br> tags, and decode HTML entities.
I laboriously implemented both in javascript, but l then discovered I could convert the line endings with a single line of CSS:
white-space: pre-line !
As for decoding the HTML entities, it was all happening in the background since no lyrics are displayed on page load, but while mucking around, I noticed that it took a few seconds for javascript to do the job with something like item.innerHTML.replace(/</g, "<").replace(/>/g, ">").
So I tried doing it in PHP on the transformed XML data with html_entity_decode and it worked instantly.
Yes, I’m not a real geek. I only play one on the Internet. Anyway, back to our regularly scheduled programming... Altogether, the speed increase is dramatic.
Before:
Total requests: 274
Size: 9,205.46 kB
Transferred Size: 5,672.55 kB
Time: 32.05 seconds
Non blocking time: 31.73 seconds
After:
Total requests: 9
Size: 460.27 kB
Transferred Size: 159.36 kB
Time: 0.11 seconds
Non blocking time: 0.11 seconds
Yes, I know...
(To be fair, the old site loaded fast enough, and then the song data was processed and a ton of images were loaded, well, as fast as hardware and bandwidth allowed...)
New and improved!
Feature-wise, the main addition is a filter/search function. I’m not sure how useful it is, but it’s there. After waffling some, I opted to only search through the titles and the on-screen metadata, not including the lyrics and other background info. I spent a lot of time testing endless variations on that one feature, and in the end, it probably accounts for about a ¼ of the javascript code...
The rest of the code basically handles audio and interface behavior to give the user some hopefully useful tools and feedback to navigate through the long list of songs.
Gory details about the audio player...
In version 4, I jumped through complicated hoops to assemble playlists for each album into javascript arrays, and then spliced and pushed and popped stuff as needed.
This time around, the code just says play the song the user clicked on, and then keep playing the nextElementSibling in the current <ul> until you run out.
The remaining code basically just toggles CSS classes to show the lyrics for the song that’s .playing, and turns appropriate interface elements on and off, etc.
The design may be simple, but it still rather unconventional for an audio site, and I tend to really sweat the details (#OCD), so everything is quite deliberate, for better or for worse.
I won’t describe what everything does and how everything works here. You’ll just have to experiment to find out.
A few final notes nonetheless:
- You can now click on the images to see larger versions of the album covers and song illustrations (when they’re available).
- I added some keyboard shortcuts, which are documented in the “about” link at the top of the page, which also contains links to recent off-site music-related endeavors...
- Fun fact: I use the system audio controls, albeit with a CSS blend-mode to make them...blend in. Not so fun fact: Chrome doesn’t want to blend in.
- In case it wasn’t obvious, you can also pause songs by clicking on their titles.
- I added backward-compatibility for handling the URLs with query strings I’ve published in the wild over the last ~15 years.
- And I can now link to albums, not just to songs...
- The site is responsive, and honors the system’s light/dark mode settings.
- I’ll be cleaning up some of the “backstory” content over time, when I feel like it (it was hidden behind a tab and largely forgotten on the previous version of the site).
- The Themes view from the previous version is gone. I may or may not reintroduce it in some guise or another at some point in the future.
- The previous version of the site should still be available, but I won’t be updating it any longer.
- TBC ?
Gory details about about a nasty CSS rendering bug in Firefox...
I’ve been using this CSS technique by @aral@mastodon.ar.al to implement dark mode on various sites, including this blog. It’s really clever. It basically just uses the CSS filter property to invert everything, and then inverts images back to normal. I would never have implemented dark mode on version 4 of my music site without it. Works flawlessly.
Until I realized to my dismay that Firefox (and possibly Chrome, I don’t remember now) doesn’t seem to like CSS filters and blends in dark mode, and simply refuses to render... fixed divs (like the audio player). They simply disappear! I spent a ton of time researching and trying to fix or skirt the problem, but I finally gave up and coded my dark mode CSS the old-fashioned way. Sigh.
Phew!
So there you have it, only ~15 years in the making: the fifth major version of my canonical, official music site and archive.
In a nutshell, it’s basically the same (somewhat sanitized) song data sandwiched between a shiny new interface and one hundred percent new code.
Maybe someday I’ll ditch it altogether and just go with a #Faircamp site for everything. The main thing holding me back is having to find all the hi-res versions of the ~180 songs, many of which are decades old, and the size requirements that would ensue. So for now, you can visit my Faircamp site for some extra content, alternate mixes, collaborations, etc.
I guess this post is really a note to my future self, but If you’ve actually read this far, thank you, and if you find any bugs or odd behavior, please let me know!
Oh, and I nearly forgot! Here is the link to the site:
