Last active
October 14, 2019 16:16
-
-
Save rakiru/b358f54915ef135a66ca30c915dd925c to your computer and use it in GitHub Desktop.
Bandcamp Audio Slider Userscript
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// ==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 | |
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); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is exactly what I was looking for. Thanks!