Скрипт радио-потока | Все о создании сайтов

Если вы задумываете разработку собственной программы для интернет-радио, то мы бы хотели поделиться с вами этим опытом.

В этой статье пойдет речь о создании радио-скрипта с прекрасным дизайном (CSS3). Он будет состоять из трёх основных элементов: шапки (с красиво анимированной поисковой строкой и интегрированным радио-плеером), левой панели (со списком категорий и подкатегорий) и правой панели (которая будет содержать список последних или отфильтрованных станций).

Пример Скачать (.zip, 260 Кб)

Шаг 1. HTML разметка

Вот разметка одного из используемых нами файлов шаблонов.
Шаблон главной (индексной) страницы:

templates/main_page.html

<!DOCTYPE html>

<head>

<title>Stream Radio Script | Script Tutorials</title>

google.load("jquery", "1.7.1");

</script>

</head>

<body>

<h2>Stream Radio Script</h2>

<a href="http://www.script-tutorials.com/stream-radio-script/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

</header>

<span>

</object>

</div>

</span>

</form>

<li id="1" val="Alternative"><a href="javascript:void(0)">Alternative</a>

<ul>

<li id="11" val="Classic+Alternative"><a href="javascript:void(0)">Classic Alternative</a></li>

<li id="12" val="Industrial"><a href="javascript:void(0)">Industrial</a></li>

</ul>

</li>

<li id="2" val="Classical"><a href="javascript:void(0)">Classical</a>

<ul>

<li id="21" val="Modern"><a href="javascript:void(0)">Modern</a></li>

<li id="22" val="Opera"><a href="javascript:void(0)">Opera</a></li>

<li id="23" val="Piano"><a href="javascript:void(0)">Piano</a></li>

<li id="24" val="Romantic"><a href="javascript:void(0)">Romantic</a></li>

<li id="25" val="Symphony"><a href="javascript:void(0)">Symphony</a></li>

</ul>

</li>

<li id="3" val="Electronic"><a href="javascript:void(0)">Electronic</a>

<ul>

<li id="31" val="Breakbeat"><a href="javascript:void(0)">Breakbeat</a></li>

<li id="32" val="Dance"><a href="javascript:void(0)">Dance</a></li>

<li id="33" val="Electro"><a href="javascript:void(0)">Electro</a></li>

<li id="34" val="House"><a href="javascript:void(0)">House</a></li>

<li id="35" val="Techno"><a href="javascript:void(0)">Techno</a></li>

<li id="36" val="Trance"><a href="javascript:void(0)">Trance</a></li>

</ul>

</li>

<li id="4" val="Metal"><a href="javascript:void(0)">Metal</a>

<ul>

<li id="41" val="Classic+Metal"><a href="javascript:void(0)">Classic Metal</a></li>

<li id="42" val="Heavy+Metal"><a href="javascript:void(0)">Heavy Metal</a></li>

<li id="43" val="Metalcore"><a href="javascript:void(0)">Metalcore</a></li>

<li id="44" val="Power+Metal"><a href="javascript:void(0)">Power Metal</a></li>

</ul>

</li>

<ul>

<li id="51" val="Dance+Pop"><a href="javascript:void(0)">Dance Pop</a></li>

<li id="52" val="Oldies"><a href="javascript:void(0)">Oldies</a></li>

<li id="54" val="World+Pop"><a href="javascript:void(0)">World Pop</a></li>

</ul>

</li>

</ul>

</div>

<div class="stlist">__stations__</div>

<div class="cred">Powered by <a href="http://www.script-tutorials.com/">Script Tutorials</a></div>

</div>

</body>

</html>

Во-первых, обратите внимание, как скрипт подключает библиотеку jquery от Google. Это может быть очень полезно, если вы не хотите хранить этот файл непосредственно на своём сервере. Наш элемент шапки содержит поисковую строку и внедрённый jasl плеер.

Идём дальше: слева (под шапкой) у нас UL-LI-список категорий (с подкатегориями). Правая панель будет содержать список последних станций, а когда мы ищем или выбираем категории – содержимое правой панели будет отфильтровано с помощью Ajax. Пока здесь содержится __stations__ key (ключ шаблона), который мы заменим на действительное значение с помощью PHP.

Далее шаблон радио-плеера:

templates/radio.html

</object>

Конечно, он содержит собственные ключи шаблона (__title__ и __stream__), которые мы будет использовать позже.

Шаг 2. CSS

Вот наши CSS файлы:

css/radio.css

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

/* область шапки */

.header {

height:62px;

}

