—»     —»   Адаптивный аудио-плеер, работающий на сенсорных экранах
  Раздел: Аудио   Нет комментариев  

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



Бывало ли у вас такое чувство, когда вы испытываете райское наслаждение в Photoshop (или любом другом приложении с не столь завышенной ценой), а затем переработка этого дизайна в разметку в стиле «select», «input type="radio|checkbox|file" /» возвращает вас обратно в суровую реальность? Наверное потому, что когда создавалась Земля, людей не наделили способностью подсознательно разрабатывать CSS-код. И слабенький элемент «audio» нам тоже не сильно помогает. Каждый браузер, совместимый с HTML5, дает нам разное визуальное представление этого элемента.

Но у нас также есть события, методы и параметры этого самого элемента «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">&hellip;</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;
}

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

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

Посмотреть демо | Скачать исходник
Внимание! У вас нет прав для просмотра скрытого текста.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: адаптивный дизайн, jQuery, audio
Опубликовал Design FactoRy   Прочитано (раз): 7578   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц October по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код




















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Январь 2017    »
ПнВтСрЧтПтСбВс
 1
2345678
9101112131415
16171819202122
23242526272829
3031