bandcampvolumeslider.user.js

/*jshint -W043 */
// ==UserScript==
// @name            Bandcamp Audio Slider
// @description     Add a volume slider to Bandcamp's audio player.
// @version         1.0.3
// @updateURL       https://gist.github.com/UnrealIncident/8828e1bc860ab8b7a65e6406a7a740e1/raw
// @include         https://*.bandcamp.com/*
// @include         https://bandcamp.com/*
// @run-at          document-end
// @grant           GM_addStyle
// @grant           GM_getValue
// @grant           GM_setValue
// @icon            https://s4.bcbits.com/img/bc_favicon.ico
// ==/UserScript==

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

GM_addStyle("input[type=range]#bandcampaudioslider-control {\
  -webkit-appearance: none;\
  width: 55px;\
  margin: 1px 0;\
}\
input[type=range]#bandcampaudioslider-control:focus {\
  outline: none;\
}\
input[type=range]#bandcampaudioslider-control::-webkit-slider-runnable-track {\
  width: 100%;\
  height: 8px;\
  cursor: pointer;\
  background: rgba(254, 254, 254, 0.2);\
  border-radius: 1px;\
  border: 1px solid #6b6b6b;\
}\
input[type=range]#bandcampaudioslider-control::-webkit-slider-thumb {\
  border: 1px solid #6b6b6b;\
  height: 10px;\
  width: 16px;\
  border-radius: 1px;\
  background: #ffffff;\
  cursor: pointer;\
  -webkit-appearance: none;\
  margin-top: -2px;\
}\
input[type=range]#bandcampaudioslider-control:focus::-webkit-slider-runnable-track {\
  background: rgba(255, 255, 255, 0.2);\
}\
input[type=range]#bandcampaudioslider-control::-moz-range-track {\
  width: 100%;\
  height: 8px;\
  cursor: pointer;\
  background: rgba(254, 254, 254, 0.2);\
  border-radius: 1px;\
  border: 1px solid #6b6b6b;\
}\
input[type=range]#bandcampaudioslider-control::-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;

    function setup_volume () {
        var audio_tags = document.getElementsByTagName("audio");
        var audio_tag = null;
        if (audio_tags.length === 0) return;
        for(var i = 0; i < audio_tags.length; i++) {
            if(audio_tags[i].src !== "") {
                audio_tag = audio_tags[i];
                break;
            }
        }

        if(audio_tag === null) {
            setTimeout(setup_volume, 1000);
            return;
        }

        // 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;
            background_colour = document.defaultView.getComputedStyle(player_tag, null).getPropertyValue("background-color");
            if (player_tag === null) return;
        } else {
            player_tag = player_tags[0];
            player_type = ALBUM_PAGE;
            background_colour = document.defaultView.getComputedStyle(document.getElementById("pgBd"), null).getPropertyValue("background-color");
        }

        // 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");
        slider.style.backgroundColor = background_colour;
        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);
    }

    window.addEventListener("load", setup_volume);
}

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);
}