How to access the cover image of mp3 file from its metadata in QML?

Nisha_R

MediaPlayer{
           id: player;
           playlist: Playlist {
               id: playlist
               PlaylistItem {
                       source: "file:///C:/Users/xyz/Desktop/trial/4.mp3"}
                            }
                              }
            }
Image{
               x: 305
               y: 196
               width: 68
               height: 49
               source: player.metaData.coverArtUrlLarge
           }

Unable to assign [undefined] to QUrl
this is the error i get on assigning player.metaData.coverArtUrlLarge to source.

raven-worx

@Nisha_R
are you sure that the mp3 file even has a cover art in it's meta data?

Nisha_R

@raven-worx yes it has a cover art in its meta data.

p3c0

@Nisha_R coverart URL is different than covert art image. I guess the media file contains cover art image.

Nisha_R

@p3c0 thank you,
what has to be assigned to image source to access its embedded cover image from its metadata

p3c0

@Nisha_R AFAICS there is no way to do so than using some 3rd party library for extracting it.

Nisha_R

@p3c0 ok i shall look for something like that.
Thank you.

raven-worx

@Nisha_R
based on the propsals above you could use id3lib to do the following:

implement a QQuickImageProvider, since images can only be set by URL in QML
register this image provider with a name like "Mp3CoverArt": engine->addImageProvider(QLatin1String("Mp3CoverArt"), new MyMp3CoverArtImageProvider);
in QML you can request the image with source: "image://Mp3CoverArt/<custom-id-of-mp3-file>". You could also specify the path to the mp3 file as an 'id', but make sure the URL stays valid. (e.g. you could encode the path as base64)
in the image provider you will receive the url you set (convert it back from base64)
use id3lib to retrieve the image: Important for you will be the Find(), GetRawBinary(), using the frame id ID3FID_PICTURE (i guess this is the right one?)
create your QPixmap/QImage from the binary data using QImageReader for example

haven't tried it, but it should work i think :)

p3c0

Or once you fetch the coverart using the 3rd party library you can just convert the image to base64 and directly set it to Image's source. For eg.

imageObj->setProperty("source", "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAQvUlEQVRo3t2beYxd1X3Hv79zzr33LTNv3iwez+aNDOCw2WAMKSIgpTZJaUA0SkkrNWnTVhBFolG6pJIb2ihFFk3/aEBJF0VVk0pJS5eoCYVCYwjEwhTbY4PBi7A9tpkZ27O/W

Nisha_R

@raven-worx @p3c0 thank you:)
i shall try with that.

Nisha_R

@p3c0 @raven-worx
what does metaData.coverArtUrlLarge allow us to access from its metadata?

p3c0

@Nisha_R I think it will be a URL for online coverart. For eg. a spotify URL
https://i.scdn.co/image/c3c5cbe660fe6935f2962aed480f306fa3ac1f9d
https://i.scdn.co/image/c0f4db566965ccc4ddad3fc0a5e6f82acc676728

I think they should have also provided CoverArtImage for QML mediaplayer.

Nisha_R

Thank you @p3c0