<style type="text/css">
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;}*/
#radio:hover{opacity: 1;}
#zvyk,#tracks,#stop {position:relative;}
#tracks{display:none;text-align: left;}
#tracks li{cursor: pointer;}
#tracks li.active {background: #bddeee;}
#zvyk{margin-top: 4px;}
#pred, #sled {border: 0 none;cursor: pointer;height: 10px;position:relative;width: 21px;vertical-align: middle;
}
#stop {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -22px;
border: 0 none;cursor: pointer;display: inline-block;height: 31px;left: 13px;margin: 3px;width: 31px;
}
#pred {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 0;margin-right: -5px;}
#sled {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -11px;margin-left: 14px;}
#trk-list {background: transparent url("https://forumstatic.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -85px;
border: 0 none;cursor: pointer;position:relative;height: 22px;width: 33px;
}
.eq {border: 0 none;display: inline-block;height: 35px;line-height: 25px;overflow: visible;padding: 5px;position: absolute;right: -2px;top: 10px;width: 35px;
-moz-transform: scaleY(-1);  -o-transform: scaleY(-1); -webkit-transform: scaleY(-1); transform: scaleY(-1);
}
.b1, .b2, .b3 {
background: rgba(0, 0, 0, 0) linear-gradient(0deg, rgb(196, 255, 5) 10%, rgb(255, 188, 188) 90%) repeat scroll 0 0;
background: -webkit-linear-gradient(270deg, rgb(196, 255, 5) 10%, rgb(255, 188, 188) 90%);
background: -o-linear-gradient(270deg, rgb(196, 255, 5) 10%, rgb(255, 188, 188) 90%);
background: -ms-linear-gradient(270deg, rgb(196, 255, 5) 10%, rgb(255, 188, 188) 90%);border-radius: 0 0 8px 8px;display: inline-block;
-webkit-filter: drop-shadow(0px 2px 3px lime); filter: drop-shadow(0px 2px 3px lime);
height: 0;margin: 1px; width: 25%;
}
.b1{ left: 0;}.b2{ left: 32%;}.b3{left: 64%;}
</style>
 
<script type="text/javascript">
$(document).ready(function(){var radio=new Audio(),i=0;
var radiolist=[
{n:'Relax FM', u:'http://ic3.101.ru:8000/v13_1?userid=0&setst=c90sm1ju2r53vof0v6q7cf8g75', c:'http://www.liveradio.ie/files/images/106790/resized/180x172c/rilax.jpg'},
{n:'Диcкач (Germany)', u:'http://mp3.stream.tb-group.fm/trb.mp3?/;.mp3', c:'http://www.webdesign-flash.ro/p/rap/content/thumbnails/small21.jpg'},
{n:'Романтика',u:'http://ic4.101.ru:8000/v4_1',c:'http://www.beesona.ru/images/radio/romantika.png'},
{n:'Rock Hits', u:'http://ic7.101.ru:8000/c7_21?userid=0&setst=61iol8dm3ka8qu3plaa9a8enj3&tok=23942246qrfrVY2A%2Br2rdFB8wLo38A%3D%3D1', c:'http://101.ru/design/images/main-design/track-cover.png'},
{n:'JazzFM',u:'http://jfm1.hostingradio.ru:14536/sjstream.mp3',c:'http://fromil.com/images/190x100/JA/jazzfm91coolyule.png'}
];
var x='<ul>';for(i=0;i<radiolist.length;i++){var nz=radiolist[i].n;var url=radiolist[i].u;var cv=radiolist[i].c;x+='<li data-audio-url="'+url+'" data-cover-src="'+cv+'">'+(i+1)+'. '+nz+'</li>';}
x+='</ul>';$('#tracks').append(x);if(!localStorage['vl']){localStorage['vl']=0.5;}
radio.volume=localStorage['vl'];$('#zvyk').attr('value',localStorage['vl']*10);$('#zvyk').on('change keyup input',function(){localStorage['vl']=parseFloat(this.value/10)
radio.volume=localStorage['vl'];});function active(){$('#tracks li').each(function(i){var a=$(this).data('audio-url');var b=radio.src;if(a.indexOf(b)!=-1){$(this).addClass('active').siblings('li').removeClass('active');!localStorage['cN']?localStorage['at']=radiolist[0].u:localStorage['at']=radiolist[i].u}});}
radio.src=localStorage['at'];if(!localStorage['cN']){localStorage['cN']='stop';};function radioActive(){localStorage['cN']!='stop'?radio.play():radio.pause()};radioActive();function cover(){var c=$('#radio li.active').data('cover-src');if(c==='undefined'||c==''){$('#layer').css({'background':'url(https://forumstatic.ru/files/0012/72/15/53582.png)','background-size':'cover','-webkit-filter':'blur(1px)','filter':'blur(1px)'});}else{$('#layer').css({'background':'url('+c+')','background-size':'cover','-webkit-filter':'blur(1px)','filter':'blur(1px)'});}}
cover();$('#stop').on('click',function(){if(radio.paused){radio.play();localStorage['cN']='play';active();cover();$(this).css({'background-position':'0 -53px'});}else{radio.pause();localStorage['cN']='stop';$(this).css({'background-position':'0 -22px'});$('#zvyk').attr('value',localStorage['vl']*10);$('.b1, .b2, .b3').css('height','0');}});$('#sled').on('click',function(){i=$('#tracks').find('li.active').index();i=++i<radiolist.length?i:0;radio.src=radiolist[i].u;radioActive();active();cover();});$('#pred').on('click',function(){i=$('#tracks').find('li.active').index();i=--i>-1?i:radiolist.length-1;radio.src=radiolist[i].u;radioActive();active();cover();});$('#tracks li').on('click',function(){radio.src=$(this).data('audio-url');radioActive();active();$('#stop').trigger('click');});$('#trk-list').live('click',function(){$('#tracks').toggle('slow');});initMp3Player();function initMp3Player(){context=new(window.AudioContext||window.webkitAudioContext)();analyser=context.createAnalyser();radio.crossOrigin="Anonymous";source=context.createMediaElementSource(radio);source.connect(analyser);analyser.connect(context.destination);}
frameLooper();function frameLooper(){window.requestAnimationFrame(frameLooper);if(!radio.paused){fbc_array=new Uint8Array(analyser.frequencyBinCount);analyser.getByteFrequencyData(fbc_array);$('.b1').css('height',fbc_array[1]*100/150+'%');$('.b2').css('height',fbc_array[50]*100/135+'%');$('.b3').css('height',fbc_array[100]*100/125+'%');}}});
</script>
 
<div id="radio" style="position:fixed;left:22px;bottom:70px;z-index:20000;overflow-x:visible;width:171px;opacity: 0.9;text-align: center;"><div id="layer" style="position:absolute;height:100px;top:-2px;opacity: 0.6;width:170px;"></div><button id="pred" title="Предыдущая станция"> </button><button id="stop" title="Вкл/Выкл"></button><button id="sled" title="Следующая станция"></button><br>
<input id="zvyk" min="0" max="10" value="" type="range" step="1" title="Громкость"><br>
<button id="trk-list" title="Показать список станций"></button>
<div class="eq"><div class="b1">&nbsp;</div><div class="b2">&nbsp;</div><div class="b3">&nbsp;</div></div><div id="tracks"></div></div>