🔴 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 tracklist when it detects multiple tracks from 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 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 "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 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. 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. Notice: In widget version 1.11 or older, bots are by default only ignored in Demo and Basic modes. But from widget version 1.12, bots are by default also ignored in Backend-supported mode. If desired, you can disable "bot-filtering" in Backend-supported mode by adding attribute allowbots to the <lastfm-tracks/> html-element.

Attributes

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

• 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. Widget 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.
• ignorebots - In Backend-supported mode this attribute enables "bot-filtering" in the widget itself, to prevent calls to the "proxy-api" when useragent looks like a "bot". No value for the attribute is needed, just the presence of the attribute. In Basic and Demo mode, "bots-filtering" is always enabled, so this attribute is redundant/ignored in those modes. This attribute has no effect in widget-version 1.12 or newer, because bots are now ignored by default in all widget modes.
• 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-widget header becomes "dynamic" (shown only when mouse is over widget).
  • no-albums - When added, the red album header-lines will not be shown.
  • no-scroll - When added, scrolling the track-list inside the widget is not possible (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.