Адаптивный аудио-плеер, работающий на сенсорных экранах

Но у нас также есть события, методы и параметры этого самого элемента «audio», которыми можно управлять посредством javascript.
Эксперименты – это почти всегда хорошо, но все эти эксперименты могут не стоить ни цента без практической реализации идей. Несмотря на тот факт, что сегодня в интернете наиболее популярным типом медиа-файлов является видео, случаются ситуации, когда аудио может сыграть главную роль и выступить в качестве основного контента. Возьмите в пример хотя бы подкасты или веб-сайты для музыкантов. Мы оказались немного в другой ситуации.

Один из проектов, над которым мы работали, представлял собой сервис IP-телефонии, основанный на облачных системах (VOIP). Мы разрабатывали веб-приложение, которое позволяло нашим клиентам управлять собственными телефонными звонками при помощи веб-браузера. Одно из свойств данного приложения представляло собой IVR (Interactive Voice Response – пер. «Интерактивный голосовой ответ»). Клиенты могли создавать собственные виртуальные меню, приписывая функции к кнопкам телефона и загружая аудио-файлы, проигрываемые во время звонка. Было бы неплохо дать нашим клиентам возможность проверять собственные загрузки, просто прослушивая их на ноутбуке или планшетнике? Именно поэтому мы и разработали jQuery-плагин для реализации адаптивного аудио-плеера с возможностью работы на сенсорных устройствах.

Плагин

Если говорить просто, то это jQuery-плагин. Пользователи jQuery, которые представляют собой большинство пользователей платформы javascript, будут рады добавить этот плагин в свою коллекцию. Сам JQuery-плагин будет бесполезным без соответствующего кода CSS, который отвечает за внешний вид и некоторые свойства плагина, приведенные ниже.

Предназначение

Не путайте этот плеер с медиа-центрами вроде iTunes и прочих. Он не похож на них. Это миниатюрный плеер с очень четким предназначением: воспроизведение отдельных аудио-файлов. Плеер разрабатывался под лозунгом: «не решайте несуществующих проблем». Вам не нужны комплексные плагины или непривлекательные Flash-плееры со множеством бесполезных функций для того, чтобы воспроизвести какой-то отдельный файл. Используйте инновационный подход, стремитесь к минимализму!

Как он работает

Плагин заменяет указанные элементы «audio», и дополняет их некоторыми событиями HTML и JS.

Свойства

Адаптивность

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

Сенсорное управление

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

Отзывчивость

* Отключена поддержка javascript? Не беспокойтесь, за вас всю работу сделает стандартный плеер браузера.
* Кнопка регулировки звука скрывается, когда регулировка громкости недоступна (минус для iOS).
* Когда браузер не поддерживает элемент «audio» или какой-то из представленных аудио-файлов, плеер элегантно трансформируется в однокнопочный (Воспроизвести/Остановить) плеер на основе элемента «embed /», который использует сторонний плагин (чаще всего Quick Time на Mac, Windows Media Player на Windows) для воспроизведения аудио.

Отсутствие изображений

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

Управление

* Строка прогресса и кнопки воспроизведения и паузы
* Регуляторы громкости
* Индикатор загруженных аудио-файлов (прошедших буферизацию).

Родственное свойство

Плеер, конечно же, не может быть родным, но он больше всего напоминает родной встроенный плеер. Во-первых, он работает в соответствии с определенными атрибутами элемента «audio»:

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

Если вы знакомы с элементом «audio», то вероятно удивитесь, куда делся атрибут controls. Дело в том, что в этом плагине ему нет места. Этот атрибут важен тогда, когда отключена поддержка javascript в браузере, либо когда плагин не может быть загружен, так как он отвечает за последующее отображение стандартного плеера.
Во-вторых, он принимает дочерние элементы «source», и воспроизводит первый, совместимый с браузером, аудио-файл.

Легкость

Уменьшенная версия плагина весит всего 4кб.

Как его использовать

Довольно теории! Давайте приступать!

HTML-код

Ничего особенного, просто типичное применение тега «audio» с некоторыми атрибутами из вышеприведенного раздела о родственных свойствах (помните то, что говорилось о контроллерах выше):

Код
<audio src="audio.wav" preload="auto" controls></audio>


Этот код позволит загрузить файл audio.wav. Будьте осторожны с предварительной загрузкой и не загружайте слишком много файлов за раз. Используйте значения none или метаданные для того, чтобы облегчить эффект.

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

Код
<audio src="audio.wav" preload="auto" controls autoplay loop></audio>

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

Код
<audio preload="auto" controls>
  <source src="audio.wav" />
  <source src="audio.mp3" />
  <source src="audio.ogg" />
</audio>

Запуск плагина

Мы уже проделали огромную работу над HTML, давайте добавим немного javascript в форме нескольких строк кода:

Код
<audio src="audio.wav" preload="auto" controls></audio>
<script src="jquery.js"></script>
<script src="audioplayer.js"></script>
<script>$( function() { $( 'audio' ).audioPlayer(); } );</script>

