Виджеты для установки радио и информеров на сайтах

Чтобы установить воспроизведение радио tsunami на сайте выберите HTML5 плеер и установите нужный код.

Плееры: Adaptive | Default | Lite | Energy ( blue, green, red, yellow, magento, gray)

ПОМОЩЬ ПО КОДУ Для установки динамического JS-кода на любой сайт укажите модули которые вам нужны и скопируйте сгенерированный код. Чтобы выводить более 10 последних песен или изменить часовой пояс, измените параметры в админ панели.

- плеер - визуализация - информация - рейтинг DJ - история песен - чат - стол заказов - стол 2.0 - скрипты

<div id="my_player" class="my_player" data-player="energy" data-skin="blue" data-width=200 data-autoplay=1 data-volume=70 data-streamurl="https://myradio24.org/tsunami"></div>

<canvas class="my_visualizer" width=320 height=128 data-size=64 data-revert=0 data-color="rgb"></canvas>

<div data-myinfo="logo" style="width:300px; height:80px; background-size:cover;"></div>
<div data-myinfo="img" style="width:300px; height:300px; background-size:cover;"></div>
<br>
<b data-myinfo="song"></b><br>
<br>
🎧 <b data-myinfo="listeners"></b> <span data-myinfo="isonline"></span> - <span data-myinfo="kbps"></span> kbps
<a href="https://myradio24.org/tsunami.m3u" target="_blank"><img src="https://myradio24.com/img/wmp.gif" /></a>
<a href="https://myradio24.com/ru/player/tsunami" onclick="window.open(this.href,'player','width=300,height=30'); return false;"><img src="https://myradio24.com/img/open.gif" /></a>
<br>
<b data-myinfo="streamname"></b><br>
<div data-myinfo="htmlavatar"></div>
<a href="#" target="_blank" data-myinfo="url"></a><br>
<br><br>

<b>Статистика наших ведущих</b><br><br>
<div data-myinfo="htmlrank"></div>
<br><br>

<b>Последние песни</b><br><br>
<div class="my_lastsongs" data-revert=1 style="display:inline-block; max-width:500px;">
	<div class="my_lastsonghtml" style="display:none;">
		<div style="display: flex; gap:8px; align-items: center; text-align:left; margin:3px;">
			<img class="my_lastsong_cover" style="width:45px; height:45px; border-radius:4px; vertical-align:middle;">
			<span>%songtime%</span>
			<a href="https://www.youtube.com/results?search_query=%songencode%" target="_blank" title="YouTube">%song%</a> 
			<span class='vm_postLikes vm_likes vm_like_318761878_%songid%' data-likeid='318761878_%songid%'></span>
		</div>
	</div>
</div>
<br><br>

<div id="my_chat" data-height=200></div>

<b>Стол заказов</b> (в очереди <b class=my_table_turn>0</b>)<br><br>
<div id=my_table_off>Сейчас заказы не принимаются.</div>
<div id=my_table_auto style="display:none;">
	<form action="https://myradio24.com/ru/table/tsunami" method="post" target="_blank"><button>Заказать музыку на радио</button></form>
</div>
<div id=my_table_on style="display:none;">
<form id=my_table_form action="" method=post accept-charset="UTF-8" style="max-width:400px;">	
	<div style='display:flex; gap:10px;'>
		<div>От кого*:<br><input type=text id=my_table_from maxlength=30 required value=''></div>
		<div>Для кого:<br><input type=text id=my_table_for maxlength=30 value=''></div>
	</div>
	<div style='display:flex; gap:10px;'>
		<div>Артист*<br><input type=text id=my_table_artist maxlength=50 required value=''></div>
		<div>Название трека*<br><input type=text id=my_table_song maxlength=50 required value=''></div>
	</div>
	<textarea id=my_table_comment rows=2 maxlength=500 style="width:100%;" class='vm_imTextarea vm_uploadTextarea'></textarea><br>
	* - поля обязательные для заполнения<br>
	<button style="width:100%;">Заказать музыку на радио</button>
</form>
</div><br>

<h2>Стол заказов</h2>

<div id=my_table_off style='display:none; text-align:center;'>Сейчас заказы не принимаются, попробуйте позже.</div>

