Все для веб-дизайнера
Создаем аудиоплеер для сайта на jQuery и CSS3
Без музыки в наше время трудно представить себя и весь мир, популярные треки заполонили все, даже блогеры размещают аудиоплееры у себя на ресурсах чтобы радовать пользователя интересной мелодией, тем самым поднимая им настроение, но если вы делаете сайт самостоятельно, и хотели бы придать сайту музыкальности тогда этот урок для вас. В данном посте мы рассмотрим как создать простой аудиоплеер с помощью плагина jquery. Данный плеер сделан в темных тонах, тем не менее его легко редактировать, и подогнать под свой дизайн.
Для создания данного плеера мы будем использовать скрипт MediaElement.js. Сначала нам необходимо создать разметку HTML, при этом также подключаем скрипты и стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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> |
После этого вызываем сам плагин, это делаем с помощью команды:
|
1 2 3 4 5 6 7 8 9 |
$(document).ready(function() { $('#audio-player').mediaelementplayer({ alwaysShowControls: true, features: ['playpause','volume','progress'], audioVolume: 'horizontal', audioWidth: 400, audioHeight: 120 }); }); |
Следующим этапом будет стилизация плеера с помощью CSS.
Прежде всего, давайте добавим сброс стилей для всех элементов, которые мы будем использовать в контейнере.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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 градиент фона с закругленными углами.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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; } |
Теперь рассмотрим основные элементы плеера (воспроизведение / пауза, отключение звука / включение звука) . Для этого мы зададим некоторые общие стили для кнопок, а затем мы установили фиксированную ширину и высоту. Мы позиционируем кнопки «пауза / воспроизведение» и «отключение / включение микрофона» кнопки в том же положении, при этом они будут переключать события:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
.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. Нам также необходимо установить цвет фона, тени и закругленные углы.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.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; } |
Затем нам нужно задать стиль «текущей позиции песни» , делать это мы будем с помощью фонового изображения, закругленных углов и т.д.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.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; } |
Теперь создадим сам ползунок песни который плавно изменяется с проигрыванием песни:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.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; } |
Далее создаем ручки для громкости, которые будут отображаться в виде стальных кругов:
|
1 2 3 4 5 6 7 8 9 10 11 |
.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; } |
Последним элементом будет добавление временного отрезка, который будет информировать о каждой прошедшей секунде песни:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
.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; } |
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
| Опубликовал Cooper 18.05.2012 в 23:18, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