.header input {

background:#aaa url(../images/search.png) no-repeat 5px center;

border:1px solid #888;

border-radius:10px;

float:right;

margin:14px 10px 0 0;

outline:none;

padding-left:20px;

width:200px;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

}

.header input:focus {

background-color:#eee;

width:300px;

}

.header > span {

display:block;

float:left;

line-height:40px;

padding:7px;

-webkit-transition: 0.5s;

-moz-transition: 0.5s;

-o-transition: 0.5s;

transition: 0.5s;

}

/* список станций */

.stlist {

float:right;

margin-right:1%;

width:71%;

}

.stlist ul {

list-style:none outside none;

margin:0;

padding:0;

}

.stlist ul li {

border-bottom:1px dotted #444;

overflow:hidden;

padding:10px;

}

.stlist ul li > a > img {

border:1px solid #CCC;

float:left;

height:85px;

margin-right:15px;

padding:1px;

width:85px;

}

.stlist ul li > div {

float:right;

margin-left:15px;

margin-top:-5px;

}

.stlist ul li > p.label,.stlist ul li > p.track {

font-size:11px;

font-weight:700;

}

.stlist ul li > p.label {

color:#888;

}

.stlist ul li > p.channel {

font-size:14px;

font-weight:700;

margin-bottom:17px;

}

/* список жанров */

.genres_par {

border-right:1px solid #ccc;

float:left;

width:26%;

}

ul.genres,ul.genres ul {

list-style-type:none;

margin:0;

padding:0;

}

ul.genres ul {

display:none;

overflow:hidden;

padding:0 15px;

}

ul.genres ul li {

margin:3px;

}

ul.genres a {

color:#333;

display:block;

font-size:18px;

padding:4px 0;

text-align:center;

text-decoration:none;

}

ul.genres ul a {

font-size:12px;

text-align:left;

}

ul.genres li {

border-bottom:1px solid #CCC;

margin:0;

}

ul.genres li ul li a {

background:none repeat scroll 0 0 #5bb951;

border-radius:2px;

color:#FFF;

font-size:12px;

padding:6px;

}

ul.genres li ul li a:hover {

background-color:#53854E;

}

Шаг 3. JS

js/script.js

