Grab iTunes image artwork from the DOM using the Open Graph meta tags

itunes-artist-photos.md

iTunes Artist Photos

The iTunes API doesn't provide a way to grab artist images, but the iTunes website uses Open Graph meta tags, which embeds a meta tag with a property attribute value set to og:image. As it turns out, this seems to be the same image used in the iTunes artwork.

The URL structure is similar to the artworkUrl values returned by the API, but what concerns us here is the part I've indicated at the end of the URL.

http://is3.mzstatic.com/image/thumb/Music7/v4/68/68/41/68684190-833b-bfb4-5018-e5a2e6f69eb0/source/1200x630bf.jpg
                                                                                                   └─ widthxheight

The maximum image dimensions seems to be 10,000px by 10,000px. We can simply replace 1200x630bf.jpg with the dimensions we want.

var x = document.querySelector('meta[property="og:image"]').getAttribute("content");
var image = x.substring(0, x.lastIndexOf("/") + 1) + "10000x10000-999.jpg";
window.location = image;

Note the -999 at the end, which denotes that we want the highest quality image.

For example, consider Taylor Swift

Running the above gives the following page:

http://is3.mzstatic.com/image/thumb/Music7/v4/68/68/41/68684190-833b-bfb4-5018-e5a2e6f69eb0/source/10000x10000-999.jpg

What's nice about this is that this method can be used to grab any images (including album art, TV show pictures, movie pictures, iBook covers, etc), since they all use the og:image Open Graph meta value. I don't use iTunes as my daily media player, but this should be the same as the iTunes artwork for all the media types.

You can even cobble together a bash script to download the image files you need (it might be easier to run a headless browser, like a CapserJS module, or at least something that can parse DOM).

url=https://itunes.apple.com/ca/artist/taylor-swift/id159260351
img=$(curl $url | grep -Eo "<meta content=\"[a-zA-Z0-9 :\/\.\-]+.jpg\" property=\"og:image\" \/>" | grep -Eo "http(s)?://[a-zA-Z0-9:\/\.\-]+.jpg")
wget $img

You can combine this with the API and search for an artist, grab their artistId, navigate to their artist page (which is just your country's base iTunes url with /artist/id and then the artistId). From here, you can then grab their artist and album art photos.

For most operations (other than getting the Artist Photo), you can just use Ben Dodson's iTunes Artwork Finder, which works by leveraging the iTunes Search API.

Is it possible to get the original picture? Take this: https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/bd/ed/cf/bdedcfcf-3b3d-35ae-f752-175e2d8034dc/194152826486.png/1200x630wp-60.jpg. We can deduce that the original picture is a png, but the link https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/bd/ed/cf/bdedcfcf-3b3d-35ae-f752-175e2d8034dc/194152826486.png does not work.

Not that I know of.

I created a version for Flutter in dart which works perfect for me.

import 'package:http/http.dart' as http;

static int width = 300;
static int height = 300;

Future<String> getArtistArtworkUrl(String artistId) async {
    final response = await http
        .get(Uri.parse('https://music.apple.com/de/artist/$artistId'));
    final document = response.body;

    RegExp regEx = RegExp("<meta property=\"og:image\" content=\"(.*png)\"");
    RegExpMatch? match = regEx.firstMatch(document);

    if (match != null) {
      String rawImageUrl = match.group(1) ?? '';
      String imageUrl = rawImageUrl.replaceAll(
          RegExp(r'[\d]+x[\d]+(cw)+'), '${width}x${height}cc');
      return imageUrl;
    }

    throw Exception();
  }

Simply use it within an async function to get the artwork url.

Is it possible to get the original picture? Take this: https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/bd/ed/cf/bdedcfcf-3b3d-35ae-f752-175e2d8034dc/194152826486.png/1200x630wp-60.jpg. We can deduce that the original picture is a png, but the link https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/bd/ed/cf/bdedcfcf-3b3d-35ae-f752-175e2d8034dc/194152826486.png does not work.

Artwork can only be a max of 4000x4000 so if you go to https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/bd/ed/cf/bdedcfcf-3b3d-35ae-f752-175e2d8034dc/194152826486.png/4000x4000.png you see that the size apple returns us is 3000x3000 which indicates that https://is1-ssl.mzstatic.com/image/thumb/Music124/v4/bd/ed/cf/bdedcfcf-3b3d-35ae-f752-175e2d8034dc/194152826486.png/3000x3000.png is the original file.