Автор

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

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


 

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

 

ДЕМО
ИСХОДНИКИ

 

Без необходимости применять 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">&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>

 

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

 

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

 

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

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru



Статьи по темеjQuery

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

Во время поиска в Интернете для вдохновения мы столкнулись с красиво оформленным веб-сайтом Honda HR-V. Когда вы переходите от раздела к другому, переход украшается анимированной фигурой, созданной с помощью элемента <canvas>.


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

Если на вашем сайте пользователи имеют много возможностей, то скорее всего, что такой проект нуждается в создании раздела часто задаваемых вопросов с информацией для поддержки ваших пользователей, кроме контактной формы. Мы собрали простой в настройке шаблон частых вопросов, который можно использовать, чтобы построить свою справку по сайту с удобной навигацией. Благодаря отзывчивому интерфейсу и реализации с помощью CSS и JQuery мы получаем кроссбраузерный раздел, с поддержкой устройств где выключен JS.


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

В этом учебнике по HTML 5 и CSS 3 расскрываются стандарты нового  поколения разработки веб приложений на простых и работающих примерах. В наше время основные браузеры и мобильные устройства поддерживают спецификации HTML 5 и CSS 3. Эти новейшие технологии это основа последующего поколения интернет-разработок. Преимущества технологий нового поколения явны: удобство и комфорт для пользователя, для программиста - простота и удобства.


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

Все очень просто, т.к. для этого используются специальные программы-скрипты. И об одном из этих скриптов я и решил рассказать - Highlight.js, который кстати используется и на этом сайте.


105 Публикаций

Раскрутка в соцсетях

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


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close