tabletopaudio
patreon
Tech Update: Crossfades
🕑 Added 2025-07-11 11:54:26 +0000 UTCGreetings Patrons,
I'm making this a public post as it pertains to all users who access the site.
*May require a hard refresh of the main page to become visible.*
This all began with an email from a patron (hey, Eric!) who wanted a more graceful fade-out when stop was pressed on the player. I managed to get that done a few months back, but I knew that the real prize would be to figure out how to do crossfading between tracks.
I'll spare you the nuts and bolts but this felt like a straight up hack. It involves 2 audio players, one of which is hidden, and passing the playing duties like a baton in relay race. I've been working on this on an off for a few months now and I think I've gotten it to the point where it's solid enough to go live.
Crossfades, like fade (for stops) are enabled by default, but can be disabled on the player interface (see above image). These choices will be remembered on your device for next time.
The simplest way to use crossfade is to load a playlist of multiple tracks and hit play. When a track reaches the 9:55 mark, the next track in the list will start to fade in as the current track fades out. You don't have to do anything.
It also works manually. If a track is playing, and you play another track - a crossfade is initiated and the first track fades out as the second track fades in. When a fade is happening, the 'now playing' text at the top turns yellow to indicate which track is being faded to.
Now the caveats. Because of the way iOS works, crossfades (or regular fades) won't work on those devices. The site should detect that you're using an iOS device and not even show you the buttons.
Secondly, Eric and I hammered away at all the edge cases, discovering ways we could trip the system up. 'What if you clear the playlist in the middle of a crossfade?' etc. I've put in as many checks and graceful fails that I could, but honestly, if you mash away at the buttons and interrupt it in the middle of things, it will 'break'. Usually not too terribly but I think I had to reload the page a couple of times. If you discover an annoying, repeatable bug please let me know.
Additionally, as I was preparing the player interface I decided to do some cleanup/refinement of the CSS (layout) of the main page which makes it work better on varying screen sizes. You may or may not notice it, but portable devices should see a layout improvement with neater and sometimes more visible columns.
Thank you all, as always, for your continuing support.
Best,
Tim
Comments
Ineptus Astartes
Thanks Tim & Eric! Looking forward to seeing how it plays.
