Как создать элегантный веб-аудиоплеер

Я до сих пор помню, как в начале 2000-х при воспроизведении мультимедийных файлов (аудио и видео) в Интернете было много ограничений. Легко принять начало как должное, тем более что сегодня у нас есть много точек для воспроизведения аудио, например last.fm или видео, таких как Youtube.

В этом посте, как следует из названия, мы собираемся создать веб-аудиоплеер. Если у вас есть веб-сайт для подкастинга и вы хотите создать медиаплеер, который будет соответствовать вашему общему веб-дизайну, этот пост, вероятно, для вас.

Нажмите кнопку «Демо», чтобы увидеть, как будет выглядеть аудиоплеер.

Что нам нужно
Прежде чем мы создадим аудиоплеер, нам нужно подготовить для него некоторые ключевые элементы: jPlayer, jQuery и набор иконок шрифтов, называемый FontAwesome.

Прежде всего, давайте скачать jPlayer. JPlayer – это подключаемый модуль jQuery, который позволяет нам без проблем запускать мультимедиа на нашей веб-странице. Если вы умеете HTML и CSS, вы готовы к работе.

Рекомендуемая литература: ознакомьтесь с нашими руководствами по HTML / CSS3.

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

После этого мы извлекаем все загруженные файлы и помещаем все, включая файлы jPlayer, jQuery и шрифты, в соответствующую папку. Затем свяжите jquery.js и jquery.jplayer.min.js с html-документом, как показано ниже.

Как видите, в дополнение к библиотеке jQuery и jPlayer мы также связали туда два файла CSS. Первый файл normalize.css сбрасывает или нормализует стили браузера, поэтому наша веб-страница будет отображаться более единообразно во всех браузерах, в то время как второй, style.css – это то место, где мы размещаем наши основные стили.
Аудио
Для демонстрации в этом уроке мы собираемся использовать звук из Келли Андерсон из ее презентации на TEDx Pheonix. Что ж, на самом деле это видео, но вы можете извлечь звук только с помощью одного из следующих инструментов: Easy Youtube Downloader (расширение FF) или же KeepVid.com.
Структурирование разметки HTML
Теперь пришло время структурировать разметку HTML для аудиоплеера, а ниже – разметка HTML, которая нам нужна. Важным моментом в этой разметке является атрибут id = jquery_jplayer_1, который назначается в div, содержащем все это. Этот идентификатор используется для связывания этой структуры с jPlayer позже с помощью функции jQuery.

Кроме того, все классы, назначенные в следующей структуре, включая jp-play, jp-pause, jp-mute и jp-unmute, являются стандартными классами, используемыми в jPlayer. Я предлагаю вам не изменять эти классы, а также атрибут id, чтобы упростить задачу, когда мы позже стилизуем аудиоплеер (если вы действительно не знаете, что делаете).

<

div id = “jp_container_1” class = “jp-audio”>

Если вы внимательно посмотрите на эту структуру HTML, вы найдете следующие символы & # 61515 ;, & # 61516 ;, & # 61480; и & # 61478 ;. Эти символы представляют собой специальные номера HTML для обозначения и отображения символов значков, поступающих из FontAwesome.

Мы рассмотрели эту тему в предыдущем посте: Учебное пособие по CSS3: создание изящной кнопки включения / выключения.
Активация аудиоплеера
Затем, как только разметка HTML будет очищена, нам просто нужно активировать проигрыватель с помощью следующего скрипта. В этом скрипте мы предоставляем аудиоисточники, и, как вы можете видеть ниже, мы добавили два источника: mp3 и oga. Формат oga расширит кроссбраузерную совместимость, особенно в 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 “, поставляется:” mp3, oga “});});

После того, как мы добавим этот скрипт, звук на самом деле уже воспроизводится, и если мы проверим разметку HTML с помощью Firebug или других инструментов разработчика, мы сможем найти новый сгенерированный элемент

