Bandcamp Audio Slider

bc_audio_slider.user.js

// ==UserScript==
// @name            Bandcamp Audio Slider
// @description     Add a volume slider to Bandcamp's audio player.
// @version         1.1.0
// @updateURL       https://gist.githubusercontent.com/rakiru/b358f54915ef135a66ca30c915dd925c/raw
// @include         https://*.bandcamp.com/*
// @include         https://bandcamp.com/*
// @run-at          document-end
// @grant           GM_addStyle
// @icon            https://s4.bcbits.com/img/bc_favicon.ico
// ==/UserScript==

// Bunch of shit from: http://stackoverflow.com/a/13734859/341673


if (typeof GM == 'undefined') {
  this.GM = {};
}


if (typeof GM_addStyle == 'undefined') {
  this.GM_addStyle = (aCss) => {
    'use strict';
    let head = document.getElementsByTagName('head')[0];
    if (head) {
      let style = document.createElement('style');
      style.setAttribute('type', 'text/css');
      style.textContent = aCss;
      head.appendChild(style);
      return style;
    }
    return null;
  };
}

GM_addStyle(".bandcampaudioslider-albumpage {\
  -webkit-appearance: none;\
  width: 55px;\
  margin: 1px 0;\
}\
.bandcampaudioslider-albumpage:focus {\
  outline: none;\
}\
.bandcampaudioslider-albumpage::-webkit-slider-runnable-track {\
  width: 100%;\
  height: 8px;\
  cursor: pointer;\
  background: rgba(254, 254, 254, 0.2);\
  border-radius: 1px;\
  border: 1px solid #6b6b6b;\
}\
.bandcampaudioslider-albumpage::-webkit-slider-thumb {\
  border: 1px solid #6b6b6b;\
  height: 10px;\
  width: 16px;\
  border-radius: 1px;\
  background: #ffffff;\
  cursor: pointer;\
  -webkit-appearance: none;\
  margin-top: -2px;\
}\
.bandcampaudioslider-albumpage:focus::-webkit-slider-runnable-track {\
  background: rgba(255, 255, 255, 0.2);\
}\
.bandcampaudioslider-albumpage::-moz-range-track {\
  width: 100%;\
  height: 8px;\
  cursor: pointer;\
  background: rgba(254, 254, 254, 0.2);\
  border-radius: 1px;\
  border: 1px solid #6b6b6b;\
}\
.bandcampaudioslider-albumpage::-moz-range-thumb {\
  border: 1px solid #6b6b6b;\
  height: 10px;\
  width: 16px;\
  border-radius: 1px;\
  background: #ffffff;\
  cursor: pointer;\
}");


function GM_main () {
    var ALBUM_PAGE = 0;
    var COLLECTION_PAGE = 1;

    window.addEventListener("load", function () {
        var audio_tags = document.getElementsByTagName("audio");
        if (audio_tags.length === 0) return;
        var audio_tag = audio_tags[0];

        // Get player - first try album page one, then collection page one
        var player_tags = document.getElementsByClassName("inline_player");
        var player_tag, player_type;
        if (player_tags.length === 0) {
            // TODO: Figure out a better place to put it on the collection page
            player_tag = document.getElementById("track_play_waypoint");
            player_type = COLLECTION_PAGE;
            if (player_tag === null) return;
        } else {
            player_tag = player_tags[0];
            player_type = ALBUM_PAGE;
        }

        // Add volume slider
        var slider = document.createElement("input");
        slider.setAttribute("id", "bandcampaudioslider-control");
        slider.setAttribute("type", "range");
        slider.setAttribute("min", "0");
        slider.setAttribute("max", "1");
        slider.setAttribute("step", "0.01");
        player_tag.appendChild(slider);

        // Update slider to default volume
        slider.value = audio_tag.volume;

        // Add event handlers
        var handleSliderEvent = function(event) {
            audio_tag.volume = event.target.value;
        };

        slider.addEventListener("change", handleSliderEvent);
        slider.addEventListener("input", handleSliderEvent);

        if (player_type == ALBUM_PAGE) {
            slider.className += " bandcampaudioslider-albumpage";
            slider.style.backgroundColor = document.defaultView.getComputedStyle(document.getElementById("pgBd"), null).getPropertyValue("background-color");
        } else if (player_type == COLLECTION_PAGE) {
            slider.className += " bandcampaudioslider-collectionpage";
        }
    });
}

addJS_Node (null, null, GM_main);

//-- This is a standard-ish utility function:
function addJS_Node (text, s_URL, funcToRun, runOnLoad) {
    var D                                   = document;
    var scriptNode                          = D.createElement ('script');
    if (runOnLoad) {
        scriptNode.addEventListener ("load", runOnLoad, false);
    }
    scriptNode.type                         = "text/javascript";
    if (text)       scriptNode.textContent  = text;
    if (s_URL)      scriptNode.src          = s_URL;
    if (funcToRun)  scriptNode.textContent  = '(' + funcToRun.toString() + ')()';

    var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (scriptNode);
}