Higher-er quality album art.

[ABillBlakely]

Hello, I stumbled onto this project recently and it's great. I had spent a while trying to hack my own improvements with a greasemonkey script, but I'm not a web dev so results were mixed. My primary motivation was to improve the album art display, by increasing the size and quality of the displayed image. The default is 544x544px (google thinks were in the era of 600x800 monitors I guess). It looks terrible on a lot of monitors, especially larger 4k displays.

I had found that I could replace the image src to get a higher quality image, which I see you are doing as well, but it could be even higher-er. The 800x800 is still not great on a big 4k monitor.

Currently you have this replacement songImg.src.replace("w544-h544", "w800-h800"); but the whole config string is w544-h544-l90-rj which seems to be width, height, compression level, rotation and format [jpeg/png]. If there is documentation for this and you already know it I'm sorry, I couldn't find it.

My own toying with this I found I could set width and height to zero to get the maximum size image available. You can also replace both with a scale parameter (i.e. s0-l90-rj). Usually this results in 1400px file but sometimes 3000 or more.

The highest quality seems to always be using s0-rp for a full size png, but this can be upwards of 20MB (see Baroness below), using s0-l100-rj I haven't been able to tell a difference from the png, but it is a tiny bit better than the l90 jpg without changing the file size too much. l100-rj vs l90-rj isn't too important. I think you can see some artifacts at l90 when zoomed way in, but I figure better safe than sorry. l95 or some such might be a good compromise if file size is a concern.

I would propose the line in "HighResSongImage.js":

let enhancedImg = songImg.src.replace("w544-h544", "w800-h800");

becomes:

let enhancedImg = songImg.src.replace("w544-h544-l90-rj", "s0-l100-rj);

I'm wondering if you think there would be any issues with changing this?

Here are some examples that show the differences it can make:

Margaret Glaspy - original s544-l90-rj
Margaret Glaspy - yours s800-l90-rj
Margaret Glaspy - higher s0-l100-rj
Margaret Glaspy - ultra s0-rp

Margaret - 'yours' compared to 'higher':

Baroness - original s544-l90-rj
Baroness - yours s800-l90-rj
Baroness - higher s0-l100-rj
Baroness - ultra s0-rp

Baroness - 'yours' compared to 'higher':

Ibibio Sound Machine - original s544-l90-rj
Ibibio Sound Machine - yours s800-l90-rj
Ibibio Sound Machine - higher s0-l100-rj
Ibibio Sound Machine - ultra s0-rp

Ibibio - 'yours' compared to 'higher':

TSwift - original s544-l90-rj
TSwift - yours s800-l90-rj
TSwift - higher s0-l100-rj
TSwift - ultra s0-rp

TSwift - 'yours' compared to 'higher':

[CavemanCharlie]

Could you do this to the album art provided to Windows and other apps that display the album art of the currently playing media? I've been looking all over the place for something that could fix this issue. Spotify and some other music players have high-resolution art provided to the system and other apps, but since the YouTube Music app is just a webpage, it doesn't serve the album art in any reasonable resolution for use with any outside music visualizers, like those in Wallpaper Engine.

[ABillBlakely]

Hmm, I'm getting way out of my depth here, but this is what I found. The artwork is provided to windows through the MediaSession API MediaMetadata. The call for this shows up in the base.js script for youtube music.

We can make our own call to this though, by executing navigator.mediaSession.metadata.artwork in the browser console.

Try playing some music in ytmusic and then opening dev tools and running this line in the console

navigator.mediaSession.metadata.artwork = [{'src': 'https://lh3.googleusercontent.com/c-s-_PeWFrCdSHGn7BfGjP0V8pOUrfYFWBDpvBvEgWbE8SJI0REbbkNvZpxohzeQB5kWX3b03WD9L10n=s0-l90-rj', 'type':'image/jpeg'}]

Use a media key to play/pause and you should see the album art changed to the wrong one (unless you also happen to be playing laura marling, but it will also be higher quality. This will need to be done on every song change and probably other events. The artwork field can take an array of multiple sizes. It would be better to add the higher quality options to the existing array which starts with 4 sizes maxing out at 544.

So it seems possible, but there are a lot more details to figure out. A neat addition to be sure!

I also came across some collected info for the image url parameters at this link: https://gist.github.com/Sauerstoffdioxid/2a0206da9f44dde1fdfce290f38d2703

I don't think anything there is useful beyond what I had already figured out (maybe the ability to specify webm is nice) but still nice that someone attempted to document it.

[ABillBlakely]

And check out the difference in the art for this Laura Marling album!