captbaritone / webamp

Winamp 2 reimplemented for the browser
https://webamp.org
MIT License
9.7k stars 640 forks source link

How to prevent Webamp from pre-loading all the tracks in advance? #1246

Closed that-ben closed 6 months ago

that-ben commented 6 months ago

Is there a way to prevent Webamp from pre-loading (caching) all the initialTracks on startup? Imagine a playlist with twenty MP3 in it: Upon page load, Webamp immediately downloads more than 100MB of MP3, even if the last MP3 will take half an hour to reach in the playlist.

I'm looking for an option to disable pre-loading all the tracks and only have Webamp load the currently played track, not necessarily in streaming mode, but at least only download the track when it's about to be played, not half an hour in advance.

This would also add the benefit of not having to listen to silence for a while when we initially load the page and go straight to the 10th playlist entry (which will take a while to be cached while the first 9 tracks are being downloaded). Loading in almost real time would solve both issues.

Any idea?

EDIT: Was this line made exactly for that purpose? If so, then it crashes under Firefox with: TypeError: ReadableStream.cancel: Cannot cancel a stream locked by a reader.

Screenshot 2023-12-18 at 9 48 03 AM

Firefox console is filled with these, one per track:

Screenshot 2023-12-18 at 11 33 00 AM

EDIT 2: OK, so after more research, it seems that the initialTracks option fed to the constructor actually forces to buffer all the tracks via the _bufferTracks(tracks) function. Not sure why that would be desirable. The way to initially add all the tracks without buffering them is to not populate the initialTracks option. Instead, what LOOKS like the proper way to populate Webamp's playlist without buffering is to leave the initialTracks option empty and call this function after the Webamp object is instantiated: webamp.appendTracks([/*tracks*/])

At first, it seems to work, because the twenty tracks each use 40KB of fetching and then stop, so this loads quite fast, but unfortunately, immediately after that 20x40KB fetching queue, it begins downloading all twenty MP3 files, which results in an even longer page to load.

captbaritone commented 6 months ago

Webamp tries to download just the metadata about the tracks in your playlist. This is so that it can display things like title, artist, and duration. The library we use attempts to use range requests to only download a portion of each track, but that's not always possible.

The alternative is to specify this metadata in the tracks you pass as initialTracks so that the playlist window can be populated without fetching any data ahead of time.

that-ben commented 6 months ago

What pieces of metadata information are mandatory to prevent Webamp from pre-fetching all the tracks? ... and can I pass empty strings to each one and 0 to the duration?

captbaritone commented 6 months ago

See the comments in the description of the track shape here: https://github.com/captbaritone/webamp/blob/master/packages/webamp/docs/usage.md#api

that-ben commented 6 months ago

Alright, so after supplying all of these: duration, metaData:artist and metaData:title with arbitrary garbage, it seems it works! Webamp is no longer pre-loading all the tracks! Thanks for the trick, now the page loads instantly even with twenty MP3 in the playlist :)

AND it made all the console errors go away too!