Общие вопросы по интернет радио вещанию
7 • Посмотреть все темы

Экспорт расписания AirTime

727

Leff27 @Leff27

01.11.2012

Всем привет. Небольшой мануал на русском "как экспортировать расписание AirTime на сайт".

Нам понадобится:
- Сервер с AirTime 2.2
- Прямые руки
- Хостинг для сайта

Первым делом закачаем в папку airtime в корне домена сайта(куда будем выводить) четыре файла:
1. Последнюю min-версию jquery ********** (на данный момент ********** )
2. файл jquery-ui-1.8.10.custom.min.js из папки /usr/share/doc/airtime/examples/widgets на сервере с airtime(или отсюда ********** )
3. Файл jquery.showinfo.js из папки /usr/share/doc/airtime/examples/widgets/js на сервере с airtime(или отсюда ********** )
4. Файл стилей(можно использовать свой) airtime-widgets.css из папки /usr/share/doc/airtime/examples/widgets/css на сервере с airtime(или отсюда ********** )

В итоге путь до наших файлов должен быть следующим:
**********

Теперь самое интересное. AirTime предлагает вывести нам несколько видов расписания:
a) Текущую и следующую программу
б) Расписание на текущий день, за исключением уже прошедших и текущего шоу
в) Вывод расписания на неделю

За вывод отвечают два api-файла AirTime:
На сегодня: **********
На неделю: **********

Создадим в корне домена файл index.html и подключим к нему *.js и *.css из папки airtime

 
 <!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">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <script src="/airtime/jquery-1.8.0.min.js" type="text/javascript"></script>
 <script src="/airtime/jquery-ui-1.8.10.custom.min.js" type="text/javascript"></script>
 <script src="/airtime/jquery.showinfo.js" type="text/javascript"></script>
 <link href="/airtime/airtime-widgets.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 </body>
 </html>

Теперь нам нужно вывести расписание. Для этого добавляем перед </head> код:

 
 <script>
 $(document).ready(function() {
 $("#headerLiveHolder").airtimeLiveInfo({
 sourceDomain: "http://localhost", // Домен сервера с AirTime
 text: {onAirNow:"On Air Now", offline:"Offline", current:"Current", next:"Next"},
 updatePeriod: 20 // Период обновления в секундах
 });
 $("#onAirToday").airtimeShowSchedule({
 sourceDomain: "http://localhost", // Домен сервера с AirTime
 text: {onAirToday:"On air today"},
 updatePeriod: 5, // Период обновления в секундах
 showLimit: 10 // Лимит Шоу
 });
 $("#scheduleTabs").airtimeWeekSchedule({
 sourceDomain:"http://localhost", // Домен сервера с AirTime
 dowText:{monday:"Monday", tuesday:"Tuesday", wednesday:"Wednesday", thursday:"Thursday", friday:"Friday", saturday:"Saturday", sunday:"Sunday"},
 miscText:{time:"Time", programName:"Program Name", details:"Details", readMore:"Read More"},
 updatePeriod: 600 // Период обновления в секундах
 });
 var d = new Date().getDay();
 $('#scheduleTabs').tabs({selected: d === 0 ? 6 : d-1, fx: { opacity: 'toggle' }});
 
 });
 </script>

И перед </body>

 
 <h1>"Текущая программа и следующая"</h1>
 Что играет сейчас и будет далее:
 <br/>
 <br/>
 <div id="headerLiveHolder" style="border: 1px solid #999999; padding: 10px;"></div>
 <br/>
 <br/>
 <h1>"Расписание на сегодня"</h1>
 Показываем, что будет играть сегодня:
 <br/>
 <br/>
 <div id="onAirToday"></div>
 <br/>
 <br/>
 <h1>"Расписание на неделю"</h1>
 Виджет показывает расписание на всю неделю:
 <br/>
 <br/>
 <div id="scheduleTabs"></div>

Сохраняем все в кодировке UTF-8 без BOM. Заполняем расписание в Airtime и открываем страницу сайта.
Результат:

А вот рабочий вариант с измененным дизайном:

Домашнее задание:
Изменить стандартный вид вывода любого типа расписания

Спасибо за внимание. Special for RadioTalk.ru by Artem M.

Отредактировано Leff27 - 01.11.2012