FABLED.DAY

Displaying Songs from Last.fm

To view all of my codes for these various scrobbling trinkets that display your music, visit this collection on Code Pen. I was inspired by examining code written by the amazing Prashant Shrestha. You can find his own version here.

Last.fm is a service that allows you to aggregate what you’re listening to across multiple platforms, sharing recommendations with friends and discovering new music. Before Halloween of 2024, I had only the faintest clue about it. Guess what, though? Using Last.fm, you can display what you’re listening to (on Spotify or elsewhere, apparently) on your website. This alone was worth signing up for me, so I did, and hooked my Spotify account into the service. I’ll probably use it in some other way later.

You can use Last.fm's API key, if you create one, to display your music on the web. You can follow the instructions given by Last.fm for doing this. It really boils down to creating a Last.fm account, linking it into your music service of choice, then requesting an API key here. You will notice a lot of fields in that form on the page I just linked, but really, you need only give your "application" a name of your choice, and it'll generate and work.

Once you have your API key, you can use Javascript to share your music! After looking at existing last.fm display methods, I made several versions of my own. They suit my purposes, and you might find them interesting too. I thought I’d share them here in case you’d like to play with them. I tried my hardest to make them easy to customize (mostly for myself, naturally) later on, and to prepare them to handle as much of the process as possible. They’re still probably not that good, but my husband always says that if it works, it’s not too bad, right?

These trinkets all make ample usage of jQuery and will not function without it, so be sure to include the following line (or another link to jQuery) just before your </body> tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

I’ve made two scrobbling trinkets.

The first pulls the most recently played song and displays that, with the artist and album cover. It would work well in a sidebar. I made a vanilla version without the album cover, too.

The second allows you to create a list (up to I believe forty songs) of your most recent tracks, their artists and their covers. There is a version without album covers, which exports the results as a simple ordered list, as well.

I certainly recommend you also visit the tutorial I used to get a handle on this, right here, by Prashant Shrestha.

Please note: I went ahead and left my own username and API key for Last.fm listed in the Code Pen examples given below to show how it works. I see no harm in doing this given that it's already running on this site in the sidebar, after all. That said, if it appears that the titles of the songs or artists names are random Cyrillic characters, it isn't a glitch. I just listen to a lot of Russian rap and hiphop, so that often appears.

Sounds of the Now: Single Song

See this and play with it on on Code Pen

CSS

    #lastfm {
        width: 100%; /* this should remain 100% obviously, if you want it to entirely fill the container in which it is placed, ie, a sidebar, etc... */
        margin: 0.5em auto;
        border: 0.5em solid; /* border for the entire display container */
        border-radius: 0.5em;
        background-color: pink; /* the display background color */
        transition: 0.3s;
        display: inline-block;
      }
      
      #covers {
        width: 20%;
        float: left;
        display: block;
      }
      
      #lastfm a img#albumart {
        width: 100%;
        aspect-ratio: auto 1 / 1;
        margin: 0.5em;
        border: 0.5em solid black; /* border for the album art image, also can function as padding for it if you want to change it to the background color of #lastfm */
        border-radius: 0.5em;
      }
      
      #sounds {
        text-align: center;
        float: right;
        width: calc(80% - 1.5em);
        display: block;
      }
      
      /* the next four entries represent wholly aesthetic choices and can be played with and changed as you wish, mostly without breaking the widget :-) */
      
      #sounds h3 {
        font-size: 1.5em;
        border-bottom: 1em double;
        text-align: center;
        margin: auto;
        font-family: impact;
        text-transform: uppercase;
      }
      
      #sounds p {
        margin: 0 0.5em 0.5em;
        text-align: center;
        font-size: 0.8em;
        font-weight: bold;
        padding: 0.4em;
        font-family: tahoma;
      }
      
      #sounds a {
        text-decoration: none;
        color: firebrick;
      }
      
      #sounds a:hover {
        text-decoration: underline;
      }

