Feature: Gapless Playback

[johnnyshankman]

This is the next feature I want to work on.

It's very difficult as right now the whole app is based around only having one HTML5 <audio> tag on the page. All components expect they can just find that audio tag, call play, and the rest of the app will follow. In a sense, the audio tag itself is a stateful thing being used as the source of truth for the rest of the UX.

[johnnyshankman]

This is actually shockingly difficult to pull off as even the slightest delay in react/zustand state management causes an audible gap.

[johnnyshankman]

Turns out this is actually quite the computer science problem to solve but luckily someone else very smart has solved it for me:

• https://github.com/regosen/Gapless-5

I'll look into refactoring my app to use this player instead of my raw HTML5 audio tag. Need to do extensive testing and ensure there all expected audio file types playback.

[johnnyshankman]

oh big bummer, it breaks the mediasession API integration by default:

• Incompatibility with MediaSession API regosen/Gapless-5#54

not willing to budge on that. gonna have to figure out a workaround.

[johnnyshankman]

nice i figured out a workaround late last night 👍 only caveat is losing the ability to do seeking. that's fine. no one does that.

[johnnyshankman]

Wow i'm so hyped it works perfect right now. Just had to make one small bugfix to gapless 5 so that I wouldn't lose my place and cause songs to pause when removing songs from the playlist that come AFTER the currently playing song.

• Patch: Fix Index Resetting on Removal regosen/Gapless-5#59

[johnnyshankman]

Oh HELL yes figured out a workaround for the seek time display lfg.