HTML5 аудіо програвач
- Що нам знадобиться
- HTML розмітка
- Активуємо аудіо плеєр
- Стилізація аудіо плеєра
- Назва пісні
- інтерфейс плеєра
- контролери
- Кнопки відтворення і паузи
- Процес відтворення і повзунок гучності
Раніше, на початку 2000х, можливості відтворення аудіо або відео контенту онально, в браузері були сильно обмежені. Сьогодні, завдяки новим можливостям HTML5 і тегу <audio> ми можемо самі створювати аудіо та відео плеєри без будь-яких обмежень. Чим і займемося в цій статті 🙂
Що нам знадобиться
Перед тим як почати, необхідно підготувати кілька речей, які нам знадобляться для створення аудіо плеєра: jQuery, плагін jPlayer і шрифт FontAwesome.
Як тільки всі необхідні інструменти будуть готові - підключимо їх до нашої сторінці:
<Link rel = "stylesheet" href = "css / normalize.css"> <link type = "text / css" href = "css / style.css" rel = "stylesheet" /> <script type = "text / javascript "src =" js / jquery.js "> </ script> <script type =" text / javascript "src =" js / jquery.jplayer.min.js "> </ script>Як бачите крім бібліотек jQuery і jPlayer, ми вказали ще два CSS файлу. Перший - normalize.css буде скидати дефолтні стилі браузерів для більш кращого відображення плеєра, другий - style.css містить стилі для плеєра.
HTML розмітка
Прийшов час зайнятися HTML розміткою для нашого веб плеєра. Важливим моментом в розмітці є елемент з id = jquery_jplayer_1. Пізніше цей id ми передамо плагіну jPlayer за допомогою jQuery.
Крім того, всі CSS класи в розмітці, включаючи jp-play, jp-pause, jp-mute і jp-unmute - всі ці класи - стандартні класи, використовувані в jPlayer.
<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"> & # 61515; </a> </ li> <li> <a href = "javascript :;" class = "jp-pause" tabindex = "1"> & # 61516; </a> </ li> <li> <a href = "javascript :;" class = "jp-mute" tabindex = "1" title = "mute"> & # 61480; </a> </ li> <li> <a href = "javascript :;" class = "jp-unmute" tabindex = "1" title = "unmute"> & # 61478; </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> </ div>Якщо поглянути уважніше, то ви побачите незрозумілі символи 🙂: & # 61515;, & # 61516 ;, & # 61480; і & # 61478 ;. Ці символи - спеціальні HTML символи, які будуть використані для рендера іконок FontAwesome .
Активуємо аудіо плеєр
Тепер, коли розмітка готова, залишилося тільки активувати плеєр наступним скриптом. В цьому скрипті ми вкажемо файли для відтворення.
$ (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>, який автоматично генерується плагіном.
HTML5 audio playerСтилізація аудіо плеєра
Тепер прийшов час написати стилі для плеєра. Почнемо з оголошення нового шрифту і видалення підкреслення у посилань:
@ 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; }інтерфейс плеєра
Інтерфейс плеєра міститься в div'е з класом jp-gui. Як буде виглядати плеєр, ви можете побачити на скріншоті вище. В якості фону буде градієнт із квітами: # f34927, і # dd3311. Також важливо, щоб властивість position було встановлено в 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; }контролери
Інтерфейс плеєра містить контролери для управління відтворенням, наприклад, кнопки запуску, паузи і гучності. Все, що ми зробимо - це встановимо властивість font-family рівним FontAwesome, зробимо колір тексту білим і додамо тіней.
.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-gui ми раніше спозиціонували відносно. Тому позиція кнопок буде обчислюватися щодо батьківського елементу, а не вікна браузера.
.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; }Готово! Результат ви можете подивитися на демо сторінці і в исходниках.