<
  • Главная
Статьи

HTML5 аудіо програвач

  1. Що нам знадобиться
  2. HTML розмітка
  3. Активуємо аудіо плеєр
  4. Стилізація аудіо плеєра
  5. Назва пісні
  6. інтерфейс плеєра
  7. контролери
  8. Кнопки відтворення і паузи
  9. Процес відтворення і повзунок гучності

Раніше, на початку 2000х, можливості відтворення аудіо або відео контенту онально, в браузері були сильно обмежені. Сьогодні, завдяки новим можливостям HTML5 і тегу <audio> ми можемо самі створювати аудіо та відео плеєри без будь-яких обмежень. Чим і займемося в цій статті 🙂

Що нам знадобиться

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

jPlayer - це jQuery плгін, який дозволяє програвати аудіо і відео контент прямо на сторінці в браузері. Для стилізації нашого плеєра будемо використовувати іконки 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; }

Готово! Результат ви можете подивитися на демо сторінці і в исходниках.

Дивіться також

Eot?


Новости
  • Виртуальный хостинг

    Виртуальный хостинг. Возможности сервера распределяются в равной мере между всеми... 
    Читать полностью

  • Редизайн сайта

    Редизайн сайта – это полное либо частичное обновление дизайна существующего сайта.... 
    Читать полностью

  • Консалтинг, услуги контент-менеджера

    Сопровождение любых интернет ресурсов;- Знание HTML и CSS- Поиск и обновление контента;-... 
    Читать полностью

  • Трафик из соцсетей

    Сравнительно дешевый способ по сравнению с поисковым и контекстным видами раскрутки... 
    Читать полностью

  • Поисковая оптимизация

    Поисковая оптимизация (англ. search engine optimization, SEO) — поднятие позиций сайта в результатах... 
    Читать полностью