Автор

08 04.2013
Aудиоплеер для сайта на jQuery и CSS3

Aудиоплеер для сайта на jQuery и CSS3


 

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

 

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

 

Для создания данного плеера мы будем использовать скрипт MediaElement.js. Сначала нам необходимо создать разметку HTML, при этом также подключаем скрипты и стили:

<html lang="en">
<head>
<meta charset="utf-8">
<title>Создаем аудиоплеер для сайта на jQuery | Демонстрация для сайта RUDEBOX</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
 <script src="js/mediaelement-and-player.min.js"></script>
 <link rel="stylesheet" href="css/style.css" media="screen">
</head>
<body>
 <div class="audio-player">
 <h1>Demo - Preview Song</h1>
 <img class="cover" src="img/cover.png" alt="">
 <audio id="audio-player" src="media/demo.mp3" type="audio/mp3" controls="controls"></audio>
 </div>

 


После этого вызываем сам плагин, это делаем с помощью команды:

$(document).ready(function() {
 $('#audio-player').mediaelementplayer({
 alwaysShowControls: true,
 features: ['playpause','volume','progress'],
 audioVolume: 'horizontal',
 audioWidth: 400,
 audioHeight: 120
 });
 });

Следующим этапом будет стилизация плеера с помощью CSS.

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

.audio-player,
.audio-player div,
.audio-player h1,
.audio-player a,
.audio-player img,
.audio-player span,
.audio-player button {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
}

 

Теперь давайте стиль полоски плеера, при этом мы установим ширину 400px и высоту 120px. Также добавим CSS3 градиент фона с закругленными углами.

div.audio-player {
	position: relative;
	width: 400px;
	height: 120px;

	background: #4c4e5a;
	background: -webkit-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -moz-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -o-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: -ms-linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);
	background: linear-gradient(top, #4c4e5a 0%, #2c2d33 100%);

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
}


Теперь рассмотрим основные элементы плеера (воспроизведение / пауза, отключение звука / включение звука) . Для этого мы зададим некоторые общие стили для кнопок, а затем мы установили фиксированную ширину и высоту. Мы позиционируем  кнопки "пауза / воспроизведение"  и "отключение / включение микрофона" кнопки в том же положении, при этом они будут переключать события:

.mejs-controls .mejs-button button {
	cursor: pointer;
	display: block;
	position: absolute;
	text-indent: -9999px;
}

.mejs-controls .mejs-play button,
.mejs-controls .mejs-pause button {
	width: 21px;
	height: 21px;
	top: 35px;
	left: 135px;
	background: transparent url(../img/play-pause.png) 0 0;
}

.mejs-controls .mejs-pause button { background-position:0 -21px; }

.mejs-controls .mejs-mute button,
.mejs-controls .mejs-unmute button {
	width: 14px;
	height: 12px;
	top: 70px;
	left: 140px;
	background: transparent url(../img/mute-unmute.png) 0 0;
}

.mejs-controls .mejs-unmute button { background-position: 0 -12px; }

 

Для стиля ползунка громкости мы зададим позиционирование, 200px ширина и высота 8px. Нам также необходимо установить цвет фона, тени и закругленные углы.

.mejs-controls div.mejs-horizontal-volume-slider {
	position: absolute;
	top: 71px;
	left: 165px;
	cursor: pointer;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-total {
	width: 200px;
	height: 8px;
	background: #212227;

	-webkit-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	-moz-box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);
	box-shadow: inset 0px 1px 0px rgba(0,0,0, .3), 0px 1px 0px rgba(255,255,255, .25);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}

 

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

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-current {
	position: absolute;
	width: 0;
	height: 6px;
	top: 1px;
	left: 1px;
	background: url(../img/volume-bar.png) repeat-x;

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
}


Теперь создадим сам ползунок песни который плавно изменяется с проигрыванием песни:

.mejs-controls div.mejs-time-rail { width: 400px; }

.mejs-controls .mejs-time-rail span {
	position: absolute;
	display: block;
	width: 400px;
	height: 5px;
	left: 0;
	bottom: 0;
	cursor: pointer;

	-webkit-border-radius: 0px 0px 2px 2px;
	-moz-border-radius: 0px 0px 2px 2px;
	border-radius: 0px 0px 2px 2px;
}

.mejs-controls .mejs-time-rail .mejs-time-total { background: #999999; }

.mejs-controls .mejs-time-rail .mejs-time-loaded {
	width: 0;
	background: #cccccc;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
	width: 0;
	background: #64b44c;
}

 

Далее создаем ручки для громкости, которые будут отображаться в виде стальных кругов:

.mejs-controls .mejs-time-rail .mejs-time-handle,
.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle {
	position: absolute;
	display: block;
	width: 12px;
	height: 14px;
	top: -4px;
	background: url(../img/handle.png) no-repeat;
}

.mejs-controls .mejs-horizontal-volume-slider .mejs-horizontal-volume-handle { top: -2px; }

 

Последним элементом будет добавление временного отрезка, который будет информировать о каждой прошедшей секунде песни:

.mejs-controls .mejs-time-rail .mejs-time-float {
	position: absolute;
	display: none;
	width: 33px;
	height: 23px;
	top: -26px;
	margin-left: -17px;
	background: url(../img/time-box.png);
}

.mejs-controls .mejs-time-rail .mejs-time-float-current {
	width: 33px;
	display: block;
	left: 0;
	top: 4px;

	font-family: Helvetica, Arial, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #666666;
	text-align: center;
}

 

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


vk.com/club.ssdru

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


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

05 04.2013
Aудиоплеер для сайта на jQuery и CSS3

Как известно визуальное оформление продукта влияет на его спрос. Точнее чем удобнее пользователю работать с интерфейсом, тем возрастает интерес к ресурсу. Многие веб-интерфейсы включают в себя динамические переключатели вида. На странице продукции или в архиве блога вы наверняка встречали кнопки, предназначенные для переключения вида разметки между списком или небольшой сеткой. В нашем сегодняшнем посте мы рассмотрим разработку простенького примера при помощи основных параметров CSS и некоторых команд jQuery.


17 04.2013
Aудиоплеер для сайта на jQuery и CSS3

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


03 01.2016
Aудиоплеер для сайта на jQuery и CSS3

Отображать город посетителя для улучшения конверсионных показателей магазина. Готовый код вставки в любое место сайта с указанием города, региона и страны. Я перелапатил много скриптов, но именно этот оказался самым простым и результативным!


30 10.2018
Aудиоплеер для сайта на jQuery и CSS3

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close