Хто в світі не любить музику? Сьогодні ми збираємося розповісти вам про те, як, за допомогою jQuery і плагіна jPlayer, створити онлайн-радіо, використовуючи j # 097; vascript, PHP і бази даних MySQL.
Створення бази даних
Тепер у нас є база даних і таблиця для зберігання основної інформації про пісні, які будуть відтворюватися на нашому радіо. Тепер нам треба наповнити таблицю. Виберіть деякі файли mp3 і внесіть наступний код в базу даних:
Тепер база даних готова.
Звичайно ж, нам доведеться створити сторінку на HTML. Для початку візьміть завантажену копію плагіна jPlayer і плагін jQuery. Розпакуйте файли, потім закачайте папки js / і skin / на ваш сервер.
Потім, створіть файл під назвою demo.html і внесіть туди наступний код:
Цей код був узятий з демо-додатків плагіна jPlayer. Це простенький HTML-код, який завантажує потрібні j # 097; vascript-файли (jQuery + плагін jPlayer), а також тут є CSS- і HTML-код, потрібний для відображення плеєра. В даний момент не буде доступний широкому коректно: нам потрібно додати ще деякі речі від jQuery, щоб анімувати його. Скоро ми до цього повернемося.
Отримуємо файли з бази даних
Тепер нам потрібно створити PHP-файл, який буде довантажувати випадкову пісню з бази, і відображати URL файлу, а також ім'я виконавця та назва пісні: все це може бути реалізовано за допомогою Ajax. Для початку, скачайте собі копію ezSQL. яку ми використовуємо для управління запитами до бази даних (Тут ви можете подивитися повноцінне керівництво по використанню ezSQL). Розпакуйте файли і завантажте файли ez_sql_core.php і ez_sql_mysql.php на сервер.
Як тільки зробите це, створіть на сервері файл під назвою getsong.php. Вставте туди наступний код:
Нічого складного: ми включили потрібні файли ezSQL, створили підключення до бази даних, а потім запросили один рядок з таблиці songs. 3 значення (URL файлу, виконавець, назва пісні) відображені, в розділеному вигляді.
І так, ми майже закінчили. Зараз нам потрібно використовувати трохи jQuery для створення запиту пісень за допомогою Ajax і нашого файлу getsong.php. Потім ми скористаємося плагіном jPlayer для відтворення.
Відкрийте файл demo.html і вставте туди куди, відображений після 10 рядки:
Можливості по розширенню скрипта