Створюємо аудіоплеєр для нашого сайту

Що нам необхідно
структура HTML
Активація аудіо плеєра
Створюємо свій стиль
Назва аудіо
GUI контейнера
GUI блоку управління
Кнопки відтворення і паузи
Перемотка і рівень гучності

До сих пір мені пригадуються 2000-і роки, коли відтворення музики або відео на сайті було обмеженим. Сьогодні ж ситуація сильно змінилася, в нашому розпорядженні є такі сайти як last.fm, Youtube ...

Як ви вже зрозуміли з назви даного поста, сьогодні ми займемося створенням власного веб аудіо плеєра. Якщо ви займаєтеся подкастинг і хочете створити плеєр, який буде вписуватися в дизайн вашого сайту, цей урок спеціально для вас.

Дизайн плеєра був запозичений з сайту Dribbble .

Що нам необхідно

Перед тим як приступити до створення плеєра, нам треба визначитися з інструментами, які ми будемо для цього використовувати: jPlayer , jQuery і іконки FontAwesome .

jPlayer є jQuery плагін, так що нам для початку, знадобиться завантажити jQuery останньої версії. Також нам знадобляться іконки для інтерфейсу плеєра.

Після скачування потрібних нам бібліотек, підключаємо їх до папки нашого проекту. Пишемо код підключення для jquery.js, jquery.jplayer.min.js і таблиць стилів:

Таблиця стилів normalize.css призначена для скидання деяких CSS налаштувань браузерів, щоб наш дизайн був якомога більше універсальний. У style.css ми закинемо наші власні стилі.

структура HTML

Тепер давайте приступимо до написання html коду, який потрібен для роботи плеєра. Тут нам необхідно створити загальний div контейнер і поставити йому id = jquery_jplayer_1. Надалі значення даного атрибута ми будемо використовувати при налаштуванні jPlayer.

Йдемо далі і створюємо елементи з класами jp-play, jp-pause, jp-mute і jp-unmute, для створення кнопок контролю за відтворенням аудіо. Для початку, я раджу вам не експериментувати з власними стилями для цих класів, а залишити все як є.

<Div id = "jquery_jplayer_1" class = "jp-jplayer"> </ div> <div id = "jp_container_1" class = "jp-audio"> <div class = "jp-type-single"> <div class = "jp-title"> <ul> <li> TEDxPhoenix - Kelli Anderson - Disruptive Wonder for a Change </ li> </ ul> </ div> <div class = "jp-gui jp-interface"> <ul class = "jp-controls"> <li> <a href = "javascript :;" class = "jp-play" tabindex = "1">? </a> </ li> <li> <a href = "javascript :;" class = "jp-pause" tabindex = "1">? </a> </ li> <li> <a href = "javascript :;" class = "jp-mute" tabindex = "1" title = "mute">? </a> </ li> <li> <a href = "javascript :;" class = "jp-unmute" tabindex = "1" title = "unmute">? </a> </ li> </ ul> <div class = "jp-progress"> <div class = "jp-seek- bar "> <div class =" jp-play-bar "> </ div> </ div> </ div> <div class =" jp-time-holder "> <div class =" jp-current-time " > </ div> </ div> <div class = "jp-volume-bar"> <div class = "jp-volume-bar-value"> </ div> </ div> <div class = "jp- no-solution "> <span> Update Required </ span> To play the media you will need to either update your browser to a recent version or update your <a href =" http://get.adobe.com/flashplayer/ "target =" _ blank "> Flash plugin </a>. </ Div> </ div> </ div>

У наведеній HTML структурі ви знайдете подібні набори символів:?,?,? ? Це спеціальні HTML вставки, які відобразять нам іконки FontAwesome.

Активація аудіо плеєра

Оскільки потрібний нам HTML код вже готовий, наступним кроком буде активація плеєра в спеціальному скрипті. В наш приклад ми додамо кілька аудіо файлів одного і того ж випуску в форматі mp3 і ogg. Формат ogg ми можемо використовувати для кросбраузерності, особливо для Firefox і Opera.

$ (Document) .ready (function () {$ ( "# jquery_jplayer_1"). JPlayer ({ready: function () {$ (this) .jPlayer ( "setMedia", {mp3: "audio / TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange .mp3 ", oga:" audio / TEDxPhoenix-KelliAnderson-DisruptiveWonderforaChange.ogg "});}, swfPath:" / js ", supplied:" mp3, oga "});});

Після додавання даного скрипта, плеєр по суті знаходиться в робочому стані. Якщо ми подивимося на код сторінки, то побачимо спеціально згенерований HTML5 тег <audio>

Створюємо свій стиль

У цій секції ми почнемо оформлення нашого плеєра. В першу чергу, підключимо шрифти і приберемо підкреслення у посилань.

