🔴 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".

A unique feature of this widget is that it (optionally) displays red "album-headers" in the tracklist when it detects multiple tracks from the same album has been played successively. Just like Last.fm itself did in the "old days".

You can also see the widget in practical use on Rockland.

The essential

To use the widget on a webpage, get lastfm.js and tracks.css from latest widget release, and place them together on your site. You then 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>

Don't include the stylesheet tracks.css yourself. Just make sure to place the stylesheet file at the same location as the lastfm.js script file. The stylesheet will automatically be read from there when a widget is created.

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

The widget has three modes. The Demo and Basic modes are "standalone" modes where the 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 "proxy-api" that the widget can communicate with. The idea is that the proxy-api should "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 your widget is to be placed on a page with more than 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 initially upon creation of the widget, but the 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 periodical 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. In such a setup, you will usually define settings like API-key and username in the backend, rather than having them defined by attributes on the widget.

Some advanced "bots" crawling the internet support Javascript, and thus potentially trigger calls to the audioscrobbler API when loading the Tracks widget. To avoid overload of the API, Tracks will by default ignore clients identifying itself with a useragent string including text like "bot", "spider", "crawl", "archive", "harvest", "radar" and "headless". This so far seems effective preventing most such "bots" triggering calls the audioscrobbler API.

Attributes

You can use the following attributes (and CSS classes) on the <lastfm-tracks/> element to configure the widget. The latest version of the widget is assumed, details may vary on older versions of the widget:

• user - The Last.fm username to fetch scrobbles for.
• apikey - Your Last.fm API key.
• backend - The address of a backend proxy-api. If you have set up a backend proxy, provide its URL here.
• interval - Refresh interval in seconds. On Last.fm profile pages, an update interval of 30 seconds is used, so you should probably never go lower than that. The default value is 60 in Basic and Backend-supported mode, and the widget doesn't allow lower than 30 in Basic mode. The value is ignored in Demo mode.
• tracks - The maximum number of tracks to display. Default is 50, max. allowed value is 200.
• updates - Number of times the widget is allowed to refresh the tracks-list. 0 = unlimited and 1 = initial only. Set a higher value to specify a maximum number of times the widget refreshes. The default value is 0 in Basic and Backend-supported mode. The attribute is ignored in Demo mode (always initial only).
• allowbots - In Backend-supported mode this attribute disables "bot-filtering" in the widget itself. No value for the attribute is needed, just the presence of the attribute. In Basic and Demo mode, "bots-filtering" cannot be disabled, so this attribute is ignored in those modes.
• css classes:
  • dynaheader - When added, the profile-header becomes "dynamic" (Header only shown when the mouse is over the widget).
  • no-albums - When added, the red album header-lines will not be shown.
  • no-scroll - When added, it disables the possibility of scrolling through a tracks-list that is longer than what's initially visible in the widget (Otherwise it can be done with touch or mouse-wheel).

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

To use 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]...

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.