—»     —»   Разрабатываем онлайн-радио посредством jQuery и jPlayer
  Раздел: Аудио   Комментариев: 2  

Разрабатываем онлайн-радио посредством jQuery и jPlayer

Кто в мире не любит музыку? Сегодня мы собираемся рассказать вам о том, как, с помощью jQuery и плагина jPlayer, создать онлайн-радио, используя javascript, PHP и базы данных MySQL.

Приступаем

* Документация плагина 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 песен в базе данных) или, что ещё лучше, создать плейлист. Мы над этим не работали, но если вы заинтересованный энтузиаст, то попробуйте самостоятельно, и расскажите нам об этом в комментариях.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: PHP, MySQL, jQuery
Опубликовал Mysterious Master   Прочитано (раз): 13698   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 2 февраля 2012 @ 16:39
Написал: Михаил — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Ребятки, спасибо огромное за статью. Молодцы не поленились. Вот теперь я точно получу зачет по программированию. Ну и может быть в работе в дальнейшем пригодится.
Комментарий #2: 16 апреля 2018 @ 20:50
Написал: Trader19762 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Добрый день, скачал шаблон, редактирую его, но не могу перенаправить jPlayer для воспроизвидение mp3 из корневой папки сайта . Он настроен на <li
data-thumb="img/media_02.jpg"
data-title="Anarchy in the UK - Sex Pistols"
data-genre="punk"
data-artist="Poision Studios"
data-length="4:50"
data-itunes="http://xvelopers.com"
data-video="http://xvelopers.com"
data-mp3="http://www.jplayer.org/audio/mp3/TS
P-01-Cro_magnon_man.mp3"></li>
<li
При смене адреса data-mp3 плеер перестает работать. Уже пробовал заливать мр3 на хостинг, и поставлять ссылку в код data-mp3 - плеер все равно не работает.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Март 2024    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
25262728293031