<form id=my_table_form action='' method=post accept-charset="UTF-8" style="display:none;">
	<input type=hidden name=act value='table_order'>
	<input type=hidden id=my_table_fileid name=fileid>
	<div style='display:flex; gap:10px;'>
		<div>От кого*:<br><input type=text id=my_table_from maxlength=30 required value=''></div>
		<div>Для кого:<br><input type=text id=my_table_for maxlength=30 value=''></div>
	</div>
	<div style='display:flex; gap:10px;'>
		<div>Артист*<br><input type=text id=my_table_artist maxlength=50 required value=''></div>
		<div>Название трека*<br><input type=text id=my_table_song maxlength=50 required value=''></div>
	</div>
	<textarea id=my_table_comment rows=2 maxlength=500 style='width:100%;' class='vm_imTextarea vm_uploadTextarea'></textarea><br>
	* - поля обязательные для заполнения<br>
	<button style='width:100%;'>Заказать музыку на радио</button>
</form>
<br>

<b>Ваши заказы</b><br><br>

Ваш заказ в очереди <b class=my_table_waiting></b>. Всего в очереди <b class=my_table_turn>0</b>.<br><br>

<div id='my_table_order_html' style='display:none;'>
	<div class='my_table_order' style='display: flex; align-items: center; gap: 12px; padding:8px 0;'>
			<div class='my_table_order_statushtml'></div>
			<div style='flex:1;'>
				<b class='my_table_order_song'></b><br>
				От: <span class='my_table_order_from'></span> &nbsp; 
				Для: <span class='my_table_order_for'></span><br>
				<div class='my_table_order_comment'></div>
			</div>
	</div>
</div>

<form id=my_table_search_form action='' method=post onsubmit='return $.table_search(this.search.value);' style='display:none;'>
	<input id=my_table_search_input type=text name=search size=30 placeholder='Artist - Title' value=''> 
	<button>Поиск</button>
</form><br>
<div id=my_table_abc></div>
<br>

<div id=my_table_random style='display:none;'><b>Случайные результаты</b> - для заказа нажмите на трек</div>
<div id=my_table_search style='display:none;'><b>Результаты поиска</b> - для заказа нажмите на трек</div>
<br>

<div id='my_table_song_html' style='display:none;'>
	<div class='my_table_song' style='display: flex; align-items: center; gap: 12px; padding:5px 5px; cursor:pointer;'>
		<img class='my_table_song_cover' width=45 height=45 style='border-radius:4px;' onmouseover='$.table_cover(this,1);' onmouseout='$.table_cover(this,0);'>
		<div class='my_table_song_length'></div>
		<div style='flex:1;'>
			<b class='my_table_song_artist'></b>
			<div class='my_table_song_title'></div>
		</div>
	</div>
</div>

