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

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



Бывало ли у вас такое чувство, когда вы испытываете райское наслаждение в 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   Прочитано (раз): 8126   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Швейцарские часы официальный сайт
Сеть магазинов швейцарских часов. Интернет магазин часов
1039.alltrades.ru
Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Июнь 2017    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
2627282930