Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов
Перезагрузите страницу
Пользователи [50]
Каталог файлов [15]
Форум [9]
Новости сайта [1]
Блог [3]
Другие модули [74]
PHP скрипты для uCoz [1]
Шаблоны [4]
Интернет магазин [1]
Мини чат [7]
Конструктор [2]
Радио Record на сайт [HTML5] upd 1.6
DEMO +
Всем привет Радио Record предоставляет разработчикам ограниченные возможности встраивания их станций к себе на сайт, тем более версии на iframe которые работают на flash что уже не актуально. Наш вариант работает на HTML5 которая позволит редактировать вид и дизайн под ваш сайт, и да поддержка моб. устройств.

Установка:

1. Добавим html
Код
<audio id="mRadio" src="http://air.radiorecord.ru:805/rr_320" ></audio>  
  <div id="uRadio">  
  <div class="rPlay">►</div>  
  <div class="rPause">⚃</div>  
  <div class="rIcon"></div>  
  <p>Radio Record<br><em>320 Kbit/s</em></p><input id="rVolume" type="range" min="0" max="10" value="5" step="0.1"></div>  
  <div id="mStan" class="sc">  
  <div class="mSt"><p>Radio Record</p><div data="rr_64">64</div><br><div data="rr_128">128</div><br><div data="rr_320">320</div></div>  
  <div class="mSt"><p>Trance Mission</p><div data="tm_64">64</div><br><div data="tm_128">128</div><br><div data="tm_320">320</div></div>  
  <div class="mSt"><p>Pirate Station</p><div data="ps_64">64</div><br><div data="ps_128">128</div><br><div data="ps_320">320</div></div>  
  <div class="mSt"><p>Vip Mix</p><div data="vip_64">64</div><br><div data="vip_128">128</div><br><div data="vip_320">320</div></div>  
  <div class="mSt"><p>Teodor Hardstyle</p><div data="teo_64">64</div><br><div data="teo_128">128</div><br><div data="teo_320">320</div></div>  
  <div class="mSt"><p>Record Dancecore</p><div data="dc_64">64</div><br><div data="dc_128">128</div><br><div data="dc_320">320</div></div>  
  <div class="mSt"><p>Record Breaks</p><div data="brks_64">64</div><br><div data="brks_128">128</div><br><div data="brks_320">320</div></div>  
  <div class="mSt"><p>Record Chill-Out</p><div data="chil_64">64</div><br><div data="chil_128">128</div><br><div data="chil_320">320</div></div>  
  <div class="mSt"><p>Record Dubstep</p><div data="dub_64">64</div><br><div data="dub_128">128</div><br><div data="dub_320">320</div></div>  
  <div class="mSt"><p>Супердискотека 90-х</p><div data="sd90_64">64</div><br><div data="sd90_128">128</div><br><div data="sd90_320">320</div></div>  
  <div class="mSt"><p>Record Club</p><div data="club_64">64</div><br><div data="club_128">128</div><br><div data="club_320">320</div></div>  
  <div class="mSt"><p>Медляк FM</p><div data="mdl_64">64</div><br><div data="mdl_128">128</div><br><div data="mdl_320">320</div></div>  
  <div class="mSt"><p>Гоп FM</p><div data="gop_64">64</div><br><div data="gop_128">128</div><br><div data="gop_320">320</div></div>  
  <div class="mSt"><p>Pump'n'Klubb</p><div data="pump_64">64</div><br><div data="pump_128">128</div><br><div data="pump_320">320</div></div>  
  <div class="mSt"><p>Russian Mix</p><div data="rus_64">64</div><br><div data="rus_128">128</div><br><div data="rus_320">320</div></div>  
  <div class="mSt"><p>Yo! FM</p><div data="yo_64">64</div><br><div data="yo_128">128</div><br><div data="yo_320">320</div></div>  
  <div class="mSt"><p>Record Deep</p><div data="deep_64">64</div><br><div data="deep_128">128</div><br><div data="deep_320">320</div></div>  
  <div class="mSt"><p>Record Trap</p><div data="trap_64">64</div><br><div data="trap_128">128</div><br><div data="trap_320">320</div></div>  
  <div class="mSt"><p>Tropical</p><div data="trop_64">64</div><br><div data="trop_128">128</div><br><div data="trop_320">320</div></div>  
  <div class="mSt"><p>Нафталин FM</p><div data="naft_64">64</div><br><div data="naft_128">128</div><br><div data="naft_320">320</div></div>  
  <div class="mSt"><p>Rave FM</p><div data="rave_64">64</div><br><div data="rave_128">128</div><br><div data="rave_320">320</div></div>  
  <div class="mSt"><p>Gold</p><div data="gold_64">64</div><br><div data="gold_128">128</div><br><div data="gold_320">320</div></div>  
  <div class="mSt"><p>GOA/PSY</p><div data="goa_64">64</div><br><div data="goa_128">128</div><br><div data="goa_320">320</div></div>  
  <div class="mSt"><p>Minimal/Tech</p><div data="mini_64">64</div><br><div data="mini_128">128</div><br><div data="mini_320">320</div></div>  
  <div class="mSt"><p>House</p><div data="fut_64">64</div><br><div data="fut_128">128</div><br><div data="fut_320">320</div></div>  
  <div class="mSt"><p>Megamix</p><div data="mix_64">64</div><br><div data="mix_128">128</div><br><div data="mix_320">320</div></div>  
  <div class="mSt"><p>Гастарбайтер</p><div data="gast_64">64</div><br><div data="gast_128">128</div><br><div data="gast_320">320</div></div>  
  <div class="mSt"><p>Аншлаг FM</p><div data="ansh_64">64</div><br><div data="ansh_128">128</div><br><div data="ansh_320">320</div></div>  
  <div class="mSt"><p>Remix</p><div data="rmx_64">64</div><br><div data="rmx_128">128</div><br><div data="rmx_320">320</div></div>  
  <div class="mSt"><p>Hard Bass</p><div data="hbass_64">64</div><br><div data="hbass_128">128</div><br><div data="hbass_320">320</div></div>  
  <div class="mSt"><p>Future Bass</p><div data="fbass_64">64</div><br><div data="fbass_128">128</div><br><div data="fbass_320">320</div></div>  
  <div class="mSt"><p>Techno</p><div data="techno_64">64</div><br><div data="techno_128">128</div><br><div data="techno_320">320</div></div>  
  <div class="mSt"><p>Ibiza</p><div data="ibiza_64">64</div><br><div data="ibiza_128">128</div><br><div data="ibiza_320">320</div></div>  
