Автор

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

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

Представление мини-библиотеки экспериментальных эффектов прокрутки страницы.


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close