Аудиоплеер своими руками

Радио онлайн без рекламы. Создаем свой аудио плеер.

Всем привет. Обычно включаю музыку для фона и работаю за компьютером. Сидел недавно, пытался найти музыку в сети, как обычно – чтобы включить для фона. И что-то решил поискать какое-нибудь радио, потому что плейлисты из соцсетей поднадоели. Я сделал для себя открытие, что есть радиостанции онлайн, на которых нет ни рекламы, ни ведущих. Вообще ничего нет, просто музыка сплошным потоком в соответствии с жанром. Наверно многие про это знали, но я нет. Нашел несколько радиостанций в нужном жанре – понравилось. Это не плейлист с повторяющейся музыкой. Играет и играет разная музыка.

Проблема в том – что рассредоточены станции по сайтам. Захотел собрать в некоторую коллекцию. Немного погуглил в поиске плеера. Не нашел ничего подходящего – напишу свой. Да и лишние плагины — лишняя нагрузка на блог. JavaScript не такой уж и сложный язык. Итак, поехали.
Создал страницу на сайте, на которой буду размещать радиостанции – здесь.

Общая структура (High level design)

HTML5 умеет работать с потоковым видео/аудио. Никаких флешей колхозить не нужно. Логика плеера написана на JavaScript. Принцип такой:

  1. у нас есть графические элементы – кнопка play, регулировка громкости и т.д.
  2. у нас есть объект audio, который является частью того же HTML, как и графика
  3. JavaScript, который обрабатывает клики мышкой и перенастраивает объект audio (меняет радиостанцию, меняет громкость), а так же перенастраивает графическую часть (при нажатии play меняет картинку, отрисовывает изменение громкости и т.д.).
  4. есть еще одна фишка, которую я пока не придумал, как решить – отображать рядом со станцией название играющего трека. Я пока сильно не углублялся, но вроде как в потоковом аудио есть служебная информация, которую можно спарсить. Еще, как вариант, задействовать PHP движка WordPress и просто запрашивать у нужного сервера воспроизводящего звук – какая песня в эфире.

JavaScript аудио плеера

Во-первых создадим на странице элемент <audio>, который будет воспроизводить наш поток, цепляем к нему source (позже будем в него назначать адрес потока аудио). И добавляем обработчик события «canplay».  Здесь немного поясню. После того, как пользователь нажал кнопку PLAY, в аудио объект назначается источник потока (ссылка на сервер радиостанции). После этого аудио объект начинает буферизировать данные потока (предварительная загрузка некоторого количества данных). О том, что буферизация завершена и можно начать воспроизведение нам сообщиться событием «canplay».  Обычно буферизация сопровождается специальной анимированной картинкой — вращающиеся шарики или что-нибудь в этом духе.  О том, что можно скрыть эту анимацию мы так же узнаем от этого события.

elemAudio = document.createElement("audio");
var elemBody = document.body;
elemBody.appendChild(elemAudio);
var elemSource = document.createElement("source");
elemSource.type = "audio/mpeg";

elemAudio.volume = 1;
elemAudio.source = elemSource;
elemAudio.appendChild(elemSource);
elemAudio.addEventListener("canplay", runAudio, false);

Я продолжаю работу над этой задачей, скоро статья будет дополнена…
Разработанный плеер будет выложен в свободном доступе для всех желающих абсолютно бесплатно…

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.