На 4-й строке плагин применяется к элементу audio. Вы также можете указать элементы при помощи соответствующего метода из широкого ассортимента селекторов. К примеру: «audio class="music"… а затем использовать $( '.music' )….

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

Код
$( 'audio' ).audioPlayer(
{
  classPrefix: 'player', // default value: 'audioplayer'
  strPlay: 'Play', // default value: 'Play'
  strPause: 'Pause', // default value: 'Pause'
  strVolume: 'Volume', // default value: 'Volume'
});

Магия

Шутка, на самом деле здесь нет ничего волшебного. Мы просто пытались привлечь ваше внимание к этому важному моменту. Когда вы вызываете плагин, он полностью заменяет элемент «audio» новым отрывком HTML-кода. Есть два типа кода:
Full – когда элемент audio и хотя бы 1 из заданных аудио-файлов совместимы с браузером:

Код
<div class="audioplayer">
  <audio src="audio.wav" preload="auto" controls></audio>
  <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
  <div class="audioplayer-time audioplayer-time-current">00:00</div>
  <div class="audioplayer-bar">
  <div class="audioplayer-bar-loaded"></div>
  <div class="audioplayer-bar-played"></div>
  </div>
  <div class="audioplayer-time audioplayer-time-duration">…</div>
  <div class="audioplayer-volume">
  <div class="audioplayer-volume-button" title="Volume"><a href="#">Volume</a></div>
  <div class="audioplayer-volume-adjust"><div><div></div></div></div>
  </div>
</div>

Более того, здесь также есть 3 неупомянутых имени классов, приписываемых к родительскому элементу в момент, когда:

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

Mini – когда элемент аудио не поддерживается, или ни один из заданных аудио-файлов не совместим с браузером:

Код
<div class="audioplayer audioplayer-mini">
  <embed src="audio.wav" width="0" height="0" volume="100" autostart="false" loop="false" />
  <div class="audioplayer-playpause" title="Play"><a href="#">Play</a></div>
</div>


К сожалению, в данной ситуации javascript и «embed /» не очень дружат. Следовательно, плеер преобразуется в упрощенный однокнопочный плеер. Тем не менее, такой вариант отлично подходит старым браузерам:



Помните абзац про адаптивность, приведенный выше? То была теория, а теперь переходим к практике.

CSS-код

Все, что осталось, это применить стили к HTML-коду, приведенному выше! Сэкономьте ваше время, и создайте CSS, нацеленный на решение задачи. Мы не будем использовать градиенты, тени, и другие забавные причуды в коде, приведенном ниже (хотя в демо вы сможете их увидеть). Это означает, что если вы примените CSS-код, приведенный ниже, то ваш плеер будет выглядеть так:



Некоторые заметки перед тем, как окунуться в CSS:

* Мы пройдемся по коду слева направо, объясняя каждую зону в следующем порядке:

- Родительский элемент и внутренняя структура
- Кнопка воспроизвести/пауза
- Таймеры
- Строка прогресса
- Регулятор громкости

* Практически все указатели размеров указаны в em для того, чтобы предоставить возможность масштабирования. В комментариях, следующих за em, вы сможете найти эквивалент в пикселях при размере шрифта 100% (16 пикселей).

Родительский элемент и внутренняя структура