HTML

    <div id="lastfm">
    <div id="covers">
      <a id="albumartlink" target="_blank">
        <img id="albumart" style="display:none;" alt=" "><!-- the previous line denotes the image showing the artwork associated with the current song -->
      </a>
    </div>
    <div id="sounds">
      <h3>Sounds of the Now</h3>
      <p>
        <span id="current">I've been listening to <a id="tune">
            <!-- javascript will fill this area with the song title and artist name -->
          </a> lately.</span>
        <!-- the previous section (<span id="current"> etc</span>) vanishes entirely if nothing is playing -->
        <span id="silent">Nothing is currently playing... maybe you should recommend some music?!</span>
        <!--
  and is replaced by the previous section (id="silent"), customize as you want -->
  
        Visit the <a href="#">playlists page here</a>, or my <a id="profile" target="_blank">Last.fm profile</a>.
        <!-- the previous sentence with the link to a playlists page can be altered in any way you want, to remove the link, add others, etc. Alternatively, remove it entirely. -->
      </p>
    </div>
  </div>

Javascript

const apikey = "YOU MUST INSERT YOUR LAST.FM API KEY HERE"; //last.fm API key goes here of course...
    const username = "YOU MUST INSERT YOUR LAST.FM USERNAME HERE"; //last.fm username goes here...
    const s = 60; //number of seconds before each refresh
    const profile = "https://last.fm/user/" + username;
    const tunes = function () {
      $.ajax({
        type: "GET",
        url:
          "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=" +
          username +
          "&api_key=" +
          apikey +
          "&format=json&limit=1", //building the call, and calling out to last.fm for your most recent track, but will they grace us with a response? do not refuse the call. it is your destiny, last.fm
        dataType: "json",
        success: function (resp) {
          //oh, they responded - good... moving on...
          var tuning = resp.recenttracks.track[0]; //pull most recent track pls?
    
          var formatted = tuning.name + " by " + tuning.artist["#text"]; //format display of most recent track title and artist name
          $("#silent").hide(); //hides the error message if there's no error. i love weed...
          $("#tune").html(formatted); //adds a line of visible text including the song title and artist
    
          $("#albumart").attr("src", tuning.image[2]["#text"]);
          $("#albumart").on("load", function () {
            $("#albumart").show();
          }); //adds the albumart of the most recent song played, but only once it has loaded so that there's no "gap" of sorts with a blank image
    
          $("#profile")
            .attr("href", profile)
            .attr("target", "_blank")
            .attr("title", username + " on Last.fm"); //links to your very own last.fm profile automatically!!
    
          $("#tune, #albumartlink") //links both the text displaying the current song and the album art to the song's page
            .attr("href", tuning.url)
            .attr("title", tuning.name + " by " + tuning.artist["#text"])
            .attr("target", "_blank");
        },
        //this part sets up an error function. it hides the text and the album art portion and shows the notice that nothing is playing. to preview what this looks like, remove your API key or replace it with dummy numbers instead.
        error: function (resp) {
          $("#covers").hide();
          $("#current").hide();
          $("#sounds").css("width", "100%");
          $("#silent").show();
        }
      });
    };
    
    tunes(); //the function executes when the page loads
    setInterval(tunes, s * 1000);
    // reloading to see what new stuff is playing. you can remove the latter line (setIntervals etc) if you only want this to load once per page load, without updating.

Sounds of the Now: Single Song Simplified

See this and play with it on Code Pen.

HTML

<div id="lastfm">
    <div id="sounds">
      <p>
        <span id="current">I've been listening to <a alt="Currently Playing" target="_blank" id="tune">
            <!-- javascript will fill this area with the song title and artist name -->
          </a> lately.</span>
        <!-- the previous section (<span id="current"> etc</span>) vanishes entirely if nothing is playing -->
        <span id="silent">Nothing is currently playing.</span>
        <!--
  and is replaced by the previous section (id="silent"), customize as you want -->
        Visit my <a target="_blank" id="profile">Last.fm profile</a>, or visit the <a href="#">playlists page here.</a> <!-- the previous sentence with the link to a playlists page can be altered in any way you want, to remove the link, add others, etc. Alternatively, remove it entirely. -->
      </p>
    </div>
  </div>

