☰

Bandcamp Volume Script

Adds a volume control bar to Bandcamp

当前为 2023-08-29 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Bandcamp Volume Script
  3. // @version      1.4
  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://greasyfork.org/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 = "http://i.imgur.com/hRWrLHJ.png";
  25. var muteurl = "http://i.imgur.com/5mxvYNN.png";
  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. });