Аудио плеер на основе 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',....., по просту говря эти функции отслеживают события нажатия графических элементов плеера, - старт, стоп, перемотка, чекбокс. Разобраться с ними Вам придётся самостоятельно, так как в них нет ничего сложно и они схожи по логике выполнения.

Взаимосвязанные материалы

# 1. О сайте (суббота, июля 6, 2019 - 21:51 ),

Сайт slyweb.ru содержит многочисленную информацию о разработке сайтов и их поддержки в рабочем состоянии.

На сегодняшний день slyweb.ru представляет следующие услуги:

читать...
# 2. Как написать первый плагин на jQuery, с использованием ajax? (воскресенье, июня 3, 2018 - 10:52 ),

Возможно рано или поздно Вам придётся писать серьёзные скрипты на jQuery, поскольку jQuery наиболее популярен в последнее время. читать...

# 3. jQuery для начинающих! (пятница, июня 1, 2018 - 21:28 ),

Возможно Вам интересно спросить: "Почему у меня возникла мысль написать подробное мини-руководство об ajax на jQuery?". читать...

# 4. jQuery - самое нужное! Карусель! (воскресенье, мая 20, 2018 - 19:22 ),

Здравствуйте уважаемые читатели, продолжаем цикл статей о самом нужном в jQuery. Сегодня я научу Вас делать jQuery карусель. читать...

# 5. Аудио плеер на основе HTML5 и jQuery (вторник, апреля 17, 2018 - 19:23 ),

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

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

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