Приступаем
* Документация плагина jPlayer
* Скачать файл
Внимание! У вас нет прав для просмотра скрытого текста.
Создание базы данных
Для начала нам понадобится новая база данных MySQL. Давайте назовём её radio. Как только сделаете это, нам нужно создать таблицу. Нам нужно всего 4 поля: id (номер песни), mp3 url (ссылка до файла Mp3), artist name (имя исполнителя) и song title (название песни). Вот SQL-код, который вы можете использовать для создания таблицы под названием songs:
CREATE TABLE `songs` (
`song_id` int(11) NOT NULL AUTO_INCREMENT,
`url` varchar(500) NOT NULL,
`artist` varchar(250) NOT NULL,
`title` varchar(250) NOT NULL,
PRIMARY KEY (`song_id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=2;
Теперь у нас есть база данных и таблица для хранения основной информации о песнях, которые будут воспроизводиться на нашем радио. Теперь нам надо наполнить таблицу. Выберите некоторые файлы mp3 и внесите следующий код в базу данных:
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/songurl.mp3', 'Artist name', 'Song name');
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/anothersongurl.mp3', 'Another artist', 'Another song');
INSERT INTO `songs` (`song_id`, `url`, `artist`, `title`) VALUES ('', 'http://mysongs.com/onemoresongurl.mp3', 'One more artist', 'One more song');
Теперь база данных готова.
Разработка HTML-кода
Конечно же, нам придется создать страницу на HTML. Для начала возьмите скачанную копию плагина jPlayer и плагин jQuery. Распакуйте файлы, затем закачайте папки js/ и skin/ на ваш сервер.
Затем, создайте файл под названием demo.html и внесите туда следующий код:
<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' lang='en' xml:lang='en'>
<head>
<title>Online radio using jQuery</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="skin/jplayer.blue.monday.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
</head>
<body>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-audio">
<div class="jp-type-single">
<div id="jp_interface_1" class="jp-interface">
<ul class="jp-controls">
<li><a href="#" class="jp-play" tabindex="1">play</a></li>
<li><a href="#" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="#" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="#" class="jp-mute" tabindex="1">mute</a></li>
<li><a href="#" class="jp-unmute" tabindex="1">unmute</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
</div>
<div id="jp_playlist_1" class="jp-playlist">
<ul>
<li><strong id="artist">Artist</strong> - <span id="songname">Song name</span></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
Этот код был взят из демо-приложений плагина jPlayer. Это простенький HTML-код, который подгружает нужные javascript-файлы (jQuery+плагин jPlayer), а также здесь есть CSS- и HTML-код, нужный для отображения плеера. В данный момент не будет отображаться корректно: нам нужно добавить ещё кое-какие вещи от jQuery, чтобы анимировать его. Скоро мы к этому вернёмся.
Получаем файлы из базы данных
Теперь нам нужно создать PHP-файл, который будет подгружать случайную песню из базы, и отображать URL файла, а также имя исполнителя и название песни: всё это может быть реализовано посредством Ajax. Для начала, скачайте себе копию ezSQL, которую мы используем для управления запросами к базе данных (Здесь вы можете посмотреть полноценное руководство по использованию ezSQL). Распакуйте файлы и загрузите файлы ez_sql_core.php и ez_sql_mysql.php на сервер.
Как только сделаете это, создайте на сервере файл под названием getsong.php. Вставьте туда следующий код:
<?php
if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){
include_once "ez_sql_core.php";
include_once "ez_sql_mysql.php";
$db = new ezSQL_mysql('db_user','db_password','db_name','db_host');
$song = $db->get_row("SELECT * FROM songs ORDER BY RAND() LIMIT 1");
$artist = $song->artist;
$songname = $song->title;
$url = $song->url;
$separator = '|';
echo $url.$separator.$artist.$separator.$songname;
}
?>
Ничего сложного: мы включили нужные файлы ezSQL, создали подключение к базе данных, а затем запросили одну строку из таблицы songs. 3 значения (URL файла, исполнитель, название песни) отображены, в разделенном виде.
Условные комментарии здесь использованы для определения Ajax-запросов и для предотвращения того, чтобы посетители могли загружать песни путём ввода url по типу «http://www.yousite.com/getsong.php» в адресную строку браузера.
Оживляем скрипт
И так, мы почти закончили. Сейчас нам нужно использовать немного jQuery для создания запроса песен посредством Ajax и нашего файла getsong.php. Затем мы воспользуемся плагином jPlayer для воспроизведения.
Откройте файл demo.html и вставьте туда куда, отображенный после 10 строки:
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
$("#jquery_jplayer_1").jPlayer({
ready: function () {
var data = $.ajax({
url: "getsong.php",
async: false
}).responseText;
var string = data.split('|');
$(this).jPlayer("setMedia", {
mp3: string[0]
}).jPlayer("play");
$('#artist').html(string[1]);
$('#songname').html(string[2]);
},
ended: function (event) {
var data = $.ajax({
url: "getsong.php",
async: false
}).responseText;
var string = data.split('|');
$(this).jPlayer("setMedia", {
mp3: string[0]
}).jPlayer("play");
$('#artist').html(string[1]);
$('#songname').html(string[2]);
},
swfPath: "js",
supplied: "mp3"
});
});
//]]>
</script>
Теперь, если вы сохраните файл и откроете в браузере ссылку http://www.yoursite.com/demo.html, ваше радио должно заработать: песня подгружается из базы и воспроизводится. Когда песня кончается, другая выбирается автоматически.
Возможно, существуют и более грамотные варианты реализации данного типа кода (здесь, например, много лишнего кода, что не есть хорошо), так что не стесняйтесь комментировать и предлагать лучшие способы.
Возможности по расширению скрипта
Так как у нас уже есть работающее радио, его легко улучшить: например, можно исключить песню, которая уже воспроизводилась (используя записанные id песен в базе данных) или, что ещё лучше, создать плейлист. Мы над этим не работали, но если вы заинтересованный энтузиаст, то попробуйте самостоятельно, и расскажите нам об этом в комментариях.