Код
*
{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.audioplayer
{
  height: 2.5em; /* 40 */
  color: #fff;
  background: #333;
  position: relative;
  z-index: 1;
}
   
  /* fallback case (read Adaptiveness chapter) */
  .audioplayer-mini
  {
  width: 2.5em; /* 40 */
  margin: 0 auto;
  }
   
  /* inner elements positioning (helps to achieve responsiveness) */
  .audioplayer > div
  {
  position: absolute;
  }


Если вы никогда не использовали box-sizing: border-box, то сейчас самое время начать. Это техника, которая меняет ход всей игры. Имея этот параметр, и задав абсолютное позиционирование внутреннему элементу первого уровня, мы можем достичь адаптивности. Не совсем улавливаете? Тогда просмотрите следующую схему:



Миниатюрные элементы имеют фиксированную ширину, и это нормально, так как они миниатюрные, в то время как строка прогресса остается гибкой вместе с родительским элементом. Есть и другие адаптивные техники, подходящие к данному плееру.

Кнопка воспроизведения/паузы

Код
.audioplayer-playpause
{
  width: 2.5em; /* 40 */
  height: 100%;
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  left: 0;
}
  .audioplayer-mini .audioplayer-playpause
  {
  width: 100%;
  }
  .audioplayer-playpause:hover,
  .audioplayer-playpause:focus
  {
  background-color: #222;
  }
  .audioplayer-playpause a
  {
  display: block;
  }
   
  /* "play" icon when audio is not being played */
  .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a
  {
  width: 0;
  height: 0;
  border: 0.5em solid transparent; /* 8 */
  border-right: none;
  border-left-color: #fff;
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.5em 0 0 -0.25em; /* 8 4 */
  }
   
  /* "pause" icon when audio is being played */
  .audioplayer-playing .audioplayer-playpause a
  {
  width: 0.75em; /* 12 */
  height: 0.75em; /* 12 */
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -0.375em 0 0 -0.375em; /* 6 */
  }
  .audioplayer-playing .audioplayer-playpause a:before,
  .audioplayer-playing .audioplayer-playpause a:after
  {
  width: 40%;
  height: 100%;
  background-color: #fff;
  content: '';
  position: absolute;
  top: 0;
  }
  .audioplayer-playing .audioplayer-playpause a:before
  {
  left: 0;
  }
  .audioplayer-playing .audioplayer-playpause a:after
  {
  right: 0;
  }


Таймеры

Код
.audioplayer-time
{
  width: 4.375em; /* 70 */
  height: 100%;
  line-height: 2.5em; /* 40 */
  text-align: center;
  z-index: 2;
  top: 0;
}
  .audioplayer-time-current
  {
  border-left: 1px solid #111;
  left: 2.5em; /* 40 */
  }
  .audioplayer-time-duration
  {
  right: 2.5em; /* 40 */
  }
  .audioplayer-novolume .audioplayer-time-duration
  {
  border-right: 0;
  right: 0;
  }


Строка прогресса

Код
.audioplayer-bar
{
  height: 0.875em; /* 14 */
  background-color: #222;
  cursor: pointer;
  z-index: 1;
  top: 50%;
  right: 6.875em; /* 110 */
  left: 6.875em; /* 110 */
  margin-top: -0.438em; /* 7 */
}
  .audioplayer-novolume .audioplayer-bar
  {
  right: 4.375em; /* 70 */
  }
  .audioplayer-bar div
  {
  width: 0;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  }
  .audioplayer-bar-loaded
  {
  background-color: #555;
  z-index: 1;
  }
  .audioplayer-bar-played
  {
  background: #007fd1;
  z-index: 2;
  }


Регулятор громкости

Код
.audioplayer-volume
{
  width: 2.5em; /* 40 */
  height: 100%;
  border-left: 1px solid #111;
  text-align: left;
  text-indent: -9999px;
  cursor: pointer;
  z-index: 2;
  top: 0;
  right: 0;
}
  .audioplayer-volume:hover,
  .audioplayer-volume:focus
  {
  background-color: #222;
  }
  .audioplayer-volume-button
  {
  width: 100%;
  height: 100%;
  }
   
  /* "volume" icon */
  .audioplayer-volume-button a
  {
  width: 0.313em; /* 5 */
  height: 0.375em; /* 6 */
  background-color: #fff;
  display: block;
  position: relative;
  z-index: 1;
  top: 40%;
  left: 35%;
  }
  .audioplayer-volume-button a:before,
  .audioplayer-volume-button a:after
  {
  content: '';
  position: absolute;
  }
  .audioplayer-volume-button a:before
  {
  width: 0;
  height: 0;
  border: 0.5em solid transparent; /* 8 */
  border-left: none;
  border-right-color: #fff;
  z-index: 2;
  top: 50%;
  right: -0.25em;
  margin-top: -0.5em; /* 8 */
  }
  .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after
  {
  /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
  width: 0.313em; /* 5 */
  height: 0.313em; /* 5 */
  border: 0.25em double #fff; /* 4 */
  border-width: 0.25em 0.25em 0 0; /* 4 */
  left: 0.563em; /* 9 */
  top: -0.063em; /* 1 */
  -webkit-border-radius: 0 0.938em 0 0; /* 15 */
  -moz-border-radius: 0 0.938em 0 0; /* 15 */
  border-radius: 0 0.938em 0 0; /* 15 */
  -webkit-transform: rotate( 45deg );
  -moz-transform: rotate( 45deg );
  -ms-transform: rotate( 45deg );
  -o-transform: rotate( 45deg );
  transform: rotate( 45deg );
  }
   
  /* volume adjuster */
  .audioplayer-volume-adjust
  {
  width: 100%;
  height: 6.25em; /* 100 */
  cursor: default;
  position: absolute;
  left: 0;
  top: -9999px;
  background: #222;
  }
  .audioplayer-volume:not(:hover) .audioplayer-volume-adjust
  {
  opacity: 0;
  }
  .audioplayer-volume:hover .audioplayer-volume-adjust
  {
  top: auto;
  bottom: 100%;
  }
  .audioplayer-volume-adjust > div
  {
  width: 40%;
  height: 80%;
  background-color: #555;
  cursor: pointer;
  position: relative;
  z-index: 1;
  margin: 30% auto 0;
  }
  .audioplayer-volume-adjust div div
  {
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  background: #007fd1;
  }
  .audioplayer-novolume .audioplayer-volume
  {
  display: none;
  }


И на этом все! Вы можете посмотреть демо, и скачать исходный код.

Не забудьте поделиться вашими мыслями и опытом в комментариях! Спасибо!

  • FalleN

  • 5923

  • 1

  • 290

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!