Javascript

    const apikey = "YOU MUST INSERT YOUR LAST.FM API KEY HERE"; //last.fm API key goes here of course...
    const username = "YOU MUST INSERT YOUR LAST.FM USERNAME HERE"; //last.fm username goes here...
    const s = 60; //number of seconds before each refresh
    const tunes = function () {
      const profile = "https://last.fm/user/" + username;
      $.ajax({
        type: "GET",
        url:
          "https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=" +
          username +
          "&api_key=" +
          apikey +
          "&format=json&limit=1", //building the call, and calling out to last.fm for your most recent track, but will they grace us with a response? do not refuse the call. it is your destiny, last.fm
        dataType: "json",
        success: function (resp) {
          //oh, they responded - good... moving on...
          var tuning = resp.recenttracks.track[0]; //pull most recent track pls?
    
          var formatted = tuning.name + " by " + tuning.artist["#text"]; //format display of most recent track title and artist name
          $("#silent").hide(); //hides the error message if there's no error. i love weed...
          $("#tune").html(formatted); //adds a line of visible text including the song title and artist
          $("#profile").attr("href", profile);
          $("#tune") //links the text displaying the current song to the song's page
            .attr("href", tuning.url)
            .attr("title", tuning.name + " by " + tuning.artist["#text"])
            .attr("target", "_blank");
        },
        //this part sets up an error function. it hides the text and the album art portion and shows the notice that nothing is playing. to preview what this looks like, remove your API key or replace it with dummy numbers instead.
        error: function (resp) {
          $("#current").hide();
          $("#silent").show();
        }
      });
    };
    
    tunes(); //the function executes when the page loads
    setInterval(tunes, s * 1000);
    // then at intervals of every sixty seconds, reloading to see what new stuff is playing. you can remove the latter line (setIntervals etc) if you only want this to load once per page load, without updating.

Sounds of Now: Recent List

See this and play with it on Code Pen.

CSS

    /* below styles the container for the entire situation, so to speak... */
    #recentsongs {
      width: 40%;
      margin: 0.5em auto;
      font-family: gill sans, sans-serif;
      border: 0.6em solid black;
      border-radius: 0.5em;
      background-color: black;
    }
    
    /* below styles the title at the top of the display of songs, which can optionally be removed as long as you remove it within the html as well */
    
    #recentsongs h2 {
      background-color: black;
      color: pink;
      margin: 0;
      padding-top: 0.1em;
      text-align: center;
      text-transform: uppercase;
      font-size: 2.2em;
    }
    
    /* the next portion styles the paragraph text which follows the title, remove if you remove the paragraph itself */
    
    #recentsongs p {
      margin: 0.3em;
      font-size: 0.8em;
      text-align: center;
      color: pink;
    }
    
    #recentsongs a {
      text-decoration: none;
      color: lightcoral;
    }
    #recentsongs a:hover {
      text-decoration: underline;
      text-decoration-style: dotted;
    }
    
    /* styling the behavior of the links within the display of songs, ie, the song titles themselves */
    #recentsongs .song a {
      text-decoration: none;
      color: firebrick;
    }
    #recentsongs .song a:hover {
      text-decoration: underline;
      text-decoration-style: dotted;
    }
    
    /* the container for each individual song itself */
    #recentsongs .song {
      display: flex;
      width: 100%;
      background-color: pink;
      justify-content: start;
      gap: 0em;
      padding: 0;
      border-top: 0.6em solid black;
    }
    
    /* positioning the information next to the album cover */
    #recentsongs .songinfo {
      flex: 1;
      margin: 0.5em;
    }
    
    /* styling the title and artist names */
    #recentsongs .songtitle {
      text-transform: uppercase;
      font-weight: bold;
      line-height: 1em;
      font-size: 1.6em;
    }
    
    #recentsongs .artist {
      font-size: 1.2em;
      color: indianred;
      line-height: 1em;
      text-transform: lowercase;
    }
    
    /* styling the album art image for each song. the height of the first element will apply to width of the art too, and affect the size of each song entry in the list. */
    
    #recentsongs .albumart {
      width: 14%;
    
      background: black;
      border-right: 0.6em solid black;
    }
    
    #recentsongs .albumart img {
      height: 100%;
      width: 100%;
      padding: 0;
    
      margin: 0;
      border-radius: 0.1em;
    }

HTML

<div id="recentsongs">
    <h2>Songs I've Heard recently</h2>
    <p>Here, you'll find my <span id="topwhat"></span> most recent listens. You can also <a id="profile" target="_blank">visit my Last.fm profile</a>. I have rich and varied musical tastes spanning many genres, and lead a very chill, yet hip lifestyle... <span id="nosongs" style="display: none;"> except I haven't listened to any music recently?! You should recommend some to me!</span></p>
    <div id="mostrecent"></div>
  </div>
  </div>

Displaying Songs from Last.fm

Sounds of the Now: Single Song

CSS

HTML

Javascript

Sounds of the Now: Single Song Simplified

HTML

Javascript

Sounds of Now: Recent List

CSS

HTML

Javascript

Sounds of the Now: Simplified Recent List

HTML

Javascript