Cacher is the code snippet organizer for pro developers

Drag this bookmarklet to your browser bookmark bar:

<b><a href="javascript:$(%22<div%20class='volumeControl'></div>%22).insertAfter(%22.inline_player%22);%20$(%22.volumeControl%22).append(%22<div%20class='speaker'></div>%22);%20$(%22.volumeControl%22).append(%22<div%20class='volume'></div>%22);%20$(%22.volume%22).append(%22<span%20class='volumeInner'></span>%22);%20%20var%20percentage%20=%2075;%20var%20speakerurl%20=%20%22data: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==%22;%20var%20muteurl%20=%20%22data: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=%22;%20var%20color%20=%20$(%22#pgBd%22).css(%22background-color%22);%20var%20css%20=%20%22<style%20type='text/css'>.volumeControl%20{%20margin-bottom:%2010px;%20}%22+%20%22.speaker%20{%22+%20%22position:%20relative;%22+%20%22width:%2050px;%22+%20%22height:%2050px;%22+%20%22background:%20url('%22+speakerurl+%22')%20rgba(2,2,2,.1)%2050%%2050%%20no-repeat;%22+%20%22border-radius:%203px;%22+%20%22cursor:%20pointer;%22+%20%22}%22+%20%22.volumeInner%20{%22+%20%22position:%20absolute;%22+%20%22bottom:%200;%22+%20%22width:%20%22+percentage+%22%;%22+%20%22height:%2020px;%22+%20%22background-color:%20#fff;%22+%20%22}%22+%20%22.volume%20{%22+%20%22position:%20relative;%22+%20%22width:%2080%;%22+%20%22height:%2020px;%22+%20%22margin-top:%20-35px;%22%20+%20%22float:%20right;%22+%20%22cursor:%20pointer;%22+%20%22background-color:%20rgba(2,2,2,.1);%22+%20%22border:%201px%20solid%20rgba(190,190,190,.5);%22+%20%22}</style>%22;%20$('head').append(css);%20var%20audio%20=%20null;%20$(%20document%20).ready(function()%20{%20audio%20=%20$(%22audio%22)[0];%20audio.volume%20=%20percentage/100;%20});%20function%20changeVolume(e)%20{%20var%20clickPos%20=%20(e.pageX)%20-%20$(%22.volume%22).offset().left;%20var%20maxWidth%20=%20$(%22.volume%22).width();%20percentage%20=%20Math.floor(clickPos%20/%20maxWidth%20*%20100);%20if(percentage%20>%20100)%20{%20percentage%20=%20100;%20$(%22.volumeInner%22).css(%22width%22,%20%22100%%22);%20}%20else%20if(percentage%20<%200)%20{%20percentage%20=%200;%20$(%22.volumeInner%22).css(%22width%22,%20%220%%22);%20}%20else%20{%20$(%22.volumeInner%22).css(%22width%22,%20percentage%20+%20%22%%22);%20}%20audio.volume%20=%20percentage/100;%20}%20$(%22.volume%22).mousedown(function(e){%20console.log(%22volume%20bar%20clicked%22);%20changeVolume(e);%20$(%22body%22).css({%20%22-webkit-user-select%22:%20%22none%22,%20%22-moz-user-select%22:%20%22none%22%20});%20$(%22body%22).mousemove(function(e){%20changeVolume(e);%20});%20});%20$(document).mouseup(function(){%20$(%22body%22).off(%22mousemove%22);%20$(%22body%22).css({%20%22-webkit-user-select%22:%20%22all%22,%20%22-moz-user-select%22:%20%22all%22%20});%20});%20var%20mute%20=%20false;%20$(%22.speaker%22).click(function(){%20if(mute)%20{%20mute%20=%20false;%20$(%22.speaker%22).css(%22background-image%22,%20%22url('%22+speakerurl+%22')%22);%20$(%22.volumeInner%22).css(%22width%22,%20percentage%20+%20%22%%22);%20audio.volume%20=%20percentage/100;%20}%20else%20{%20mute%20=%20true;%20$(%22.speaker%22).css(%22background-image%22,%20%22url('%22+muteurl+%22')%22);%20audio.volume%20=%200;%20$(%22.volumeInner%22).css(%22width%22,%20%220%%22);%20}%20});void%200">BC Volume</a></b>
<br><br>
You can see the raw code in this <a href='https://gist.github.com/rickdog/718208ab5055372c307b93989a9d8348'>Gist</a>

$("<div class='volumeControl'></div>").insertAfter(".inline_player");
$(".volumeControl").append("<div class='speaker'></div>");
$(".volumeControl").append("<div class='volume'></div>");
$(".volume").append("<span class='volumeInner'></span>");

var percentage = 75;
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==";
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=";
var color = $("#pgBd").css("background-color");
var css = "<style type='text/css'>.volumeControl { margin-bottom: 10px; }"+
    ".speaker {"+
    "position: relative;"+
    "width: 50px;"+
    "height: 50px;"+
    "background: url('"+speakerurl+"') rgba(2,2,2,.1) 50% 50% no-repeat;"+
    "border-radius: 3px;"+
    "cursor: pointer;"+
    "}"+
    ".volumeInner {"+
    "position: absolute;"+
    "bottom: 0;"+
    "width: "+percentage+"%;"+
    "height: 20px;"+
    "background-color: #fff;"+
    "}"+
    ".volume {"+
    "position: relative;"+
    "width: 80%;"+
    "height: 20px;"+
    "margin-top: -35px;" +
    "float: right;"+
    "cursor: pointer;"+
    "background-color: rgba(2,2,2,.1);"+
    "border: 1px solid rgba(190,190,190,.5);"+
    "}</style>";
$('head').append(css);

var audio = null;
$( document ).ready(function() {
    audio = $("audio")[0];
    audio.volume = percentage/100;
});

function changeVolume(e) {
    var clickPos = (e.pageX) - $(".volume").offset().left;
	var maxWidth = $(".volume").width();
	percentage = Math.floor(clickPos / maxWidth * 100);
    if(percentage > 100) {
        percentage = 100;
        $(".volumeInner").css("width", "100%");
    } else if(percentage < 0) {
        percentage = 0;
        $(".volumeInner").css("width", "0%");
    } else {
        $(".volumeInner").css("width", percentage + "%");
    }
	audio.volume = percentage/100;
}

$(".volume").mousedown(function(e){
    console.log("volume bar clicked");
    changeVolume(e);
    $("body").css({
        "-webkit-user-select": "none",
        "-moz-user-select": "none"
    });
	$("body").mousemove(function(e){ changeVolume(e); });
});

$(document).mouseup(function(){
    $("body").off("mousemove");
    $("body").css({
        "-webkit-user-select": "all",
        "-moz-user-select": "all"
    });
});

var mute = false;
$(".speaker").click(function(){
    if(mute) {
        mute = false;
        $(".speaker").css("background-image", "url('"+speakerurl+"')");
        $(".volumeInner").css("width", percentage + "%");
        audio.volume = percentage/100;
    } else {
        mute = true;
        $(".speaker").css("background-image", "url('"+muteurl+"')");
        audio.volume = 0;
        $(".volumeInner").css("width", "0%");
    }
});