Автор

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

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


 

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

 

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

 

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



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

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

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


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

Сегодня мы решили подготовить хорошиую css3 галерею. Без использования javascript. Да, да, вы правильно поняли. Сегодня мы не будем использовать скрипты. Это будет чистая CSS3 фото галерея. Фотографии в галерее будет увеличиваться, если мы будем нажимать на них мышью.


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

У вас раньше появлялось неприятное чувство, когда ваши подписи плохо походили к цветам кнопок, панелей, или просто текст слабо контрастировал с фоном страницы? С помощью CSS тени эту проблему легко решить, используя свойство text-shadow, чтобы улучшить читабельность и контрастность текста.


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

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


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close