đź”´ Last.fm Tracks widget

This page is a simple demonstration of the Last.fm Tracks widget showing recent "scrobbles" from a last.fm account. Here you'll also find instructions on how to insert the widget on a webpage. But for a start, you can try customizing the widget shown here, including making it show scrobbles from your own (or any) Last.fm account with public "scrobbles".

The essential

To use the widget on a webpage, you need to import lastfm.js as a module. If you do that from html, remember the type attribute:

<script src="lastfm.js" type="module"></script>

The script defines the custom html-element <lastfm-tracks/>. Insert such element on a webpage where you want a Tracks widget to be.

When creating widget, the script will read the tracks.css stylesheet file, which it expects to find at same location as the script file itself.

The widget has 3 modes. The Demo and Basic modes are "standalone" modes where widget communicates directly with last.fm's API to get the "scrobbles". The third mode is Backend-supported mode where you need to have a backend "proxy-api" that the widget can communicate with. The idea is that the proxy-api should mirror/forward the two methods (user.getinfo and user.getrecenttracks) from last.fm's audioscrobbler 2.0 api that the widget needs to function. Your own backend proxy-api is a very good idea, if widget is to be placed on a page with more than very modest amounts of traffic, because you can implement "throttling" in the proxy-api to prevent overwhelming numbers of requests being sent directly to last.fm's API.

  1. "Demo" mode

    <lastfm-tracks user="your username"></lastfm-tracks>

    In the "standalone" Demo mode, the widget is "static". Latest "scrobbles" will be loaded upon creation of the widget, but tracklist will not be refreshed after that.

  2. "Basic" mode

    <lastfm-tracks user="your username" apikey="your own api key" interval="60"></lastfm-tracks>

    Adding your own API-key - which you can get for free - puts the widget into the Basic mode where it supports periodically refresh of the tracks-list. With the interval attribute, you can also set the track-list's refresh-rate in seconds.

  3. "Backend-supported" mode

    <lastfm-tracks backend="/proxy-api" interval="35"></lastfm-tracks>

    Add the backend attribute pointing to a custom "proxy API" to enable Backend-supported mode. Depending on your proxy-api, you could (or should?) also add other attributes like user and apikey. But usually it will be smarter - and simpler - to have fixed values for these defined in the backend.

Attributes

Potential attributes to set on the <lastfm-tracks/> element:

Get your own API key for Basic or Backend-supported mode

To enable the Basic and Backend-supported modes of the widget, you need your own Last.fm API-key. To get this, go to https://www.last.fm/api/authentication. Though this page talks about authentication and secrets, you can ignore that. For our non-authenticated use of the API, you don't need a secret, but you still need an API-key connected to your Last.fm account. So follow the "apply for a key" link. Here you should enter an application name and description.

I imagine something like this will be fine [click to view]... [screenshot]

Once submitted, you should get a personal API-key which can be used for the Tracks widget, to either enable the widget's Basic mode, or use it via a proxy-api with widget in Backend-supported mode.

Customize widget...

Note, if your browser-window is wide enough, this column is conveniently shown next to widget for easy experimenting🙂

Current widget mode:

Enter user and api-key to try widget in Demo and Basic mode with any Last.fm user:

ℹ️ To resize widget, drag the handle shown next to lower right corner of the widget.