Category: Development

I like last.fm from since back when Pandora became geofenced. One thing, which is kind of annoying, is that you have to jump through hoops to get your favorite tag started. I exclusively want that one tag as station and instead of just setting a bookmark, I wanted to have a go with GreaseMonkey to have a seamless ‘built-in’ experience. And not just changing the window.location but having a button left of the ‘<<‘ (previous) at the always visible player.

With very little exposure to javascript before, I was pleasantly surprised about the ease of finding information. Sadly from multiple decades, different styles, versions, …

Right-click and “Inspect Element” on the player yielded:

Aha, the player is an <ul> (unordered list) in HTML, and is of class ‘media-controls’. The button to play the tag is more interesting:

Three classes, custom attributes.

It took about 30 min. to patchwork something together by searching the web for things like “greasemonkey button insertion” “javascript select by class” and the like. Debugging seems a lot easier today with the browser console, if it were available at the start of this millenium maybe I could’ve had a more thorough dip into JS.

Now, on all pages at last.fm I have an extra button for my alternative-rock-tag. Nice.

// ==UserScript==
// @namespace aoe
// @name lastfm play Alternative tag
// @version 1.0
// @description Add button to play Alternative-tag
// @include https://www.last.fm/*
// @include http://www.last.fm/*
// @run-at document-start
// @grant none
// ==/UserScript==

//the above comments are interpreted by Greasemonkey, the 
//@include https://www.last.fm/* enables the script on all pages 

(function(){
  'use strict'
   window.addEventListener('load', () => {
     addButton();
   })

   function addButton() {
//create new button as list element
     let liel = document.createElement('li');
     let btn = document.createElement('button');
//add the details learned from inspecting, classes and attributes
//exchange button class with 'player-bar-btn' otherwise it looks
//weird, try yourself to see
     btn.classList.add('player-bar-btn');
     btn.classList.add('stationlink');
     btn.classList.add('js-playlink-station');
//insert link of real button
     btn.setAttribute("data-station-url", "/player/station/tag/alternative+rock");
     btn.setAttribute("data-analytics-action", "StartStation");
     btn.setAttribute("data-analytics-label", "tag");
//grab the player element and put the created button first
     let controls = document.getElementsByClassName("media-controls")
     liel.appendChild(btn);
     controls[0].insertBefore(liel, controls[0].childNodes[0]);
   }
}())