@ font-face {семейство шрифтов: “FontAwesome”; src: url (“шрифты / fontawesome-webfont.eot”); src: url (“fonts / fontawesome-webfont.eot? #iefix”) формат (“eot”), url (“fonts / fontawesome-webfont.woff”) формат (“woff”), url (“fonts / fontawesome- webfont.ttf “) формат (” truetype “), url (” fonts / fontawesome-webfont.svg # FontAwesome “) формат (” svg “); font-weight: 400; стиль шрифта: нормальный; } а {текст-украшение: нет; } .jp-jplayer, .jp-audio {width: 420px; маржа: 50 пикселей автоматически; } Заголовок аудио
Мы не будем сильно менять стиль этого раздела, так как он содержит только текстовый заголовок воспроизводимого аудио. Мы только уменьшим текст заголовка и сделаем его серым.

.jp-заголовок {размер шрифта: 12 пикселей; выравнивание текста: центр; цвет: # 999; } .jp-title ul {padding: 0; маржа: 0; стиль списка: нет; } Контейнер GUI
Графический интерфейс аудиоплеера содержится в блоке div, которому назначен класс jp-gui. На скриншоте выше вы можете увидеть, как будет выглядеть наш медиаплеер. Мы применяем цвета градиента для темы графического интерфейса пользователя и используем этот номер цвета для начального цвета # f34927 и # dd3311 для конечного цвета. Также убедитесь, что свойство position для этого div определено как relative.

.jp-gui {положение: относительное; фон: # f34927; фон: -moz-linear-gradient (вверху, # f34927 0%, # dd3311 100%); фон: -webkit-gradient (линейный, слева вверху, слева внизу, остановка цвета (0%, # f34927), остановка цвета (100%, # dd3311)); фон: -webkit-linear-gradient (вверху, # f34927 0%, # dd3311 100%); фон: -o-linear-gradient (вверху, # f34927 0%, # dd3311 100%); фон: -ms-linear-gradient (вверху, # f34927 0%, # dd3311 100%); фон: linear-gradient (вниз, # f34927 0%, # dd3311 100%); фильтр: progid: DXImageTransform.Microsoft.gradient (startColorstr = “# f34927”, endColorstr = “# dd3311”, GradientType = 0); -webkit-box-shadow: 0px 1px 1px 0px rgba (0, 0, 0, .1); коробка-тень: 0px 1px 1px 0px rgba (0, 0, 0, .1); радиус границы: 3 пикселя; переполнение: скрыто; маржа сверху: 10 пикселей; } Управление графическим интерфейсом
Раздел управления графическим интерфейсом пользователя содержит пользовательский интерфейс для управления звуком, например кнопки воспроизведения и паузы, кнопки громкости и отключения звука. В этом разделе мы устанавливаем для свойства font-family значение FontAwesome и меняем цвет текста на белый, а также добавляем текстовую тень.

.jp-controls {padding: 0; маржа: 0; стиль списка: нет; семейство шрифтов: “FontAwesome”; тень текста: 1px 1px 0 rgba (0,0,0,0.3); } .jp-controls li {display: inline; } .jp-контролирует {color: #fff; } Кнопка воспроизведения и паузы
Для воспроизведения и паузы, а также кнопки громкости мы установим их положение в абсолютное значение, поэтому ранее мы установили .jp-gui в относительное значение. Таким образом, положение этих кнопок будет относительно их ближайшего родителя, а не окна браузера.

.jp-play, .jp-pause {ширина: 60 ​​пикселей; высота: 40 пикселей; дисплей: встроенный блок; выравнивание текста: центр; высота строки: 43 пикселя; граница справа: сплошной 1px # d22f0f; } .jp-controls .jp-play: hover, .jp-controls .jp-pause: hover {background-color: # de3918; } .jp-mute, .jp-unmute {позиция: абсолютная; вправо: 55 пикселей; верх: 0; ширина: 20 пикселей; высота: 40 пикселей; дисплей: встроенный блок; высота строки: 46 пикселей; } .jp-mute {выравнивание текста: слева; } .jp-time-holder {цвет: #FFF; размер шрифта: 12 пикселей; высота строки: 14 пикселей; позиция: абсолютная; вправо: 90 пикселей; верх: 14 пикселей; тень текста: 1px 1px 0 rgba (0,0,0,0.3); } Прогресс и полоса громкости
Индикаторы выполнения будут иметь похожий вид, только они будут отличаться по размеру. Очевидно, прогресс должен быть длиннее и больше, чем полоса громкости.

.jp-progress {цвет фона: # 992E18; радиус границы: 20 пикселей 20 пикселей 20 пикселей 20 пикселей; переполнение: скрыто; позиция: абсолютная; вправо: 133 пикселя; верх: 15 пикселей; ширина: 210 пикселей; -webkit-box-shadow: 0 1px 1px 0 rgba (0,0,0,0.2) вставка; box-shadow: 0 1px 1px 0 rgba (0,0,0,0.2) вставка; } .jp-play-bar {высота: 12 пикселей; цвет фона: #fff; радиус границы: 20 пикселей 20 пикселей 20 пикселей 20 пикселей; } .jp-volume-bar {позиция: абсолютная; справа: 10 пикселей; верх: 17 пикселей; ширина: 45 пикселей; высота: 8 пикселей; радиус границы: 20 пикселей 20 пикселей 20 пикселей 20 пикселей; -webkit-box-shadow: 0 1px 1px 0 вставка rgba (0,0,0,0.1); box-shadow: 0 1px 1px 0 rgba (0,0,0,0.1) вставка; цвет фона: # 992E18; переполнение: скрыто; } .jp-объем-столбец-значение {цвет фона: #fff; высота: 8 пикселей; радиус границы: 20 пикселей 20 пикселей 20 пикселей 20 пикселей; }

Это все коды, которые нам нужны. Теперь вы можете увидеть демонстрацию, а также загрузить исходный код по следующим ссылкам.