Skip to content

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

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

Знакомо ли Вам чувство, когда Вы создаете дизайн интерфейса в Photoshop, Gimp, или любом другом графическом редакторе, а затем пытаетесь создать из этого разметку для <select>, <input type=»radio|checkbox|file» /> и… Вы возвращаетесь обратно в суровую реальность. Все это потому, что для этих элементов нет стилей CSS. И элемент <audio> ничем не отличается. Каждый HTML5-совместимый браузер имеет свои собственные визуальные интерпретации элемента. Но все же мы можем манипулировать со стилями для этих элементов благодаря JavaScript.

Эксперименты это хорошо, но все это будет бесполезным без практического применения. Несмотря на то, что видео-контент является более популярным в Интернете, но есть такие случаи, когда звук является основным содержанием, например, подкасты.

Как это работает?

Плагин jQuery сам по себе будет в значительной степени бесполезными без соответствующего CSS, который отвечает за внешний вид и некоторые функции приведены ниже. Это крошечный, легкий плеер будет делать одну вещь: проигрывать звуковой файл.

Предупреждаю: с его помощью не создать огромную аудио-библиотеку, типа iTunes! Повторюсь: плеер создан только для добавления аудио на сайт.

Плагин заменяет <audio> элементы на HTML разметку плеера и добавляет нужные обработчики событий JavaScript.

Особенности

Адаптивность — смартфон, планшет или тридцати дюймовый монитор: плеер хорошо работает на любых размерах экрана.

Работает с сенсорными экранами — это реально и вы можете это проверить. Плеер будет работать от прикосновений. Все, что вы можете делать мышью, вы также можете сделать с помощью пальца.

Работоспособность:
1) При отключенном JavaScript будет работать плеер браузера.
2) Кнопка громкости прячется, когда отсутствует регулятор громкости (плохо для IOS).
3) Если браузер не поддерживает элемент <audio> целиком или любую из предоставленных аудио файлов, плеер изящно деградирует до одной кнопки (Play / Pause).

Управление
1) Кнопки Play / Pause и управления прогрессом воспроизведения;
2) Кнопки управления громкостью;
3) Индикация загрузки аудио (буферизация).

Некоторые особенности

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

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

Легкость
Сжатая версия плагина весит всего 4 КБ!

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

Достаточно теории, пусть начнется самое интересное!

HTML

Ничего особенного в разметке нет, обычное использование тега <audio> с некоторыми из атрибутов, описанных в разделе особенности выше:

<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-й линии применяется замена аудио элементов. Если вы знаете jQuery, то можно применить плагин только к определенному классу: <audio class=»music»… а затем использовать $( ‘.music’ ) .

Кроме того, аудиоплеер имеет некоторые дополнительные параметры. Наиболее важным из них является classPrefix. С их помощью легко изменить классы для плеера:

$( 'audio' ).audioPlayer(
{
classPrefix: 'player', // Значение по умолчанию: 'audioplayer'
strPlay: 'Play', // значение по умолчанию: 'Play'
strPause: 'Pause', // значение по умолчанию: 'Pause'
strVolume: 'Volume', // значение по умолчанию: 'Volume'
});

Волшебство

Шучу, ничего магического здесь нет. Сейчас начнется объяснение очень важного момента. При вызове плагина, он заменяет <audio> элемент полностью другим кодом HTML. Есть два типа такого кода:
1) Полная замена — когда элемент audio поддерживается браузером:

<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>

2) И частичная замена — когда элемент audio не поддерживается браузером:

<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>
player2

К сожалению, в данной ситуации дружба между JavaScript и <embed /> не велика. Таким образом, плеер изящно деградирует до одной кнопки (воспроизведение и пауза) плеера. И это хорошо для старых браузеров.

CSS

Все, что осталось, это применить некоторые стили к разметке аудиоплеера! Чтобы сэкономить Ваше время я не буду использовать градиенты, тени и другие модные свойства в статье (но вы найдете его в демо-версии). Это означает, что если вы примените CSS из статьи, плеер будет выглядеть следующим образом:

player3

Мы будем идти слева направо по плееру с описанием каждой зоны в следующем порядке:
1) Родительский элемент и внутренняя структура
2) Кнопка воспроизведения / паузы
3) Таймеры
4) Индикатор загрузки
5) Регулятор громкости

Почти все размеры единиц будут в em, чтобы обеспечить масштабируемость. В комментариях кода будут показаны равные им значения в пикселях.

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

*
{
-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;
}

/ * Для неполной версии плеера (читай про адаптивность) * /
.audioplayer-mini
{
width: 2.5em; /* 40 */
margin: 0 auto;
}

/ * Внутреннее расположение элементов * /
.audioplayer > div
{
position: absolute;
}

Если вы никогда не использовали box-sizing: border-box, то это самое подходящее время, чтобы начать. Плюс к этому добавляя для слоев первого уровня position: absolute, мы добьемся отзывчивости. Пояснения в схеме:

player4

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

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

.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;
}

/ * иконка "Играть", когда звук не проигрывается * /
.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 */
}

/ * иконка "Пауза", когда звук проигрывается * /
.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%;
}

/* Иконка "Громкости" */
.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
{
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 );
}

/* Индикатор громкости */
.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;
}

Вот и все! Проверьте демо, если вы еще не скачали исходник. Поделитесь своими мыслями, взглядами и опытом в комментариях. Спасибо.

Оригинал статьи: http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/