Постановка проблемы
Скачать 208.88 Kb.
|
| Государственное бюджетное общеобразовательное учреждение города Москвы "Школа с углубленным изучением английского языка № 1381" Сайт для прослушивания онлайн-радио «Радиоприёмник» Творческий проект Выполнил: ученик 11 «Д» класса Морозов Юрий Алексеевич Руководитель: учитель информатики Рыбин Андрей Владимирович Москва 2017 Оглавление Постановка проблемыС каждым днём всё больше россиян слушают радио посредством интернет-вещания вместо обычного радиоприёмника. В современных телефонах (смартфонах) больше нет встроенной возможности слушать радио, а люди стали всё чаще отказываться от радиорозеток и аналоговых радиоприёмников. Почти все новые радиостанции вещают исключительно через Интернет. На данный момент на московских FM-частотах вещает приблизительно 54 радиостанции, когда на самом деле их гораздо больше. В итоге, в России (в регионах, где Интернет достаточно доступен) радио слушают в основном при помощи Интернета. Но каждый официальный сайт радиостанции реализует эту возможность по-разному, и почти у каждой радиостанции свой плеер на разных сайтах, что создаёт дополнительные сложности для пользователя. На данный момент в рунете существует довольно большое количество сайтов для прослушивания онлайн-радио, которые пытаются объединить в себе как можно больше радиостанций, но ни один из них по разным причинам не может полноценно устроить пользователя. В одних отсутствует мобильная версия, вторые требуют регистрации, третьи не отображают какая песня сейчас звучит, в других слишком много рекламы, которая значительно усложняет использование сайта, и так далее (более подробную и конкретную информацию о недостатках таких сайтов смотрите в Приложении 1). Ввиду всех этих проблем, желание пользователя слушать радио может и вовсе исчезнуть. Из всего вышеизложенного я сделал вывод о необходимости создания такого сайта, который мог бы удовлетворить абсолютно любого пользователя, быть максимально простым и понятным буквально каждому, поддерживал как можно большее количество устройств, позволял слушать практически любую российскую радиостанцию, не требовал дополнительной установки каких-либо плагинов/приложений и не досаждал рекламой. Созданию такого сайта и посвящён данный проект. Критерии результативностиРезультативность выполненной работы будет прямо оцениваться от количества пользователей сайта и времени пребывания на нём. При оценивании будут использоваться как данные собранные при помощи Яндекс.Метрики, так и средства сбора статистики внутри проекта. Планируется, что сайт будут посещать от 20 пользователей в сутки, как минимум 5 из которых пробыли на сайте в течении получаса или дольше. Концепция проектаНеобходимо создать веб-приложение, которое позволит слушать радиостанции через интернет. Данный сайт должен соответствовать следующим требованиям:
Для осуществления проекта необходимо выполнить следующие задачи:
Определение доступных ресурсовДля реализации проекта необходимы:
Таким образом, на реализацию данного проекта не нужны никакие финансовые вложения. Для получение дополнительной информации по разработке используются только онлайн-справки и другие материалы из Интернета (в консультантах необходимости нет). Для создания основной части проекта понадобилось 4 месяца (или 1 месяц активной работы). Для доработки необходимо приблизительно ещё 2. Этапы выполнения проектаНа данный момент вся запланированная часть работы почти полностью выполнена. Указанный ниже план приблизительный и может в силу различных обстоятельств не соответствовать действительности.
Были изучены дополнительные материалы необходимые для реализации проекта. В частности, была изучена литература, указанная в пункте «Список литературы».
Был тщательно продуман дизайн проекта (сайта), а также составлен его макет. Изначально макет был нарисован на бумаге.
Во время создания проекта не использовалось никаких CMS, фреймворков, готовых шаблонов и так далее. Всё было создано абсолютно с нуля. На этом продолжительном и сложном этапе был создан «движок» сайта (структура сайта, фронт-контроллер, вспомогательные модули, система кэширования и т.д.), на котором в дальнейшем было продолжено создание проекта и заявленного функционала.
Были проанализирована информация о радиостанциях с их официальных сайтов для того, чтобы понять какие сведения могут понадобиться для их воспроизведения. На основе полученных данных была создана модель представления данных. Затем база была заполнена информацией о некоторых радиостанциях.
Была завершена клиентская часть сайта: доработан шаблон сайта, создан основной JS-сценарий, добавлены и заполнены недостающие страницы, добавлены в БД ещё радиостанции, создан раздел «Добавить радиостанцию».
Создание мобильной версии, улучшение дизайна, добавление раздела «Сообщить об ошибке», исправления ошибок, пополнение информации о радиостанциях, добавление ещё большого количества радиостанций – всё это планы на ближайшее будущее, которые выполняются уже сейчас. Также в апреле планируется выполнить задачу №3 из раздела «Концепция проекта» (распространить информацию о проекте, добавить его в поисковые системы, получить первых пользователей). Приведённый план неокончателен. Проект будет продолжать развиваться, а данный план пополнен. Реализация планаРазработка данного проекта началась с изучения дополнительного материала необходимого для его реализации. В частности, была необходимость узнать больше о некоторых элементах сценарного языка программирования JavaScript и скриптового языка PHP. Затем, был продуман, спроектирован и свёрстан макет сайта. Дальнейшая разработка была продолжена созданием серверной части сайта. Был создан фронт-котроллер, который обрабатывает GET-запросы, если запрашиваемый файл не был найден, и выполняет внутреннюю переадресацию на нужную страницу из папки pages (например, при запросе GET /station/1/ скрипт откроет страницу /pages/station.php, передав ей аргумент id равный 1). Затем были созданы модули для переадресации на нужный аудио-поток и подсчета статистики, для определения что за песня сейчас играет и для подведения итогов недели по прослушиваниям радиостанций и формировки раздела «Популярные». Следующим этапом был анализ информации о аудио-потоке, доступных битрейтах и серверах, а также некоторой другой необходимой информации с официальных сайтов радиостанций (см. Приложение 2). На основе полученной информации была спроектирована модель представления данных о радиостанциях, а база данных заполнена. Затем была продолжена разработка клиентской части сайта: доработан шаблон, написан основной JS-сценарий (его фрагмент, касающийся воспроизведения аудио-потока, см. в Приложении 3), реализованы недостающие элементы интерфейса, создана страница-контроллер для радиостанций, а также страницы «Сводка», «О проекте» и «Добавить радиостанцию». Самым сложным оказался этап создания системы «Что за песня?», которая определяет какая песня сейчас играет на прослушиваемой радиостанции. После большого количества экспериментов и анализа информации, которую предоставляют официальные сайты радиостанций о том, что сейчас играет, удалось максимально обобщить алгоритм определения. Однако для некоторых радиостанций «Европейской медиагруппы» определение песни на данный момент не работает, так как ранее для этого использовалось API их официального развлекательного портала и приложения Chameleon.fm, который был закрыт в начале этого года. В ближайшее время для определения будут подключены API каждого отдельно взятого официального сайта этого холдинга. Также одной из проблем реализации оказалась поддержка старых устройств и браузеров. Дело в том, что они не умеют работать с некоторыми современными возможностями, которые стали доступны благодаря внедрению HTML5. Решить данную проблему можно, если добавить в скрипт дополнительные условия поддержки той или иной возможности, которые могут не поддерживаться старыми версиями браузеров, и использовать для них более простые эквиваленты. Однако, проблема поддержки старых браузеров на данный момент является второстепенной, и будет решена, скорее всего, не раньше конца марта. Ещё одной сложно решающейся проблемой является мобильная версия проекта. На маленьком экране должно одновременно уместиться довольно много информации: что играет, настройки воспроизведения, меню сайта, информация с открытой страницы, а также кнопки «Добавить радиостанцию» и «Сообщить об ошибке». Решение данной проблемы было продумано: использовать больше иконок вместо слов, скрыть меню в левой части, скрыть кнопки настроек воспроизведения в дополнительное меню внизу экрана и так далее. Однако, для её реализации понадобится дополнительное время. Оценка эффективности и результативностиРеализация проекта протекает в соответствии с назначенным планом: почти все первоначально задуманные функциональные идеи уже удалось реализовать. Ознакомиться с самим проектом можно по адресу в Интернете: http://the-radio.azurewebsites.net/. Главной перспективой дальнейшего развития является добавление новых радиостанций, улучшение дизайна и увеличение количества поддерживаемых устройств и браузеров. Говорить о результативности на данный момент рано. Оценка результативности будет проводиться после выполнения задачи №3 из раздела «Концепция проекта» в соответствии с критериями (см. раздел «Определение критериев результативности»). Список литературы
Также в самом проекте частично использовались статьи о радиостанциях из свободной интернет-энциклопедии Википедия (ru.wikipedia.org), а также информация с официальных сайтов самих радиостанций (см. Приложение 2). Приложение 1Подробная информация о недостатках других подобных проектов online-red.com – отсутствуют определение песни, выбор сервера и битрейта, мобильная версия и система избранных радиостанций. onlayn-radio.ru – неудобный плеер; отсутствует определение песни; система избранных радиостанций работает только для зарегистрированных пользователей; нет возможности сменить сервер и битрейт; переход между страницами прерывает воспроизведение. radioprofusion.com – для работы обязательно необходим Adobe Flash Player; работает далеко не на всех мобильных устройствах; отсутствует мобильная версия; неудобный плеер; нет системы избранных; переход между страницами прерывает воспроизведение. radiopotok.ru – плохо работает определение песен; неудобный поиск и сортировка; слишком большое количество непопулярных/пользовательских радиостанций, которые перемешаны с профессиональными; переход между страницами прерывает воспроизведение; отсутствует выбор сервера и битрейта. top-radio.ru – не работает поиск; плеер работает не совсем корректно на мобильных устройствах; отсутствует выбор качества звука, определение песни и система избранных. zaycev.online – на сайте периодически открывается реклама в новом окне; воспроизводятся не все радиостанции; использование сайта вызывает уведомление безопасности браузера; отсутствуют определение песни, система избранных, выбор качества звука; сайт обманом пытается получить учетные данные ВКонтакте, предлагая ввести их в свою авторизационую форму для расширения функционала. pofm.ru – сравнительно мало радиостанций, и отсутствуют очень многие популярные; отсутствует определение песни, сортировка и поиск радиостанций; для работы обязательно необходим Adobe Flash Player; работает далеко не на всех мобильных устройствах. Приложение 1 (продолжение)101.ru – включает в себя только радиостанции холдинга «ГПМ Радио», а также персональные радиостанции, созданные по заказу. Здесь приведены только несколько сайтов из лидирующих позиций по запросу «Слушать радио онлайн» в Яндексе. Приложение 2Добавленные в проект радиостанции и их официальные сайты
Приложение 2 (продолжение)
Приложение 3 (стр. 1/3)Алгоритм воспроизведения радиостанций на стороне клиента [JavaScript] /* e – функция получения элемента из DOM toggleButtons – функция переключения кнопок воспроизводить/приостановить whatTrack – функция для получения информации о воспроизвдении XRequest – метод создания объекта асинхронного подключения (если поддерживается браузером) wt – id таймера до следующего определения песни setTitle – изменить заголовок вкладки/окна браузера на нужный BLANK – строка ‘about:blank’ volume – громкость воспроизведения (по умолчанию 0.6; загружается из Local Storage, если был задан ранее) config – настройки воспроизведения радиостанций (по умолчания лучший битрейт и 1-ый сервер; загружается из Local Storage, если был изменён для какой-либо радиостанции) */ function r(id) { return STATIONS['id' + id]; } // Глобальная переменная STATIONS объявляется в JSONP радиостанций (stations.js) function isPlaying(id) { return r_id == id && !radio.paused; } var radio = new Audio; radio.volume = volume; if (radio.volume == volume) { changeVolume(); document.querySelector('.volume_icon').style.display = 'inline-block'; e('regulator').onmousedown = e('regulator').ontouchstart = function (ev) { changeVolume(ev); window.onmousemove = window.ontouchmove = changeVolume; window.onmouseup = window.ontouchend = function () { window.localStorage.setItem('volume', volume); window.onmousemove = window.ontouchmove = window.onmouseup = window.ontouchend = null; }; }; } if (radio.onplay === undefined) no_events = true; radio.onplay = function () { if (!fc) { toggleButtons(true); setTitle(); e('playing').innerText = 'Подключение...'; e('playing_img').src = '/img/stations/' + r_id + '.png'; if (!fail) whatTrack(); } else fc = false; e('play').title = 'Отменить подключение'; e('play').className = 'work'; }; radio.onplaying = function () { Приложение 3 (стр. 2/3)if (fail) { warn(); fail = false; attempts = 3; whatTrack(); } e('play').title = 'Приостановить'; e('play').className = 'pause'; if (XRequest && !wt) e('playing').innerText = 'Определение песни...'; }; radio.onpause = function () { e('play').title = 'Подключиться к радиостанции'; e('play').className = ''; whatTrack(true); e('playing').innerText = 'Ничего не играет'; e('playing_img').src = '/img/stations/nothing.png'; if (stop) { radio.src = BLANK; stop = false; } toggleButtons(); setTitle(); }; radio.onerror = function () { if (radio.src != BLANK) { var i = r(r_id); fail = true; if (attempts) { if (attempts == 3) whatTrack(true); var s = e('server').selectedIndex; warn(W_CONNECT.replace('*', i[0]).replace('#', --attempts)); e('server').selectedIndex = i[2] - 1 > s ? s + 1 : 0; setConfig(); } else { warn(W_CONNECT2.replace('*', i[0])); attempts = 3; radioStop(); e('warning').appendChild(repeat); } } }; function radioSet() { var id = this.dataset.id; if (r_id == id) e('play').click(); else { if (!r_id) { fav.classList.remove('lock'); e('info').className = ''; } var s = r(id), c = isFavourite(id); r_id = id; rc = config[id] || [0, 0]; e('info').title = 'Информация о радиостанции «' + s[0] + '»'; e('station').innerText = s[0]; fav.title = getTitle(0, id, c ? 1 : 0); fav.classList[c ? 'add' : 'remove']('active'); fav.dataset.id = id; e('server').options.length = e('bitrate').options.length = 0; for (var i = 0; i < s[2]; i++) e('server').options[i] = new Option('Сервер ' + (i + 1), i, i == rc[0], i == rc[0]); s[3].forEach(function (item, i) { e('bitrate').options[i] = new Option(item + ' кбит/с', i, i == rc[1], i == rc[1]); }); e('bitrate').disabled = s[3].length == 1; e('server').disabled = s[2] == 1; radioStart(); } }; function radioStart() { Приложение 3 (стр. 3/3)radio.src = '/play/' + r_id + '/' + rc[0] + '/' + rc[1] + '/'; radio.play(); if (no_events) { radio.onplay(); var timeout = new Date(); check = setInterval(function () { if (radio.played.length) { radio.onplaying(); clearInterval(check); } else if (radio.error || new Date() - timeout > 20000) { radio.onerror(); clearInterval(check); } }, 200); } }; function radioStop() { stop = true; radio.pause(); if (no_events) { radio.onpause(); clearInterval(check); } if (fail && attempts < 3) { attempts = 0; radio.onerror(); } }; function changeVolume(ev) { if (ev) { var y = ev.type.search('touch') + 1 ? ev.targetTouches[0].clientY : ev.clientY; ev.preventDefault(); volume = Math.round((footer.offsetTop - y - 6) * 100 / 15) / 1000; if (volume > 1) volume = 1; else if (volume < 0) volume = 0; radio.volume = volume; } e('slider').style.bottom = volume * 150 + 4 + 'px'; } function setConfig() { rc = config[r_id] = [e('server').selectedIndex, e('bitrate').selectedIndex]; window.localStorage.setItem('config', JSON.stringify(config)); if (!radio.paused) fc = true; radioStart(); } e('play').onclick = function () { if (r_id) if (radio.paused) radioStart(); else radioStop(); }; Приложение 4Иллюстрации внешнего вида проекта Главная страница проекта  Страница с информацией о радиостанции «Спорт FM»  |
Похожие:
 | | ... | |
| Ууд: самостоятельное выделение и формулирование познавательной цели; постановка и формулирование проблемы, самостоятельное создание... |  | Петрунин В. В. Проблемы экономической оценки месторождений полезных ископаемых и установления размеров платежей за пользование недрами... |
| Актуальные проблемы гражданского процесса: Учебно-методическое пособие. М. А. Гранат, Тольятти: тгу, 2012. с. 26 | | Учебная дисциплины «Актуальные проблемы «холоднойвойны» предусмотрена компетентно- ориентированным учебным планом по направлению... |
| П18 Профессиональная подготовка будущих учителей: проблемы, опыт, перспективы: Сб науч ст. Саратов: иц «Наука», 2012. 224 с | | Демографическое развитие России: проблемы и перспективы: Материалы межрегиональной школы-семинара молодых ученых (Уфа, 27 июня 2008... |
| Проблемы филологического образования: Сб науч тр. / Отв ред проф. Л. И. Черемисинова; ред. Тарасова И. А., О. Я. Гусакова. — Вып.... | | «Постановка малоимущих граждан, проживающих на межселенных территориях Усть-Кутского муниципального образования на учет в качестве... |