Widgets for installing radio and informers on websites

To install playback of radio kfm on the site, select the HTML5 player and install the required code.

Players: Adaptive | Default | Lite | Energy ( blue , green , red , yellow , magento , gray )

CODE HELP To install dynamic JS code on any site, specify the modules you need and copy the generated code. To display more than 10 recent songs or change the time zone, change the settings in the admin panel.

- player - visualization - information - DJ rating - history of songs - chat - order desk - table 2.0 - scripts

<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/kfm"></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/kfm.m3u" target="_blank"><img src="https://myradio24.com/img/wmp.gif" /></a>
<a href="https://myradio24.com/en/player/kfm" 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/en/table/kfm" 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.31" data-radio="kfm" data-interval=15 data-vmid=0 data-lang="en"></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>

To install PHP code with caching and receiving up-to-date information about the radio channel. The description of the parameters is the same as in the JS version. By default, the encoding is UTF-8, for windows-1251 change it like this: $win1251=1 ;

<?php

//получаем данные информера и сохраняем в кеш
//10 секундный кеш не будет нагружать наш сервер
$win1251=0; //1 - чтобы использовать кодировку 1251
$revert=1; //0 или 1 - сортировка последних песен
$cachefile="cachekfm.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/kfm/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>";

}