2.3 KiB
Last.fm album art fetcher
You can include album art on your site without having to look up URLs or host it yourself!
This script uses the Last.fm API to pull down album art and insert it into a static site.
Usage
- In the
<head>
of your HTML, add a<script>
tag with:- a
src
attribute with the path to thealbum-art.js
file, - a
defer
attribute present, and - a
data-api-key
attribute with your Last.fm API key.
- a
- In the
<body>
, use<img>
tags wherever you want album art, with:- a
data-album
attribute containing the name of the album you want, - a
data-artist
attribute containing the name of the artist, and - a
width
andheight
defined, preferrably square.
- a
With this info supplied, album-art.js
will
use the album and artist supplied on each <img>
to search for the albums on Last.fm.
If it finds the album,
it will insert the album art for it into the page,
and you're good to go.
If the script encounters an error during this process,
it will put the error message into the data-error
attribute
of the affected <img>
element.
Usage looks something like this:
<head>
...
<script defer src='example/path/to/album-art.js' data-api-key='YOUR-API-KEY'></script>
...
</head>
<body>
...
<img data-album='Heaven or Las Vegas' data-artist='Cocteau Twins' width='64' height='64' />
...
</body>
Setup
- First, you need to have a normal Last.fm account.
- Once logged in, create a Last.fm API account to get an API key.
- The API call for
album-art.js
doesn't require any special authentication beyond the API key, so you don't need to fill in the "Callback URL" or "Application homepage" fields.
- Download a copy of
album-art.js
and put it somewhere on your site. - Follow the Usage instructions above to include the script on any page on your site you want to include album art on.
License
If you want to credit me on your site, that would be awesome. You can credit me as gome.
If you modify (or just enjoy!) this software, please let me know, and share any useful improvements (pull requests are a welcome way to do so).