Автор

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

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

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


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

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


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

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


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

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


105 Публикаций

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close