@ Font-face {font-family: "FontAwesome"; src: url ( "fonts / fontawesome-webfont.eot"); src: url ( "fonts / fontawesome-webfont.eot? #iefix") format ( "eot"), url ( "fonts / fontawesome-webfont.woff") format ( "woff"), url ( "fonts / fontawesome- webfont.ttf ") format (" truetype "), url (" fonts / fontawesome-webfont.svg # fontAwesome ") format (" svg "); font-weight: 400; font-style: normal; } A {text-decoration: none; } .Jp-jplayer, .jp-audio {width: 420px; margin: 50px auto; }

Назва аудіо

Тут нічого такого особливого міняти ми не будемо, просто зробимо розмір тексту трохи менше, ніж він є.

.jp-title {font-size: 12px; text-align: center; color: # 999; } .Jp-title ul {padding: 0; margin: 0; list-style: none; }

GUI контейнера

GUI контейнеру плеєра було поставлено клас jp-gui. Результат наших перетворень ви можете глянути в демо. Тут ми застосовуємо градієнти і спеціальні кольору # f34927, # dd3311. Також зверніть увагу на те, що опція position нашого div-а містить значення relative.

.jp-gui {position: relative; background: # f34927; background: -moz-linear-gradient (top, # f34927 0%, # dd3311 100%); background: -webkit-gradient (linear, left top, left bottom, color-stop (0%, # f34927), color-stop (100%, # dd3311)); background: -webkit-linear-gradient (top, # f34927 0%, # dd3311 100%); background: -o-linear-gradient (top, # f34927 0%, # dd3311 100%); background: -ms-linear-gradient (top, # f34927 0%, # dd3311 100%); background: linear-gradient (to bottom, # f34927 0%, # dd3311 100%); filter: progid: DXImageTransform.Microsoft.gradient (startColorstr = '# f34927', endColorstr = '# dd3311', GradientType = 0); -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1); box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1); border-radius: 3px; overflow: hidden; margin-top: 10px; }

GUI блоку управління

GUI блоку управління являє собою кнопки контролю за відтворенням аудіо: пауза, гучність і так далі. Тут ми знову пограємо з шрифтами, зробимо колір тексту білим і додамо тенюшки.

.jp-controls {padding: 0; margin: 0; list-style: none; font-family: "FontAwesome"; text-shadow: 1px 1px 0 rgba (0,0,0,0.3); } .Jp-controls li {display: inline; } .Jp-controls a {color: #fff; }

Кнопки відтворення і паузи

Розташування даних кнопок ми зробимо абсолютним. Саме для цього раніше контейнер, де вони знаходяться, ми зробили релатівності. Таким чином, вони будуть розташовуватися згідно з позицією свого батьківського елемента.

.jp-play, .jp-pause {width: 60px; height: 40px; display: inline-block; text-align: center; line-height: 43px; border-right: 1px solid # d22f0f; } .Jp-controls .jp-play: hover, .jp-controls .jp-pause: hover {background-color: # de3918; } .Jp-mute, .jp-unmute {position: absolute; right: 55px; top: 0; width: 20px; height: 40px; display: inline-block; line-height: 46px; } .Jp-mute {text-align: left; } .Jp-time-holder {color: #FFF; font-size: 12px; line-height: 14px; position: absolute; right: 90px; top: 14px; text-shadow: 1px 1px 0 rgba (0,0,0,0.3); }

Перемотка і рівень гучності

Дані елементи виглядають абсолютно однаково, тільки мають різний розмір. Область перемотування зазвичай більше, ніж область рівень гучності:

.jp-progress {background-color: # 992E18; border-radius: 20px 20px 20px 20px; overflow: hidden; position: absolute; right: 133px; top: 15px; width: 210px; -webkit-box-shadow: 0 1px 1px 0 rgba (0,0,0,0.2) inset; box-shadow: 0 1px 1px 0 rgba (0,0,0,0.2) inset; } .Jp-play-bar {height: 12px; background-color: #fff; border-radius: 20px 20px 20px 20px; } .Jp-volume-bar {position: absolute; right: 10px; top: 17px; width: 45px; height: 8px; border-radius: 20px 20px 20px 20px; -webkit-box-shadow: 0 1px 1px 0 rgba (0,0,0,0.1) inset; box-shadow: 0 1px 1px 0 rgba (0,0,0,0.1) inset; background-color: # 992E18; overflow: hidden; } .Jp-volume-bar-value {background-color: #fff; height: 8px; border-radius: 20px 20px 20px 20px; }

От і все. Тепер ви можете насолодитися аудіо плеєром в демо або завантажити исходник.

Lt;/a> </ li> <li> <a href = "javascript :;" class = "jp-pause" tabindex = "1">?
Lt;/a> </ li> <li> <a href = "javascript :;" class = "jp-mute" tabindex = "1" title = "mute">?
Lt;/a> </ li> <li> <a href = "javascript :;" class = "jp-unmute" tabindex = "1" title = "unmute">?
Eot?

Статьи