Создание онлайн-радио с помощью jQuery и jPlayer
Кому не нравится музыка? Сегодня я с радостью покажу вам, как с помощью jQuery и плагина jPlayer создать онлайн радио на JavaScript, PHP и MySQL.
Создание базы данных
Сперва создайте новую базу данных SQL. Давайте назовем её radio. Как только мы с этим покончим, создадим таблицу. Нам нужно всего 4 поля: идентификатор записи, путь к файлу mp3, имя исполнителя и название песни. Вот код 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, который мы будем использовать для создания нашего онлайн радио. Распакуйте файлы, а затем загрузите на сервер js/ и skin/.
<!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. Это простой код, который подгружает необходимые файлы JavaScript (jQuery + jPlayer), а также CSS и HTML файлы, необходимые для визуального отображения радио. На данном этапе радио будет отображаться неправильно. Нам необходимо добавить немного анимации с помощью jQuery. Этим займемся через минутку.
Извлекаем файлы из базы данных
Теперь создадим PHP файл, который будет случайным образом доставать песню из базы данных и отображать путь к ней, название и имя исполнителя, чтобы затем с помощью Ajax мы смогли достать её саму. Сперва скачайте 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. На экране отобразилось три значения (путь к файлу, название песни и имя её исполнителя), разделенных вертикальной чертой (|).
Я вставил условие для того, чтобы предотвратить Ajax запросы, т.е. чтобы пользователи не смогли отобразить путь к файлам, введя в адресную строку http://www.yousite.com/getsong.php.
Самое главное
Итак, мы почти у цели. Теперь нам осталось написать немного кода на jQuery, чтобы доставать песни с помощью Ajax и нашего файла getsong.php. Затем всё это запоёт!
Откройте файл 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 в базе данных), и даже лучше - создавать плэйлисты.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/bgtupi4yZFs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
- 2024-04-22 » Цифровой маркетинг: инструменты для продвижения и рекламы в 2024 году
- 2024-04-22 » Что такое CSS-модули и зачем они нам?
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
Сейчас только тот является менеджером, кто заставляет знания работать. |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.