☰

Bandcamp Volume Script

Adds a volume control bar to Bandcamp

  1. // ==UserScript==
  2. // @name         Bandcamp Volume Script
  3. // @version      1.5
  4. // @description  Adds a volume control bar to Bandcamp
  5. // @author       @kirby
  6. // @match        *://*.bandcamp.com/*
  7. // @exclude      *://bandcamp.com/
  8. // @grant        GM_addStyle
  9. // @require      http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.js
  10. // @namespace https://greatest.deepsurf.us/users/1142347
  11. // ==/UserScript==
  12.  
  13.  
  14. //Awesome Tags!
  15. $("audio").attr("id", "audioSource");
  16. $("<div class='volumeControl'></div>").insertAfter(".inline_player");
  17. $(".volumeControl").append("<div class='speaker'></div>");
  18. $(".volumeControl").append("<div class='volume'></div>");
  19. $(".volume").append("<span class='volumeInner'></span>");
  20.  
  21.  
  22. //CSS Time!
  23. var percentage = 75;
  24. var speakerurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAALEAAACxABrSO9dQAAABh0RVh0U29mdHdhcmUAcGFpbnQubmV0IDQuMC41ZYUyZQAAAklJREFUWEfN1j1rFFEYxfHEBF8KCfjWSb6BitHaV9zGEMFoZ2FrZ6GFCKKihSCkUQsF0UIEDSRdGiGNgRQifgERQcFCTcRERGX9n8s84e7dZ+7OumP0wA8yZ252n52dmZ2+ZrP5T7llRYdxH3exp+i65pYVHMMvWL5jN7y1WW7ZQQN6wzS34a3PcsuMQ1iGl8fw/sdo8La+rcjQC5S9uZIb4CSUG2jZ17KRcQLeYY9TNsAA3sJyASv744VlziI+4cqSOwL7sARFr6WvMuxLF8aG8BBV4w2wJvpbV47lDTYgDNCP03iEp4UZfEE3SQfYhhcYjro7sJxHGOBK2Ow96QCTUF5hHdRtwiKU9xhU+Sls9p54AJ14z2C5CNt3U0WRhoq6kh6BLfgIRR9yPdSPqCgy8TcHkEuwjEKdzrnPKsicirriDbADluuwfk4F+aCNuuINoJPP8gDWT6kgP7RRV/7LAXbCcg3Wr9pXcBmWo1Cnk3BBBXmuoq6kA+hOaGe7Lke7Ge1VUSRchrao18QD6EY0C0v8CzihosgRFfFh6iXpEXgC5SXWQt1m2G/MOwzY4lPQL59eRKbR7S06HWAr5rE96vQAazmH7M/xRtxD1aQDiE44+3scltcIt+Z4cZkz+IlO8QYweoT/BkUPJPsR9qULy4zBXqAsZQOkj2Th0Jt4YSd6jLLHKi+5I3AcylW07GvZqEDPdl/hJTeArDwHxtqKCg7C+zpuwVuf5ZYV6LYan5gaaBe8tVluWdEB6LrWJ/+jNxe3XD3Nvt+HucbLM16ZvwAAAABJRU5ErkJggg==";
  25. var muteurl = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAIQSURBVFhHxdYvSF5RGMdxBcMbFBeMCwaDwSBiWNPNgQZhloFlwToswoLB4FYWFpamYYKgoAZhmBwsGo2GBYNhYWEwYX8U0XH9/g73XI7X517vdefqDz73eh/P+57nvX/O+7YlSXKvzGJFT7GKjxhOa7WZxQqm8A8+ZxiCNbaUWbzBODRhPkuwxpcyiyXGcAIrW7BeU8osFtAnL5pcabSB57BOe5jGGphDeMMVJXoD3VhD1dy6gXbMYAPbqc/4hTpRAy1oXdD6MIlrE2Ia+v+ijlV4gxjxZ+CLO0qS33iIcHIdq67MwzXw0x3+f3wDfThVgWwibEDHygE64BqIlfAeWFAhzQRU097nEdzYphrQvfAVyiEepHtlGX5cYw3IKHx8M9+hZrJx2sRKvgFZRxg9AVfGaBMrVgN61ML4+yGjTazkG+iHfxp+pPsjdCIbp02s5BvYg6L9AM7dUZK8QzZOm1gJG5hVgWhSTa7aexWIaoPIGjhGjPgGtNr593wLNxF06r9B2Ue2EL1WJUJ8A5/ckXG9oafA5xVcA/IC+ubTm8gO6i7Rel347Bd9Ge1C0XdCyxrgdWEFVRNegp70b4tOfS/cgmQNyHuJC9wU30AtZtHwDP6ZLkqjDYh+Ef9FURpvQEbwB1bupAF5AutyfIA1vpRZrECPWHhjqqFsdavDLFb0GPoBqk9+q8nFLN6dpO0STDmoN2vSm20AAAAASUVORK5CYII=";
  26. var color = $("#pgBd").css("background-color");
  27. var css = ".volumeControl { margin-bottom: 10px; }"                                            +
  28.           ".speaker {"                                                                         +
  29.             "position: relative;"                                                              +
  30.             "width: 50px;"                                                                     +
  31.             "height: 50px;"                                                                    +
  32.             "background: url('"+speakerurl+"') rgba(2,2,2,.1) 50% 50% no-repeat;"              +
  33.             "border-radius: 3px;"                                                              +
  34.             "cursor: pointer;"                                                                 +
  35.           "}"                                                                                  +
  36.           ".volumeInner {"                                                                     +
  37.             "position: absolute;"                                                              +
  38.             "bottom: 0;"                                                                       +
  39.             "width: "+percentage+"%;"                                                          +
  40.             "height: 20px;"                                                                    +
  41.             "background-color: #fff;"                                                          +
  42.           "}"                                                                                  +
  43.           ".volume {"                                                                          +
  44.             "position: relative;"                                                              +
  45.             "width: 80%;"                                                                      +
  46.             "height: 20px;"                                                                    +
  47.             "margin-top: -35px;"                                                               +
  48.             "float: right;"                                                                    +
  49.             "cursor: pointer;"                                                                 +
  50.             "background-color: rgba(2,2,2,.1);"                                                +
  51.             "border: 1px solid rgba(190,190,190,.5);"                                          ;
  52.  
  53. GM_addStyle(css);
  54.  
  55.  
  56. //Sexy Script!
  57. audioSource.volume = percentage/100;
  58.  
  59. function changeVolume(e) {
  60. 	var clickPos = (e.pageX) - $(".volume").offset().left;
  61. 	var maxWidth = $(".volume").width();
  62. 	percentage = Math.floor(clickPos / maxWidth * 100);
  63.     if(percentage > 100) {
  64.         percentage = 100;
  65.         $(".volumeInner").css("width", "100%");
  66.     } else if(percentage < 0) {
  67.         percentage = 0;
  68.         $(".volumeInner").css("width", "0%");
  69.     } else {
  70.         $(".volumeInner").css("width", percentage + "%");
  71.     }
  72.     
  73. 	audioSource.volume = percentage/100;
  74. }
  75.  
  76.  
  77. $(".volume").mousedown(function(e){
  78.     changeVolume(e);
  79.     $("body").css({
  80.         "-webkit-user-select": "none",
  81.         "-moz-user-select": "none"
  82.     });
  83.     
  84. 	$("body").mousemove(function(e){ changeVolume(e); });
  85. });
  86.  
  87. $(document).mouseup(function(){
  88.     $("body").off("mousemove");
  89.     
  90.     $("body").css({
  91.         "-webkit-user-select": "all",
  92.         "-moz-user-select": "all"
  93.     });
  94. });
  95.  
  96. var mute = false;
  97. $(".speaker").click(function(){
  98.     if(mute) {
  99.         mute = false;
  100.         $(".speaker").css("background-image", "url('"+speakerurl+"')");
  101.         $(".volumeInner").css("width", percentage + "%");
  102.         audioSource.volume = percentage/100;
  103.     } else {
  104.         mute = true;
  105.         $(".speaker").css("background-image", "url('"+muteurl+"')");
  106.         audioSource.volume = 0;
  107.         $(".volumeInner").css("width", "0%");
  108.     }
  109. });