<script>
var my_init_updateinfo=function(info) {
	//функция расширения полей трека на артиста и название
	function expand_song(song) {
		var pos=song.song.indexOf(' - ')
		var offset=0; if(pos>0) offset=pos+3;
		song.artist=song.song.substr(0,pos);
		song.songtitle=song.song.substr(offset);
	}
	//ОТОБРАЗИМ стол заказов, если включен (иначе скроем)
	if($("#my_table_on").length) {
		if(info.enabletable==3) {info.enabletable=2; if(info.live) info.enabletable=1;}
		$("#my_table_turn, .my_table_turn").html(info.turntable);
		$("#my_table_off").css('display', (info.enabletable==0?"block":"none") );	
		$("#my_table_on").css('display', (info.enabletable==1?"block":"none") );	
		$("#my_table_auto").css('display', (info.enabletable==2?"block":"none") );
	}
	//ОБНОВИМ информационные блоки
	info.listeners=info.listeners?info.listeners:"";
	info.isonline="<font color=red>оффлайн</font>"; 
	if(info.online==1) info.isonline="<font color=green>онлайн</font>"; 
	//получим новый трек в зависимости от формата array/object и расширим его артистом и названием
	var tmp=info.nextsongs[0]; if(typeof tmp === 'string') info.nextsongs[0]={song:tmp};
	expand_song(info.nextsongs[0]); //расширение
	var next=info.nextsongs[0];
	//назначение
	info.nextsong=next.song;
	info.htmllisteners=info.listeners?"&#127911; "+info.listeners:"";
	info.htmlimg="<img src='https://myradio24.com/"+info.img+"' width=300 border=0>";
	info.htmllogo=""; if(info.logo) info.htmllogo="<img src='https://myradio24.com/"+info.logo+"'>";
	info.htmlavatar=""; if(window.my_avatars && Array.isArray(my_avatars)) { if(my_avatars[info.djname]) info.htmlavatar=my_avatars[info.djname]; else if(my_avatars['']) info.htmlavatar=my_avatars['']; }
	//рейтинг ведущих
	var ranks=info.rank; var htmlranks="";
	if(ranks && ranks.length>0) {
		ranks.sort(function(a,b) {return b[1]-a[1];}); 
		for(var i=0;i<ranks.length;i++) {
			//данные ведущего в зависимости от формата array/object
			var rank=ranks[i]; if(Array.isArray(rank)) rank={djname:rank[0], rating:rank[1], hours:rank[2], count:rank[3], avatar:rank[4]};
			htmlranks+="<div style='display:inline-block; margin:5px;'><div style='float:left; width:100px; height:100px;  border:1px solid #ccc; border-radius:50px; background:url(https://myradio24.com/"+rank.avatar+"); background-size:cover;'></div>";
			htmlranks+="<div style='float:left; padding:15px 0 0 10px; text-align:left; width:110px;'><b>"+rank.djname+"</b><br>"+rank.count+" вещаний<br>"+rank.hours+" часов<br>"+rank.rating+" рейтинг</div></div>";
		}    
	}
	else htmlrank="Ничего не найдено.";
	info.htmlrank=htmlrank;
	//последние песни
	var songs=info.songs; var htmlsongs=""; 
	//console.dir(songs);
	if(songs && songs.length>0) {
		for(var i=0;i<songs.length;i++) {
			//данные трека в зависимости от формата array/object и расширим полями artist и songtitle
			if(Array.isArray(songs[i])) songs[i]={time:songs[i][0], song:songs[i][1], img:songs[i][2], songid:songs[i][3]};
			expand_song(songs[i]); //расширение
			var song=songs[i]; 				
			htmlsongs="<tr><td><div style='text-align:left; padding:4px;'>"+song.time.substr(0,5)+" - <a href='https://www.youtube.com/results?search_query="+encodeURIComponent(song.song)+"' target=_blank title='YouTube'>"+song.song+"</a> </td></tr>"+htmlsongs;
		} 
	htmlsongs="<table class='my_radio_width'>"+htmlsongs+"</table>";
	}
	else htmlsongs="Ничего не найдено.";
	info.htmlsongs=htmlsongs;
	//вставка переменных в data-myinfo
	$('[data-myinfo]').each(function() {
		var key=$(this).data('myinfo');
		if(key && info[key]) {
			if(key=='img') $(this).css('background-image','url('+info[key]+')');
			else $(this).html(info[key]); 
		}
	});
	//произведем замену переменных и выведем содержимое информера
	var objs=document.querySelectorAll(".my_info"); if(!objs.length) return; 
	if(!window.my_infohtml) my_infohtml={}; 
	for(var k=0;k<objs.length; k++) {
		if(!my_infohtml[k]) {my_infohtml[k]=objs[k].innerHTML; objs[k].style.visibility="visible";}
		var html=my_infohtml[k];
		for(var i in info) {html=html.replace(new RegExp("%"+i+"%","g"),info[i]);}
		objs[k].innerHTML=html;
	}
}
</script>

<script src="https://myradio24.com/player/player.js?v3.30" data-radio="tsunami" data-interval=15 data-vmid=141461 data-lang="ru"></script>

<b>Статистика наших ведущих</b><br><br>
<div data-myinfo="htmlrank"></div>
<br><br>

<div id="my_chat" data-height=200></div>

<h2>Стол заказов</h2>

<div id=my_table_off style='display:none; text-align:center;'>Сейчас заказы не принимаются, попробуйте позже.</div>

<b>Ваши заказы</b><br><br>