<div class="mSt"><p>Симфония FM</p><div data="symph_64">64</div><br><div data="symph_128">128</div><br><div data="symph_320">320</div></div>  
  <div class="mSt"><p>Electro</p><div data="elect_64">64</div><br><div data="elect_128">128</div><br><div data="elect_320">320</div></div>  
  <div class="mSt"><p>Midtempo</p><div data="mt_64">64</div><br><div data="mt_128">128</div><br><div data="mt_320">320</div></div>  
  <div class="mSt"><p>Moombahton</p><div data="mmbt_64">64</div><br><div data="mmbt_128">128</div><br><div data="mmbt_320">320</div></div>  
  <div class="mSt"><p>Jackin'/Garage</p><div data="jackin_64">64</div><br><div data="jackin_128">128</div><br><div data="jackin_320">320</div></div>  
  <div class="mSt"><p>Progressive</p><div data="progr_64">64</div><br><div data="progr_128">128</div><br><div data="progr_320">320</div></div>  
  </div>


2. Добавим js
Код
<script type="text/javascript">
$(function() {  
audio = $("#mRadio")[0];
$("#rVolume").mousemove(function() {
audio.volume = parseFloat(this.value / 10);;
});
$(".rPlay").click(function() {
audio.play(); $(this).hide(); $('.rPause').show(); });
$(".rPause").click(function() {
audio.pause(); $(this).hide(); $('.rPlay').show(); });
$(".mSt div").click(function() {
$(".mSt div").removeClass('erActive');
$(this).addClass('erActive');
$(".mSt p").removeClass('erActive');
nStan = $(this).html();
if(nStan=="64") { nStan = $(this).prev().html(); };  
if(nStan=="128") { nStan = $(this).prevAll().eq(2).html(); };
if(nStan=="320") { nStan = $(this).prevAll().eq(4).html(); };
nBits = $(this).html();
nRadi = $(this).attr('data');
$('#uRadio p').html(nStan+'<br><em>'+nBits+' Kbit/s</em>');
$('.rPlay').click();
$('#mRadio').attr('src','http://air.radiorecord.ru:805/'+nRadi+'');
audio.play();
update_track();
});
$(".mSt p").click(function() {
$(".mSt p, .mSt div").removeClass('erActive');
$(this).nextAll().eq(4).addClass('erActive').click();  
$(this).addClass('erActive');

audio.play();
update_track();
});

function update_track() {
var radUrl = $('audio#mRadio').attr('src').split('_')[0].split('/')[3];
if(radUrl=="rr") {radUrl = 'record'}

if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc" || radUrl == "gop") {  
$.getJSON('https://www.radiorecord.ru/xml/'+radUrl+'_online_v8.txt', function(data) {  
var items = [];
$.each(data, function(key, val) {
if((key != 'unix_stop_time') && (val != 'null') && (key != 'null') && (key != 'id') && (key != 'mbid') && (key != 'img') && (key != 'timeleft')) {
items.push('' + val + ''); };
});
$('div#uRadio em').html(items[0]+"<br>"+items[1]);
$('.rIcon').css({background: "url("+items[3]+") 0px 0px", backgroundSize:'cover'});  
});
} else {
$.getJSON('https://www.radiorecord.ru/xml/'+radUrl+'_online_v3.txt', function(data) {
var items = [];
$.each(data, function(key, val) {
if((key != 'unix_stop_time') && (val != 'null') && (key != 'null') && (key != 'id') && (key != 'mbid') && (key != 'img') && (key != 'timeleft')) {
items.push('' + val + ''); };
});
$('div#uRadio em').html(items[0]+"<br>"+items[1]);
$('.rIcon').css({background: "url("+items[2]+") 0px 0px", backgroundSize:'cover'});  
if ('mediaSession' in navigator) {  
  navigator.mediaSession.metadata = new MediaMetadata({  
  title: ''+nStan+'',  
  artist: ''+items[1]+'',  
  album: ''+items[0]+'',  
  artwork: [  
  { src: ''+items[2]+'', sizes: '96x96', type: 'image/png' },  
  { src: ''+items[2]+'', sizes: '128x128', type: 'image/png' },  
  { src: ''+items[2]+'', sizes: '192x192', type: 'image/png' },  
  { src: ''+items[2]+'', sizes: '256x256', type: 'image/png' },  
  { src: ''+items[2]+'', sizes: '384x384', type: 'image/png' },  
  { src: ''+items[2]+'', sizes: '512x512', type: 'image/png' },  
  ]  
  });  
  navigator.mediaSession.setActionHandler('play', function() {  
  document.querySelector('audio').play();  
  });  
  navigator.mediaSession.setActionHandler('pause', function() {  
  document.querySelector('audio').pause();  
  });  
  navigator.mediaSession.setActionHandler("previoustrack", function() {  
  $('.mSt').removeClass('nextRadio');  
  prevRad = $('p.erActive').parent().prev().addClass('nextRadio');  
  $('.nextRadio p').click();  
  });  
  navigator.mediaSession.setActionHandler("nexttrack", function() {  
  $('.mSt').removeClass('nextRadio');  
  prevRad = $('p.erActive').parent().next().addClass('nextRadio');  
  $('.nextRadio p').click();  
  });  
  }  
  });  
  };

} update_track();

setInterval(function() { update_track(); }, 10000);
});
</script>


