Единый форум поддержки

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Единый форум поддержки » Новые возможности форумов » Радио на форум (HTML5)


Радио на форум (HTML5)

Сообщений 21 страница 27 из 27

21

Gifts написал(а):

сможете WG FM  подключить к радио плееру , хочу на свой форум радио поставить а WG FM  не могу подключить (((?

Gifts
держите:

Код:
<style type="text/css">
input[type=range]#zvyk {-webkit-appearance: none;margin: 4px 0;}
input[type=range]#zvyk:focus {outline: none;}
input[type=range]#zvyk::-webkit-slider-runnable-track {height: 4px;cursor: pointer;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;background: rgba(47, 122, 205, 0.57);border-radius: 0.4px;border: 1px solid #006323;}
input[type=range]#zvyk::-webkit-slider-thumb {box-shadow: 2px 2px 9.7px rgba(232, 0, 237, 0.57), 0px 0px 2px rgba(250, 8, 255, 0.57);border: 2px solid #5c99c8;height: 12px;width: 12px;border-radius: 28px;background: #748a9d;cursor: pointer;-webkit-appearance: none;margin-top: -5px;}
input[type=range]#zvyk:focus::-webkit-slider-runnable-track {background: rgba(178, 206, 237, 0.57);}
input[type=range]#zvyk::-moz-range-track {height: 4px;cursor: pointer;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;background: rgba(47, 122, 205, 0.57);border-radius: 0.4px;border: 1px solid #006323;}
input[type=range]#zvyk::-moz-range-thumb {box-shadow: 2px 2px 9.7px rgba(232, 0, 237, 0.57), 0px 0px 2px rgba(250, 8, 255, 0.57);border: 2px solid #5c99c8;height: 12px;width: 12px;border-radius: 28px;background: #748a9d;cursor: pointer;}
input[type=range]#zvyk::-ms-track {height: 4px;cursor: pointer;background: transparent;border-color: transparent;color: transparent;}
input[type=range]#zvyk::-ms-fill-lower {background: rgba(17, 43, 72, 0.57);border: 1px solid #006323;border-radius: 0.8px;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;}
input[type=range]#zvyk::-ms-fill-upper {background: rgba(47, 122, 205, 0.57);border: 1px solid #006323;border-radius: 0.8px;box-shadow: 0.2px 0.2px 0.9px #0e0078, 0px 0px 0.2px #110092;}
input[type=range]#zvyk::-ms-thumb {box-shadow: 2px 2px 9.7px rgba(232, 0, 237, 0.57), 0px 0px 2px rgba(250, 8, 255, 0.57);border: 2px solid #5c99c8;height: 12px;width: 12px;border-radius: 28px;background: #748a9d;cursor: pointer;height: 4px;}
input[type=range]#zvyk:focus::-ms-fill-lower {background: rgba(47, 122, 205, 0.57);}
input[type=range]#zvyk:focus::-ms-fill-upper {background: rgba(178, 206, 237, 0.57);}
#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("http://forumfiles.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("http://forumfiles.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 0;margin-right: -5px;}
#sled {background: transparent url("http://forumfiles.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -11px;margin-left: 14px;}
#trk-list {background: transparent url("http://forumfiles.ru/files/0017/d8/50/88284.png") no-repeat scroll 0 -85px;
border: 0 none;cursor: pointer;position:relative;height: 22px;width: 33px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
var radio=new Audio(),i=0,radiolist=[
{n:'WGFM-Главный канал',u:'http://wargaming.fm/1?source=player',c:'http://samara11x11.ucoz.ru/TRANS-radio/WarGaming_FM.png'},
{n:'WGFM-второй канал',u:'http://wargaming.fm/2?source=player',c:'https://ru-wotp.wgcdn.co/dcont/fb/image/wgfm-logo.png'},
{n:'WGFM-Trance',u:'http://wargaming.fm/3?source=player',c:'http://samara11x11.ucoz.ru/TRANS-radio/WarGaming_FM.png'},
{n:'WGFM-Rock',u:'http://wargaming.fm/4?source=player',c:'https://ru-wotp.wgcdn.co/dcont/fb/image/wgfm-logo.png'}
];
var x='<ul>';for(i=0;i<radiolist.length;i++){var nz=radiolist[i].n,url=radiolist[i].u,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'),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(http://forumfiles.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');});});
</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 id="tracks"></div>
</div>

+1

22

Romych, спасибо http://s58.radikal.ru/i159/0911/0b/3185bbaf9bd6.gif, в правый верхний угол встало отлично, но вот как бы ещё сделать, чтобы кнопка НЕ двигалась вместе с прокруткой страницы, так там и оставалась?  :flirt:

0

23

Няма написал(а):

НЕ двигалась вместе с прокруткой страницы

тогда так:

<div id="radio" style="position:absolute;right:22px;top: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>

+1

24

Romych, третье спасибо от меня http://s58.radikal.ru/i159/0911/0b/3185bbaf9bd6.gif

Отредактировано Няма (Вт, 10 Окт 2017 23:48:55)

+1

25

Romych написал(а):

Gifts
держите:

ООО  Спасибо!!!  :cool:
Поможете перетащить в правый верхний угол,  :crazy:
http://sd.uploads.ru/c52wK.png

Отредактировано Gifts (Чт, 12 Окт 2017 10:55:11)

0

26

Gifts
тоже самое просила Няма, так что нижняя часть кода должна подойти и вам

<div id="radio" style="position:fixed; right: 22px; top: 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 id="tracks"></div>
</div>

0

27

Romych
Все супер спс :cool:

Отредактировано Gifts (Пт, 13 Окт 2017 12:42:48)

0


Вы здесь » Единый форум поддержки » Новые возможности форумов » Радио на форум (HTML5)