Скрипт радио-потока

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

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

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

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

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

templates/main_page.html

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

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

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

templates/radio.html

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

Шаг 2. CSS

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

css/radio.css

Шаг 3. JS

js/script.js

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

Шаг 4. PHP

index.php

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

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

Выводы

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


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

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

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

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