3. Добавим CSS стили
Код
<style>
body {padding:0px;margin:0px;background:#cfdbe9;}
@font-face{font-family:'pf_dintext_pro';src:url(http://www.radiorecord.ru/i/fonts/pfdintextpro-bold-webfont.eot);src:url(http://www.radiorecord.ru/i/fonts/pfdintextpro-bold-webfont.eot?#iefix) format('embedded-opentype'),url(http://www.radiorecord.ru/i/fonts/pfdintextpro-bold-webfont.woff) format('woff'),url(http://www.radiorecord.ru/i/fonts/pfdintextpro-bold-webfont.ttf) format('truetype');font-weight:bold;font-style:normal;}
.erActive {
  background: #4181f5 !important;
  color: #fff !important;
}
div#uRadio {
  background: #383c3e;
  display: inline-block;
  width: 100%;
}
div#uRadio em { overflow: hidden;
  text-overflow: ellipsis;
  font-size: 11px;
  color: rosybrown;
  margin-top: 3px;line-height: 15px;
  display: inline-block;
}
.rPause {display:none}
.rPlay, .rPause {float:left;
  font-family: Helvetica, Arial, sans-serif;
  cursor: pointer;
  width: 55px;
  height: 55px;
  text-align: center;
  line-height: 55px;
  color: white;
  font-size: 26px;
  background-color: #ff6000;}
  div#uRadio p {
  padding: 0px;
  float: left;
  display: inline-block;
  margin: 4px 0 0 11px;
  font-size: 14px;
  color: #bcc1c2;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  font-family: Helvetica, Arial, sans-serif;
}
.rIcon {
  width: 84px;
  height: 55px;
  display: inline-block;
  float: left;
}
input#rVolume {
  float: right;
  position: relative;
  top: 15px;
  width: 45px;
  -webkit-transform: rotate(-90deg);
}
  .mSt {box-shadow: 1px 1px 1px #b6c1d0;
  margin-bottom: 3px;
  display: inline-block;
  background: white;
  padding: 5px;
  max-width: 230px;
  width: 100%;
  min-width: 230px;
}
.mSt p {
  text-align: center;
  float: left;
  font-family: sans-serif;
  font-size: 13px;
  text-transform: unset;
  min-height: 20px;
  position: relative;
  top: 11px;
  width: 70%;
  display: inline-block;
  color: mediumvioletred;
  padding: 20px 0px 20px 0px;
  border-radius: 3px;
  margin: -7px 0px 0px 5px;
}
.mSt div {
  cursor: pointer;
  border-radius: 3px;
  width: 15%;
  display: inline-block;
  background: #ff6000;
  color: #fff;
  margin: 0px 0px 2px 10px;
  text-align: center;
  padding: 3px;
  float: right;
  font-size: 12px;
  font-family: Helvetica, Arial, sans-serif;
}
div#mStan {
  background: #cfdbe9;
  text-align: center;
  padding: 5px;
}
::-webkit-scrollbar{width:0!important;height:20px}
::-webkit-scrollbar-track-piece{background:#fff}
::-webkit-scrollbar-thumb:vertical{height:5px;background:#fff}
::-webkit-scrollbar-thumb:horizontal{width:5px;background-color:#fff}
:focus::-webkit-input-placeholder{color:transparent}
:focus::-moz-placeholder{color:transparent}
:focus::placeholder{color:transparent}

</style>
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.

При копировании материала указываем источник ucods.3dn.ru

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 10.05.2017 в 20:27 по МСК
Категория: Другие модули
Просмотров: 1309
Комментариев: 5
Эмоций:

    • Оценки читателей

    ЗАКРЫТЬ
    • 0 Лайк
    • 0 Лавки
    • 0 Ахахах!
    • 0 Ого!
    • 0 Восторг
    • 0 Печаль
    • 0 Грусняшь
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Best_Studio
12.05.2018 | # |№3
Обновлено до версии 1.6

Что нового:

1. Новые станции.
2. Выделении станции и ее качество.
doznet
10.06.2018 | # |№4
скажите, пожалуйста, этот плеер подготовлен только для станций радио рекорд ведь? а как можно ли добавить другие станции, русское радио, радио европа плюс и так далее? чтобы они не просто воспроизводились бы- а так же как и здесь , выводились бы названия реков, иконки радио? В одном списке с радио рекорд станциями. спасибо
Best_Studio
11.06.2018 | # |№5
Станции да только рекорд пока..... Вариант добавления в работе, предложения в ЛС
Best_Studio
12.12.2017 | # |№2
Обновлено до версии 1.5.

Что нового:
1. Media Session - позволит вам переключать из бара браузера радио, а также на блоке экрана.
2. Новые радиостанции.
3. Новый API код.
4. Новая CSS стилизация.
Best_Studio
22.08.2017 | # |№1
Доп 8 станций (ver 1.3):
Код
<div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>   
<div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>
<div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>
<div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>
<div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>
<div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>
   <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>
   <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>