Unable to set image in media sessions metadata

Open music.yandex.ru Open browser console Paste this code:

navigator.mediaSession.metadata = new MediaMetadata({
    title: "11111111111",
    artist: "222222222",
    album: "3333333333",
    artwork: [
        { src: "https://avatars.yandex.net/get-music-content/5375761/c8e05100.a.19837155-1/200x200" }
    ]});

Open Now playing widget. Title, artist, album is set correctly. Cover not set.

macOS 13.0.1 (22A400) Safari 16.1 (18614.2.9.1.12)

Note! In macOS 12.6.1 Safari 15.6.1 (17613.3.9.1.16) all works as expected.

Well, Regarding my previous comment, i will deny that the problem is really fixed. The problem is fixed somehow.... HALF way...

This problem is becoming really annoying...

The image is changing in this mode:

During above mode, it's changing the micro-artwork next to the iPhone 14's Island, also it's changing the image in the small player mode.

BUT... it isn't changing while in this small player mode, and it isn't changing in the Dynamic Island artwork too:

Having the same issue. If I add an artwork with the size of 96x96 it DOES work properly to get the smaller size but now when you tap the smaller artwork to expand, it uses the small art which of course is now pixelated. Guessing it has something to do with scaling as the issue presents itself in reverse depending on which size art you feed mediaSession first.

        //mediaSession update
        if ('mediaSession' in navigator) {
            navigator.mediaSession.metadata = new MediaMetadata({
                title: title,
                artist: artist,
                album: album,
                artwork: [
                    { src: cover + '&h=96&w=96', sizes: '96x96',   type: 'image/jpg' },
                    { src: cover + '&h=128&w=128', sizes: '128x128', type: 'image/jpg' },
                    { src: cover + '&h=192&w=192', sizes: '192x192', type: 'image/jpg' },
                    { src: cover + '&h=256&w=256', sizes: '256x256', type: 'image/jpg' },
                    { src: cover + '&h=384&w=384', sizes: '384x384', type: 'image/jpg' },
                    { src: cover + '&h=512&w=512', sizes: '512x512', type: 'image/jpg' }
                  ]
            });

        }

Also, if I use the large 512px size art only, there are times when I can expand the small player artwork (which is empty) and then when you tap the larger artwork to make it a small player again, it does assign the artwork to the small player.

Not sure why this is still a problem - Come on Apple.

(Sorry for the comment & post - realized it after I posted as a comment which limits character to 500)

The problem partially remained! iOS 16.4 iPhone 14 Pro Max https://share.icloud.com/photos/0883DKNWrNb5qb49NspdY4EMg

Still has low quality images on 16.4.1

In 16.4.1[a] it will show:

  • Title text
  • Artist text

It does not show:

  • Album text
  • Album artwork

Looks like this ...

I am on iOS 16.5 and still having issues when providing three sizes of image/jpeg (640x640, 300x300, 64x64).

The small image is initially grey but will sometimes load in after expanding and closing the image:

OK, findings regarding iOS cover image.

Images should be rectangular, e.g. 96x96, 128x128, etc.. iPhone has two images, one - thumbnail and one big - when you click on it for small image - 96 and 128px works. If using images bigger, e.g. 384, 512 - it will not work for big image - works any image, e.g. 96-512

Issue - you can’t use 2 images, although specification support it artwork: [ { src: "https://dummyimage.com/96x96", sizes: "96x96", type: "image/png", }, { src: "https://dummyimage.com/128x128", sizes: "128x128", type: "image/png", }

it will grab ALWAYS the first image. And as result - max image to support both thumbnail and big one - it’s to use rectangular 128x128!

@siegerstein is right. Thats the only workaround so far... :( 128px is fine for the small image, but is way too small for the big image. It's pixelated. It's iOS 17... and Apple still didn't fix this issue. Apple is becoming more and more ****** every day. They should change their motto to "IT JUST DOESN'T WORKS"

Update: After the 17.1 update, i think everything is working fine so far! I use only the 512px photo, and it’s working on the big image player, small image player and in CarPlay too. I hope Apple not break it again in some further updates.

iOS 17.2 and I can't get anything to show up in my CapacitorJs app... but it works perfectly on the Android app. I'm not sure what to do.

Unable to set image in media sessions metadata
 
 
Q