Адаптивный аудио-плеер для сайта

jQuery 19.04.2013

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

ДЕМО

ИСХОДНИКИ

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

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

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

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

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

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

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

Шаг 1. HTML

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

<audio src="audio.wav" preload="auto" controls></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>

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

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

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

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

Вы можете указать элементы при помощи соответствующего метода из широкого ассортимента селекторов. К примеру: «audio… а затем использовать $( '.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-код. Вот что мы имеем.

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

audioplayer-playing – воспроизводится аудио (то есть, div);

audioplayer-mute – звук отключен (то есть, div);

audioplayer-novolume – недоступны контроллеры звука (то есть, div).

Шаг 3. CSS

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

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

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

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

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

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

Материал взят из зарубежного источника - tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player и представлен исключительно в ознакомительных целях.