Last.fm Widget #

Usage #

1. Edit the values for the Username to fetch from and your last.fm api key in the script (get it from here).

class LastFmWidget extends HTMLElement {
  // Constants
  #USERNAME = '<enter your last.fm username here>'; // Change this
  #API_KEY = '<enter your last.fm api key here>'; // and this

2. (Optional) Change the fallback image url for cover arts.

#FALLBACK_IMG = 'https://lastfm.freetls.fastly.net/i/u/64s/c6f59c1e5e7240a4c0d427abd71f3dbb.jpg'; // Change this

3. (Optional) Change the CSS for the widget. This is the html structure of different states of the widget for reference.

<!-- Widget with Track Info -->
<div class="wrapper">
    <img src="https://link.to/cover-art.png" alt="A Banger Track by Some Talented Artist"/>
    <div class="track info">
        <p>A Banger Track</p>
        <p>Some Talented Artist</p>
        <p>Album of the Year</p>
    </div>
</div>

<!-- Widget with Loading State -->
<div class="wrapper">
  <p class="loading">loading...</p>
</div>

<!-- Widget with Error -->
<div class="wrapper">
  <p class="error">Relevant Error Message</p>
</div>

3. import the script in your html.

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

Attributes #

Variants #

1. Simple

<last-fm-widget></last-fm-widget>

2. Auto-Updating

<last-fm-widget auto-update></last-fm-widget>

3. Auto Updaing with custom Polling Rate.

<last-fm-widget auto-update polling-rate="30"></last-fm-widget>