$(document).ready(function(){

$('#search').blur(function() {

if ('' == $('#search').val()) $('#search').val('Search');

});

$('#search').focus(function() {

if ('Search' == $('#search').val()) $('#search').val('');

});

$('ul.genres li a').click( // category slider

function() {

var checkElement = $(this).next();

if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {

$('.genres li ul').slideUp(150);

$(this).next().slideToggle(150);

}

);

$('ul.genres ul li a').click( // get stations by category

function() {

$.ajax({

type: 'GET',

url: 'index.php',

data: 'action=get_genre_stations&id=' + $(this).parent().attr('id') + '&name=' + $(this).parent().attr('val'),

success: function(data){

$('.stlist').fadeOut(400, function () {

$('.stlist').html(data);

$('.stlist').fadeIn(400);

});

}

});

}

);

});

function play(id) { // play function

$('#rplayer').load('index.php?action=play&id=' + id, function() {});

return false;

}

function get_stations_by_keyword() { // get stations by keyword

var keyword = $('#search').val().replace(/ /g,"+");

$.ajax({

type: 'GET',

url: 'index.php',

data: 'action=get_keyword_stations&key=' + keyword,

success: function(data){

$('.stlist').fadeOut(400, function () {

$('.stlist').html(data);

$('.stlist').fadeIn(400);

});

}

});

}

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

Шаг 4. PHP

index.php

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

<?php

// установка уровня сообщений об ошибках

if (version_compare(phpversion(), '5.3.0', '>=') == 1)

error_reporting(E_ALL & ~E_NOTICE & ~E_DEPRECATED);

else

error_reporting(E_ALL & ~E_NOTICE);

$aStations = array(

0 => array(

'category' => 31,

'name' => 'EuroDance',

'desc' => 'The newest and best of Eurodance hits',

'url' => 'http://www.di.fm/eurodance',

'br' => 96,

'stream' => 'http://scfire-mtc-aa06.stream.aol.com:80/stream/1024'

1 => array (

'category' => 34,

'name' => 'House',

'desc' => 'Silky sexy deep house music direct from New York city!',

'url' => 'http://www.di.fm/house',

'br' => 96,

'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1007'

2 => array (

'category' => 13,

'name' => 'Trance',

'desc' => 'The hottest, freshest trance music from around the globe!',

'url' => 'http://www.di.fm/trance',

'br' => 96,

'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1003'

3 => array (

'category' => 51,

'name' => 'Electro House',

'desc' => 'An eclectic mix of electro and dirty house',

'url' => 'http://www.di.fm/electro',

'br' => 96,

'stream' => 'http://scfire-ntc-aa04.stream.aol.com:80/stream/1025'

)

);

function searchByCat($iCat, $aStations) {

$aRes = array();

foreach ($aStations as $i => $aInfo) {

if ($aInfo['category'] == $iCat) {

$aRes[$i] = $aInfo;

}

return $aRes;

}

function searchByKeyword($sKey, $aStations) {

$aRes = array();

foreach ($aStations as $i => $aInfo) {

if (false !== strpos($aInfo['name'], $sKey) || false !== strpos($aInfo['desc'], $sKey)) {

$aRes[$i] = $aInfo;

}

return $aRes;

}

function parseStationList($aData) {

$sStations = '';

if (is_array($aData) && count($aData) > 0) {

foreach ($aData as $i => $a) {

$sStationId = $i;

$sStationBr = (int)$a['br'];

$sStationName = $a['name'];

$sStationDesc = $a['desc'];

$sStationUrl = $a['url'];

$sThumb = 'media/'.($sStationId+1).'.png';

$sStations .= <<<EOF

<li>

<p>Bitrate: {$sStationBr}</p>

</div>

<p class="channel"><a href="{$sStationId}" onclick="return play('{$sStationId}'); return false;">{$sStationName}</a></p>

<p class="track">{$sStationDesc}</p>

<p class="label">{$sStationUrl}</p>

</li>

EOF;

}

$sStations = ($sStations == '') ? '<li>Nothing found</li>' : $sStations;

return '<ul>' . $sStations . '</ul>';

}

switch ($_GET['action']) {

case 'play':

$i = (int)$_GET['id'];

$aInfo = $aStations[$i];

$aVars = array (

'__stream__' => $aInfo['stream'],

'__title__' => $aInfo['name']

);

echo strtr(file_get_contents('templates/radio.html'), $aVars); exit;

break;

case 'get_genre_stations':

$i = (int)$_GET['id'];

$aSearch = searchByCat($i, $aStations);

$sStations = parseStationList($aSearch);

header('Content-Type: text/html; charset=utf-8');

echo $sStations; exit;

break;

case 'get_keyword_stations':

$sKey = $_GET['key'];

$aSearch = searchByKeyword($sKey, $aStations);

$sStations = parseStationList($aSearch);

header('Content-Type: text/html; charset=utf-8');

echo $sStations; exit;

break;

}

$sLastStations = parseStationList($aStations);

echo strtr(file_get_contents('templates/main_page.html'), array('__stations__' => $sLastStations));

Сначала мы подготовим список радиостанций (всего их 4). Затем – две функции поиска: ‘searchByCat’ и ‘searchByKeyword’. После чего – специальную функцию ‘parseStationList’, которая преобразует массив отфильтрованных станций в HTML формат. И последнее – небольшой switch-case для выполнения наших внутренних ajax команд.

Пример Скачать (.zip, 260 Кб)

Выводы

Вам никогда не помешает улучшить скрипт и попытаться реализовать свои идеи. Будем рады увидеть ваши предложения и замечания по этому поводу. Удачи!

Возможно, Вам будет интересно ↓↓↓

2 комментарий на “Скрипт радио-потока”

Сергей

09.02.2013 at 08:55 | Ответить

IE 9 и ниже, выдают предупреждение об ошибке, хотя всё нормально работает. Интересно, в чём именно IE находит ошибку. И сам плеер в IE с черным бэкграундом вместо белого или прозрачного.
Станислав Серов

02.01.2014 at 09:50 | Ответить

Здравствуйте! хотел бы спросить, возможно ли в начале вашей этой статьи разместить мои два предложения со ссылкой(ссылку можно закрыть для поисковых систем) на сервис по созданию кода радио для сайта? Примерно в таком стиле: «Если вы хотите быстро создать скрипт радио для своего сайта, то предлагаем Вам посмотреть этот сервис». Если согласны, прошу напишите мне вашу цену мне на stas-serov@mail.ru

Шаг 1. HTML разметка

templates/main_page.html

templates/radio.html

Шаг 2. CSS

css/radio.css

Шаг 3. JS

js/script.js

Шаг 4. PHP

index.php

Выводы

Возможно, Вам будет интересно ↓↓↓

2 комментарий на “Скрипт радио-потока”

Оставить комментарий Отменить ответ