Аудио плеер на основе HTML5 и jQuery

Опубликовано admin - вт, 04/17/2018 - 19:23

Сегодня я расскажу как сделать интересный вариант плеера на основе html 5 и jQuery.

Плеер будет поддерживать следующие функции:

  • перемотка
  • старт/стоп
  • пауза
  • индикатор оставшегося времени
  • индикатор загрузки файла

В итоге Вы научитесь не только делать кросбраузерный плеер, но простой плагин на jQuery, так как плеер мы будем подключать как плагин jQuery. В чём основное отличие плагина jQuery от простого javascript кода реализующегося те же функции - плеер может создаваться неоднократно на странице. То есть написав:

С помощью функции "checknav" нужно проверять величину прокрутки окна, в зависимости от чего добавлять CSS класс или удалять его. Переменные ds_loaded.sc и ds_loaded.sback нужны для предотвращения циклического запуска кода, который может быть и не таким простым, например можно добавить функции jQuery анимации.

Структура меню может быть любой, с учетом его горизонтального расположения, для примера возьмём стандартную разметку меню из Joomla 2.5:

плагин правильно подключится дважды, как на изображении. В плагин jQuery мы передаём два параметра первый - наименование функции (init) содержащейся в плаигне, второй объект, содержащий опции плагина ({file:'250_m',t:'m'}). Где file имя файла, t - тип плеера, он может быть розовым (w) или синим (m). Сразу скажу, все графические элементы плеера свободны для использования и распространения, да и плеер распространяется на лицензии GNU GPL 2. То есть у Вас есть всеобъёмлющий набор прав по распоряжению исходными материалами плеера.

Для его работы ипользуется следующя hrml разметка::

Итак, с чего начать, во-первых, чтобы все было понятно, - с того, что в плеере будут содержаться различные вычисления, касающиеся обработки пакетных данных, так как файлы, загружаемые в тег audio загружаются в браузер пользователя порциями или пакетами, точнее в буфер браузера.

Для начала не забудьте подключить jQuery! Затем пишите плагин внутри обработчика события загрузки страницы:

Любой плагин jQuery расширяет его, для это есть стандартная функция jQuery $.fn.extend:

Содержимое $.fn.extend для нашего плагина будет следующим:

В общем здесь нет ничего сложного, мы добавляем опции плагина и запускаем для каждого объекта this отдельный плагин, название плагина я выбрал "audioplayer". Основа - готова!

Далее код плагина. Сперва я приведу его целиком, затем объясню отдельные части этого кода.

Методы плагина, запускаются следующим кодом, их два (init, remove), фактически в плигне используется один (init):

Функция acteviHidden необходима для присоединения к форме скрытого элемента input, в котором будет содержаться значение типа плагина (m или w). Думаю эту функцию можно легко приспособить для создания других скрытых полей с нужной вам информацией, если Вам нужно использовать плееры как внутри тега form. Особое внимание я хотел бы уделить процессу буферизации данных, так как он отличается от обычных способов отслеживания загрузки файла. Для каждого плеера буферизация начинается с события $('.track',container).bind('progress'..... внутри которого данные о буфере помещаются в массив, который затем используется при расчётах процента загрузки аудио файла, ниже приведён код этого процесса:

Остальной код плеера связан с различными типами bind функций $('.track',container).bind('click',....., по просту говря эти функции отслеживают события нажатия графических элементов плеера, - старт, стоп, перемотка, чекбокс. Разобраться с ними Вам придётся самостоятельно, так как в них нет ничего сложно и они схожи по логике выполнения.

На разработку сайта! Скидки до 20%!