Ваш заказ в очереди <b class=my_table_waiting></b>. Всего в очереди <b class=my_table_turn>0</b>.<br><br>

Для установки PHP-кода с кешированием и получением актуальной информации о радиоканале. Описание параметров такие же как в версии JS. По умолчанию кодировка UTF-8, для windows-1251 измените так: $win1251=1;

<?php

//получаем данные информера и сохраняем в кеш
//10 секундный кеш не будет нагружать наш сервер
$win1251=0; //1 - чтобы использовать кодировку 1251
$revert=1; //0 или 1 - сортировка последних песен
$cachefile="cachetsunami.json";
if(!ini_get("allow_url_fopen")) echo "<font color=red>Please enable allow_url_fopen!</font><br>";
if(@filemtime($cachefile)<time()-10) { 
	$informer=@file_get_contents("http://myradio24.com/users/tsunami/status.json");
	file_put_contents($cachefile,$informer);
}

//читаем данные информера из кеш файла (если надо, меняем кодировку)
$informer=(array)json_decode(file_get_contents($cachefile),1);
if($win1251) array_walk_recursive($informer,function(&$v) {$v=@iconv("utf-8","windows-1251//TRANSLIT",$v);});

//переменная по умолчанию
$_GET['get']=$_GET['get'] ?? '';

//вывод структуры полей (в ссылке добавить ?get=print)
if($_GET['get']=="print") echo "<pre>".print_r($informer,true)."</pre>";

//вывод информации в формате JSON (в ссылке добавить ?get=json)
if($_GET['get']=="json") echo json_encode($informer);

//вывод информации в формате JSONP (в ссылке добавить ?get=jsonp)
if($_GET['get']=="jsonp") echo "var informer=".json_encode($informer).";";

//вывод информации в HTML (параметр get не указан)
if(!$_GET['get'])  {

//вывод различной информации
$nextsong=$informer['nextsongs'][0];
echo "<b>Общая информация</b><br><br>
<table>
<tr><td>Станция:</td><td>{$informer['title']}</td></tr>
<tr><td>Песня:</td><td>{$informer['song']}</td></tr>
<tr><td>Следующая:</td><td>{$nextsong['song']}</td></tr>
<tr><td>Вещает DJ:</td><td>{$informer['djname']}</td></tr>
<tr><td>Качество:</td><td>{$informer['kbps']} kbps</td></tr>
<tr><td>Слушателей:</td><td><b>{$informer['listeners']}</b></td></tr>
<tr><td>Пик слушателей:</td><td>{$informer['plisteners']}</td></tr>
<tr><td>Исполнитель:</td><td>{$informer['artist']}</td></tr>
<tr><td colspan=2><img src=http://myradio24.com/{$informer['img']} width=300 border=0></td></tr>
</table><br>
<b>Статистика DJ's</b><br><br>";
if(!count($informer['rank'])) echo "Ничего не найдено.<br><br>";
else { 
	echo "<table><tr><td>Ведущий</td><td>Рейтинг</td><td>Вещаний</td><td>Онлайн</td></tr>";
	for($i=0; $i<count($informer['rank']); $i++) {
		$rank=$informer['rank'][$i]; if(isset($rank[0])) $rank=array('djname'=>$rank[0], 'rating'=>$rank[1], 'hours'=>$rank[2], 'count'=>$rank[3], 'avatar'=>$rank[4]);
		echo "<tr><td>DJ {$rank['djname']}</td><td align=center>{$rank['rating']}</td><td align=center>{$rank['count']}</td><td align=right>{$rank['hours']} часов</td></tr>";
	}
	echo "</table><br>";
}
$lastsongs="";
for($i=0; $i<count($informer['songs']); $i++) {
	$song=$informer['songs'][$i]; if(isset($song[0])) $song=array('time'=>$song[0], 'song'=>$song[1], 'img'=>$song[2]);	
	$str="<tr><td>{$song['time']}</td><td>{$song['song']}</td></tr>"; 
	if($revert) $lastsongs=$str.$lastsongs; else $lastsongs.=$str; 
}
echo "<b>Последние песни</b><br><br>
<table>$lastsongs</table>";

}