So the other day, I was playing around with an entirely different UI paradigm for my music site, and got pretty far along, and then I hit a snag.

I searched and scoured the slop-riddled Web and didn’t find answers to my questions.

After a while, that duck.ai link started tugging at my willpower... And then I did the unthinkable and clicked on it. I asked whatever “AI” DDG is using how to do the thing I was trying to do, and it spat out an answer that worked.

It was the first time since the early days of 2022 that I had used an LLM, but I still felt dirty and ashamed. I tried to justify what I had done by the fact that I had really tried to find the solution on my own. And by the fact that I had already decided I had no intention of releasing the version I was trying to finish.

I also justified my lapse by telling myself I could understand the code the LLM had plagiarized. A couple of javascript functions, maybe 15 lines of code.

I went on doing other stuff, and at one point I realized I wanted the LLM code to do something slightly different, and so I thought no problem, I should be able to easily modify it.

And that’s when I realized that I absolutely could not. I stumbled in the dark for a while, to no avail.

In the end:

• I trashed the LLM functions, and did manage to work everything out following examples on W3Schools and MDN docs, etc.
• While doing so, and despite the fact that I had tried and failed to modify the LLM code for a lengthy amount of time, I realized that I couldn’t remember precisely any of the LLM code and logic. I hadn’t learned anything. In fact, as I’m writing this, I realize I can’t even remember what that code was meant to do.
• And despite being over-informed on LLMs and how they can fuck with your brain, I grossly overestimated my degree of control of the situation and understanding of the generated code.

All in all, an eye-opening and brain-deadening experience and experiment.

And just to be clear, I will never, ever release anything done with the help of generative “AI”, be it code, art or music. Simply as a matter of principle, morals, ethics, whatever you want to call it. If I do, I am probably being held hostage, or having a stroke.

In the first post in this series, I explained why I used PHP to generate the playlist of my new hand-crafted music site from a large-ish XML file, instead of doing it locally like I used to (damn you Chrome and Firefox for dropping XSLT support!)

Thing is, depending on the speed of your device and your internet connection, it takes a few short seconds for PHP to do it’s thing on the server, before sending the result in one go to your browser.

And this slight delay has been nagging at me since day one. So I’ve been thinking of ways to load the very lightweight page skeleton, and then retrieve the rendered playlist from the server.

And I finally took the time to figure out how to do it, using the javascript Fetch API to fetch the PHP code in a separate file once the skeleton loads. Which meant rethinking a bit of code for everything to keep working like before (basically making sure the data is loaded before calling anything critical).

After ironing out the kinks, I’m pretty sure I have a version that works!

The question now is, do I actually like it better? It does have the following advantages:

• The site loads instantly, even on a slow device.
• There’s a fun little loading animation. I went with an austere design after years of visual excess, so the animation reintroduces a touch of whimsy.
• When you click on a link to an album or a song from somewhere else like here (or your Mastodon feed), you get a bit of visual context before the page scrolls down to the target album or song.

I did a quick poll on Mastodon, which came out in favor of NOT going this route. Still, if you’re reading this, it probably means I decided to roll it out anyway.

It’ll be easy enough to roll back if I change my mind or if it proves to be troublesome or unpopular.

So, thanks to @limebar@mastodon.social and @scy@chaos.social who implemented this feature for TIBR and TIBtv, I discovered how to send metadata to the system media player when you play my music on my site (using the Media Session API).

What this means is that you can now see the title, artist and artwork in your system player when you play a song on sknob.fr/music.

It could have ended there, but that’s when things got out of hand... In the following image, you’ll notice you can’t skip to the previous or next track.

But it turns out you can handle these actions with the mediaSession API, provided you have your own functions to do the actual work.

This revealed a different paradigm between what I had implemented on the site, and how a system media player works.

• On my site, you could keep skipping tracks, including the last track of an album.
• Whereas the mediaSession API sensibly assumes you have “go to the previous/next track” buttons, and if you are on the first or the last track of a playlist, well you can’t go back or forward, respectively.

Which means that in the end, I had to:

• Rethink my “skip” function as a “next track” function
• Write a “previous track” function
• Add a “previous track” button to my weird UI (and to my keyboard shortcuts (available in “about”)
• Grey out and deactivate the previous and next buttons in my weird UI when there is no previous or next track (which is what took me the longest to figure out; funny how it’s often the simple things that trip you up)
• Add the appropriate calls in the mediaSession function to go to the previous/next track, including code to grey out the previous/next buttons in the system player when there is no previous or next track
• This all seemed to work everywhere it was supposed to, until I noticed that the play/pause button was disabled in the media player on my old iPhone 7! So I had to add the appropriate calls in the mediaSession function to call my play/pause function.

Phew... I told you things got out of hand! All this probably deserves more than a 0.0.1 version bump...

Hopefully, it’s all sorted out now. But before you complain, according to the spec, this is supported pretty much everywhere except in the Android WebView!

Media player on the Mac:

Greyed-out buttons in my UI and in the iPhone 7 media player:

When you can’t choose between two options, choose both? In the release notes for the initial version of the new sknob.fr/music site, I wrote:

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.

It later dawned on me that I had basically just duplicated the search function built into the browser. Duh!

Then again, on tablets and phones, the built-in search isn’t as easily accessible as in desktop browsers.

And the reason I didn’t go with full-text search is that the site contains a lot of lyrics and a lot of background info text, which means full-text searches don’t filter out a lot of songs...

Still, this arbitrary choice kept gnawing at me in the background, so yesterday, I decided to do something about it.

• The search field now includes a button on the right that toggles full-text search on and off.
• Clicking on the button reinitializes the search (and places the cursor in the search field).
• Hit f to activate full-text search (if you’re not already inside the search field, naturally).
• It works in both album mode and radio mode.
• Behind the scenes, all it took was filtering based on innerText for simple searches and innerHTML for full-text searches.

So now, you can just hit s and search for bits of song titles you remember, or if you’re looking for that underground sknob hit that uses the word “monkey”, you can switch to full-text search and find it instantly (the background info for that song is worth the read 😇).

I didn’t see that one coming... Having all the albums and songs on a single page means that by default, when you link to the page from somewhere else like a messaging app or your #fediverse feed, you always get the preview image specified in the <meta property="og:image..."> tag in the page header...

But then it dawned on me. Since I’m already using PHP to prep my XML playlist, it should be possible in theory to use PHP to dynamically change the og:image property based on the incoming URL.

Problem was, I’m an absolute PHP beginner.

Undaunted, I went ahead and figured it out, and tada, it works. If you call sknob.fr/music/?mysong, the og:image meta tag image is dynamically changed to mysong.jpg.

Out of laziness, I kept the somewhat complex image organization from the v4 version of the site (yes, I aim to clean that up eventually, but it’s not a trivial task), which means that the code won’t always find an image, in which case it defaults back to the default image. Same if you type in a garbage URL.

I’m really happy about this, because that was one thing that bothered me about going the single page route. I even sometimes shied away from posting links to my site on Mastodon because of it.

No more!

Introducing... Radio sknob! If you read the preceding #coding posts, you know I finally decided to redo my antiquated site before it stopped working, and that I recoded everything from scratch.

And now, I’m actually free to start adding new features.

This release introduces an oft requested “radio mode”, i.e. a way to listen to everything, not just to single albums (as the artist originally intended 😭).

• There is now a shuffle button radio button, which toggles between album mode and radio mode.
• The radio mode is reshuffled on each toggle.
• The radio mode doesn’t display the full lyrics, but does display the track background info, so you can download a song you like, or copy the link, or boost the song on the fediverse.
• Other than that, Radio sknob behaves like a regular album, which means you can click on the 🔗 icon next to the title to get a link to open the site in radio mode.
• Oh, and there’s also a keyboard shortcut to switch between album and radio mode. You’ll find it in the about dialog, along with other useful shortcuts 😇.

Hope you like the new feature (you know who you are...)

Note: These #coding posts are really notes to my future self. Do feel free to ignore them.

So, it seems I like to do the opposite of what you’re supposed to do... I created an RSS feed for the music site, and then I thought, well, why not use XSLT to transform my RSS XML into a handy web page (instead of the other way around).

So here are the changes:

• In music > about, I added an RSS icon to the Latest News section, for you to add the RSS feed to your favorite reader.
• In music > about, I am now showing the 7 Latest News items, followed by a More... link, which brings you to a fully rendered web version of the RSS feed.
• And since you are reading this, you can:
  • Visit the sknob/scoop page directly, or
  • Subscribe to the RSS feed directly.

Hope that makes sense!

Before anything else, I moved the project to Git, and created a (private) repo on Codeberg. I think I’m finally getting the hang of it. – Changed the Download, Copy Link and Share on Mastodon links in the song details to nice SVG icons. Before: After: – Added a Copy Link icon next to the album titles, so you can post links on the #fediverse or send them to all your friends and loved ones :) – When navigating from elsewhere using a link to an album, the target album cover is surrounded by an outline. – Stopped the page from scrolling when an album cover is displayed full-screen. Doesn’t work in Safari. Quite a PITA to fix. I may or may not bother in the future. – The (small round) album covers are now “sticky” to make it easier to see which album the songs belong to when you scroll. Note that this is deactivated in portrait mode on phones. – Small code changes (offset scrolling, hiding the covers during search, since they were moved in the page hierarchy to make the position: sticky work).

Read the lengthy, gory v5.0 Release Notes if you dare.

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:

• The Making of sknob | MUSIC version 3
• sknob | MUSIC v4
• Un blaireau chez les geeks

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).

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...

UPDATE: I’ve since improved the search!

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.

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 ?

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:

https://sknob.fr/music/

Further reading: sknob/music v5.1 Release Notes sknob/music v5.1.2 Release Notes, RSS edition sknob/music v5.2 Release Notes, Radio sknob Edition! sknob/music v5.2.1 Release Notes, OG:image Edition! sknob/music v5.3.0 Release Notes, Search Edition! sknob/music v5.3.1 Release Notes, mediaSession Edition! sknob/music v5.4.0 Release Notes, Fetch Edition!