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

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

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


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


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

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

1

тут пользователь с ником eremon дал код радиоплеера с просьбой, мол надо чтоб запоминал состояние вкл/выкл при переходе по страницам форума
я сделал плеер, который запоминает состояние вкл/выкл и уровень громкости
выкладываю сюда, потому что может быть кому-то ещё понадобится, и делаю отдельной темой, поскольку чувствую будут вопросы по этой теме,
а может быть кто-то выложит свои модификации и варианты оформления
итак
Радио плеер на форум с памятью состояния ON/OFF

http://se.uploads.ru/N5vUD.jpg
http://se.uploads.ru/Xfz1C.jpg

Код:
<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("http://forumfiles.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("http://forumfiles.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');

ссылка на радиоканал, можно сюда вставить свой вариант, например http://s5.radioboss.fm:8119/stream ( или даже mp3 файл)

ДЕМО

+4

2

Радио с плейлистом
http://s6.uploads.ru/tC25j.gif
ДЕМО

отличия от предыдущей версии:
1. не требуется загружать дополнительные библиотеки типа - jquery.cookie.js
и вообще работа с куками заменена на localStorage
2. появилась возможность составить плейлист из нескольких радиостанций, с запоминанием выбранной пользователем

в html-верх

Код:
<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("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;
}
.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(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');});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>

+5

3

Ромыч, респект вам за радио. Пока немогу отплюсовать. Но все равно огромное спасибо :cool:

Отредактировано markwud (Вс, 8 Фев 2015 17:03:29)

0

4

Огромное спасибо! Класс! Молодцы! То что нужно.

0

5

Romych
А нельзя сделать так, чтобы музыка не прерывалась при переходе на страницы?

0

6

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

А нельзя сделать так, чтобы музыка не прерывалась при переходе на страницы?

теоретически можно сделать буферизацию, подумаю
а что за музыку вы проигрываете? радио или mp3 файл?

0

7

Romych
То, что на демке, в перспективе mp3. Было бы еще клево заиметь возможность ставить несколько песен в одном плеере.

0

8

Romych
Есть продвижения? :)

0

9

А какого вида должна быть ссылка на мп3?

И можно ли так сделать с Ютьюб, чисто звук не картинку?

Отредактировано kleo3333 (Вт, 12 Апр 2016 12:34:19)

0

10

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

Есть продвижения?

есть, скоро опубликую

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

А какого вида должна быть ссылка на мп3?

например такая - http://hushhradio.ice.infomaniak.ch/hushhradio-32.mp3

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

И можно ли так сделать с Ютьюб, чисто звук не картинку?

если честно никогда не пробовал, но для этого куча онлайн сервисов имеется:
http://www.flv2mp3.org/
http://youtubemp3.ru/
http://youtubeconverter.me/

0

11

я спросила ромыча, как-бы relax fm поместить на плеер, он любезно ответил, делюсь))
вдруг кому-то тоже relax fm надь http://www.kolobok.us/smiles/standart/blush2.gif))
"вот в этой строке скрипта пропишите этот адрес (просто замените строку на эту)

var audio = new Audio('http://ic3.101.ru:8000/v13_1?userid=0&setst=c90sm1ju2r53vof0v6q7cf8g75');

"
работает, ромычhttp://wdesk.ru/_ph/83/2/962508884.gif!

+1

12

Сделал, но у меня прерывается радио при перескакивании с тема на тему. Сделайте пожалйста буферизацию. Я слушаю эту радиу

http://ayland.speccy.pl:8888/ayland

0

13

А такое радио можно как-то ссылку вставить?
http://101.ru/?an=personal&userid=717500

0

14

kleo3333
Ждите Romych, он спец и автор скрипта, наверно вставить как-то возможно

0

15

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

А нельзя сделать так, чтобы музыка не прерывалась при переходе на страницы?

3ASOFT написал(а):

у меня прерывается радио при перескакивании с тема на тему. Сделайте пожалйста буферизацию. Я слушаю эту радиу

что касается потокового аудио, такого как радио, беспрерывного (не имеющего конца), то оно увы, не буферизируется (пытался, но тщетно)
а вот отдельные mp3 файлы (не потоковые), у которых есть начало и конец буферизируются без проблем

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

А такое радио можно как-то ссылку вставить?
http://101.ru/?an=personal&userid=717500

kleo3333
интересует конкретно вот это, какое-то персональное радио? просто на 101.ru множество каналов представленных по стилям и тематике - http://101.ru/?an=port_allchannels
выцепить аудиопоток каждого из них получается без проблем,
вот например Rock Hits поток:

Код:
http://91.223.18.205:8000/c7_21?setst=-1&tok=209819501CmJ19uwXbfmxT94dgsBynzl0r5qI6iDPY%2FfpDTimyQ9MrIwrjAnlg%3D%3D

New Age поток:

Код:
http://91.223.18.205:8000/c7_14?setst=-1&tok=209819501CmJ19uwXbd4gRLVz2G7ZQ1bCYKa0bq2DgxXQM72g02T30yQWDvHQw%3D%3D

Юмор Non-Stop поток:

Код:
http://91.223.18.205:8000/c2_4?setst=-1&tok=209819501CmJ19uwXbdrkoqDea0PXdHIpA5sGo605nTStNcQvwsO16tRBRH2sg%3D%3D

а вот именно персонального - /?an=personal&userid=717500 увы, не получается
и скорее всего потому что это не радио, а обычный плейлист имитирующий радио

+1

16

Обновление радио

+1

17

Спасибо!

0

18

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

0

19

Romych, большое спасибо за радио  :flirt:  http://s58.radikal.ru/i159/0911/0b/3185bbaf9bd6.gif У меня вопрос: нельзя ли прикрепить кнопку плеера к правому (или левому) верхнему углу форума - чтобы она стояла там и не двигалась?  http://savepic.net/2376214m.gif

0

20

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

нельзя ли прикрепить кнопку плеера к правому (или левому) верхнему углу форума - чтобы она стояла там и не двигалась?

можно, менять тогда надо в этом куске кода

<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>


например так:

<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 class="eq"><div class="b1">&nbsp;</div><div class="b2">&nbsp;</div><div class="b3">&nbsp;</div></div><div id="tracks"></div></div>

0


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