<style type="text/css">
#play{display:none;}
[for="play"]{position:relative;display:block;font-weight:bold;width:40px;height:1px;padding:10px;border-radius:50px;line-height:1px;color:#31b3ff;text-shadow:1px 1px 0px rgba(255,255,255,.15);background:rgb(91,91,91);box-shadow:0 1px 0 rgba(255,255,255,.2),inset 0 0 0 3px rgb(71,71,71),inset 0 6px 6px rgba(0,0,0,.5),inset 0-6px 1px rgba(255,255,255,.2);cursor:pointer;}
[for="play"]:before{content:'I I';font-weight:bold;position:absolute;right:10px;color:#000;}
[for="play"]:after{content:url("https://forumstatic.ru/files/0012/72/15/78984.png");position:absolute;left:1px;display:block;width:18px;height:18px;transition:.5s;top:-2px;}#play:checked~[for="play"]:after{left:35px;}
input[type='range']{-webkit-appearance:none;border-radius:4px;box-shadow:inset 0 0 4px#333;background-color:#999;height:4px;vertical-align:top;width:70px;}
input[type='range']::-moz-range-track{-moz-appearance:none;border-radius:4px;box-shadow:inset 0 0 1px#333;background-color:#999;height:4px;}
input[type='range']::-webkit-slider-thumb{-webkit-appearance:none!important;border-radius:12px;background-color:#FFF;box-shadow:inset 0 0 10px rgba(000,000,000,0.5);border:1px solid#999;height:12px;width:12px;}
input[type='range']::-webkit-slider-thumb{-webkit-appearance:none!important;border-radius:12px;background-color:#FFF;box-shadow:inset 0 0 10px rgba(000,000,000,0.5);border:1px solid#999;height:12px;width:12px;}
.volume{background:url("https://forumstatic.ru/files/0012/72/15/67036.png")no-repeat scroll 0-75px rgba(0,0,0,0);content:"";display:inline-block;height:25px;margin-top:0;position:relative;right:-5px;vertical-align:middle;width:25px;}
</style>
 
<script type="text/javascript" src="http://jquery.page2page.ru/ui/jquery.cookie.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var checkbox = $('#radio').find(':checkbox'), checkName='checkbox-state';
checkbox.each(function () {
 $(this).attr('checked', $.cookie(checkName));
});
$(function() {
    $('#rangeval, #volume').val($.cookie('volume_value'));
});
 
var audio = new Audio('http://81.25.32.234:8050/wgfm');
 
$('#volume').bind('change keyup input', function(){
  audio.volume = parseFloat(this.value / 10);
   if(this.value <= 2) { 
	$('.volume').css('background-position', '0 0');
	} 
	else if (this.value <= 4) {
$('.volume').css('background-position', '0 -25px');
	} 
	else if (this.value <= 6) {
$('.volume').css('background-position', '0 -50px');
	} 
	else {
$('.volume').css('background-position', '0 -75px');
	};
	 $.cookie('volume_value', this.value);
	return false;
  })
 
 
$('#play').bind('change', function() {
if($(this).is(':checked')) {
audio.play();
$.cookie(checkName, $(this).is(':checked'));
 } else {
	audio.pause();
	$.cookie(checkName, null);
	$('#rangeval, #volume').val(5);
	audio.volume = parseFloat($('#volume').val() / 10);
	$.cookie('volume_value', null);
	}
  })
 
audio.addEventListener("timeupdate", function() {
   var s = parseInt(audio.currentTime % 60);
   var m = parseInt((audio.currentTime / 60) % 60);
   $('#duration').html(m + '.' + s + ' сек');
   return false;
})
if($('#play').is(':checked')) {
        audio.play();
     } 
audio.volume = parseFloat($('#volume').val() / 10);
});
</script>
<div id="radio" style="position:fixed;left:22px;bottom:70px;z-index:20000;overflow-x:visible;width:171px;opacity: 0.9;">
    <input id="play" type="checkbox"><label for="play" title="play/stop">►</label>
    <span id="duration" style="font-size: 0.8em;">0.0 сек</span>
    <span class="volume" style="padding-right: 5px;"></span><output id="rangeval" for="volume">5</output></br>
    <input id="volume" min="0" max="10" value="5" type="range" step="1" oninput="rangeval.value=value">
</div>

var audio = new Audio('http://81.25.32.234:8050/wgfm');