Как создать адаптивный аудио-плеер для сайта RUDEBOXАдаптивность играет большую роль в современном веб-дизайне. Создатель сайта должен это прекрасно понимать, ведь хороший дизайн это половина успешного сайта. В каждого из посетителей свои потребности, кто-то заходит из планшета, кто-то из смартфона, а кто-то из ноутбука, при этом надо учитывать, что все эти устройства имеют различное разрешение, и сайт просто обязан правильно отображаться на ним. Каждая деталь сайта должна подстраиваться под разрешения устройства. В данном уроке мы рассмотрим, как создать замечательный, адаптивный аудио-плеер.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

Без необходимости применять media queries у вас в распоряжении будет простой гибкий шаблон. Плеер представляет собой довольно маленький объект, и это значительно облегчает задачу. Дальше мы более подробно рассмотрим все это.

Поддержка сенсорное управления

Плеер можно использовать для сенсорных экранов. Все, что можно делать курсором, вы сможете делать пальцем. Каждое действие имеет отдельные touch-события.

Не используем изображения

В процессе разработки не использовались изображения. Мы будем использовать только чистый код CSS.

Плеер работает в соответствии с определенными атрибутами элемента «audio»:

  • src определяет расположение (url) аудио-файла;
  • атрибут autoplay boolean определяет, воспроизводить ли аудио-файл, когда он уже загружен;
  • атрибут loop boolean определяет, воспроизводить ли аудио-файл снова, когда его воспроизведение будет завершено;
  •  preload определяет, как аудио-файлы должны быть загружены, и имеет значения: auto/metadata/none.

Шаг 1. HTML

Мы будем использовать тег «audio» с некоторыми атрибутами из вышеприведенного раздела о родственных свойствах.

Вы можете автоматически запустить воспроизведение файла,при его загрузке, а затем сделаем цикличную прокрутку.

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

С этим шагом вы завершили, переходим к следующему.

Шаг 2. Запуск плагина

Для того чтобы плагин сработал добавим немного javascript в форме строк кода.

Вы можете указать элементы при помощи соответствующего метода из широкого ассортимента селекторов. К примеру: «audio… а затем использовать $( ‘.music’ ).

Кроме этого элемент audioPlayer имеет несколько опциональных параметров. Один из самых важных называется classPrefix. Введенное значение становится именем класса для родительского элемента, и префиксом имени класса для дочерних элементов.

Когда вы вызываете плагин, он полностью заменяет элемент «audio» и получаем совершенно новый HTML-код. Вот что мы имеем.

  •  audioplayer-playing – воспроизводится аудио (то есть, div);
  •  audioplayer-mute – звук отключен (то есть, div);
  •  audioplayer-novolume – недоступны контроллеры звука (то есть, div).

Как создать адаптивный аудио-плеер для сайта | RUDEBOX

Шаг 3. CSS

По началу мы не будем использовать градиенты, тени, и другие забавные причуды в коде, приведенном ниже  (в демо вы сможете их увидеть). Для стилизации необходимо добавить следующий код.

Теперь добавим кнопку воспроизведения и паузы.

Далее будут таймеры и их стилизация.

Последним шагом будет регулятор громкости.

Следует добавить что плеер отлично работает на мобильных устройствах.

Вот и все. Готово!

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