• Инструменты для разработчика

    • Самые удобные инструменты для разработчика, которые облегчат жизнь любого как начинающего так и продвинутого разработчика. Украшатели, уменьшители, конвертеры кодов. Доменные инструменты. Всё в одном комплекте.
  • Использование BB кодов. Тут указаны существующие BB коды на форуме.

Другое Создаём аудиоплеер для нашего сайта

Admin

Основатель проекта
Команда форума
Регистрация
12.03.2015
Сообщения
100
Репутация
35
Баллы
68
Награды
2
Возраст
36
Адрес
Namangan
Веб-сайт
icoder.uz
Лучшие ответы
1
Медали
2
  • Постер
  • Первое сообщение
До сих пор мне вспоминаются 2000-е годы, когда воспроизведение музыки или видео на сайте было ограниченным. Сегодня же ситуация сильно изменилась, в нашем распоряжении есть такие сайты как last.fm, Youtube...
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!

Как вы уже поняли из названия данного поста, сегодня мы займёмся созданием собственного веб аудио плеера. Если вы занимаетесь подкастингом и хотите создать плеер, который будет вписываться в дизайн вашего сайта, этот урок специально для вас.
Дизайн плеера был позаимствован с сайта
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!
.
Что нам необходимо

Перед тем как приступить к созданию плеера, нам надо определиться с инструментами, которые мы будем для этого использовать:
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!
,
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!
и иконки
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!
.
jPlayer представляет собой jQuery плагин, так что нам для начала, понадобится скачать jQuery последней версии. Также нам понадобятся иконки для интерфейса плеера.
После скачивания нужных нам библиотек, подключаем их к папке нашего проекта. Пишем код подключения для jquery.js, jquery.jplayer.min.js и таблиц стилей:
[HIDE-POSTS=10]
HTML:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]
Таблица стилей normalize.css предназначена для сброса некоторых CSS настроек браузеров, чтобы наш дизайн был как можно больше универсален. В style.css мы закинем наши собственные стили.

Структура HTML

Теперь давайте приступим к написанию html кода, который нужен для работы плеера. Тут нам необходимо создать общий div контейнер и задать ему id = jquery_jplayer_1. В дальнейшем значение данного атрибута мы будем использовать при настройке jPlayer.
Идём дальше и создаём элементы с классами jp-play, jp-pause, jp-mute и jp-unmute, для создания кнопок контроля за воспроизведением аудио. Для начала, я советую вам не экспериментировать с собственными стилями для этих классов, а оставить всё как есть.
[HIDE-POSTS=10]
HTML:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]
В приведённой HTML структуре вы найдёте подобные наборы символов: ?,?, ? ? Это специальные HTML вставки, которые отобразят нам иконки FontAwesome.

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

Поскольку нужный нам HTML код уже готов, следующим шагом будет активация плеера в специальном скрипте. В наш пример мы добавим несколько аудио файлов одного и того же выпуска в формате mp3 и ogg. Формат ogg мы можем использовать для кроссбраузерности, особенно для Firefox и Opera.
[HIDE-POSTS=10]
Код:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]

После добавления данного скрипта, плеер по сути находится в рабочем состоянии. Если мы посмотрим на код страницы, то увидим специально сгенерированный HTML5 тег <audio>
Пожалуйста, Войдите или Зарегистрируйтесть для просмотра содержимого URL-адресов!

Создаём свой стиль

В этой секции мы начнём оформление нашего плеера. В первую очередь, подключим шрифты и уберём подчёркивание у ссылок.
[HIDE-POSTS=10]
CSS:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]
Название аудио

Тут ничего такого особенного менять мы не будем, просто сделаем размер текста немного меньше, чем он есть.
[HIDE-POSTS=10]
CSS:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]

GUI контейнера


GUI контейнеру плеера был задан класс jp-gui. Результат наших преобразований вы можете глянуть в демо. Тут мы применяем градиенты и специальные цвета #f34927, #dd3311. Также обратите внимание на то, что опция position нашего div-а содержит значение relative.
[HIDE-POSTS=10]
CSS:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]

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

GUI блока управления представляет собой кнопки контроля за воспроизведением аудио: пауза, громкость и так далее. Тут мы снова поиграем с шрифтами, сделаем цвет текста белым и добавим тенюшку.
[HIDE-POSTS=10]
CSS:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]

Кнопки воспроизведения и паузы


Расположение данных кнопок мы сделаем абсолютным. Именно для этого ранее контейнер, где они находятся, мы сделали релативным. Таким образом, они будут располагаться согласно позиции своего родительского элемента.
[HIDE-POSTS=10]
CSS:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]

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


Данные элементы выглядят абсолютно одинаково, только имеют разный размер. Область перемотки обычно больше, чем область уровень громкости:
[HIDE-POSTS=10]
CSS:
Пожалуйста, Войдите или Зарегистрируйтесь для просмотра содержания кодов!
[/HIDE-POSTS]
Вот и всё.
 

index.html

Пользователь
Регистрация
26.03.2016
Сообщения
2
Репутация
0
Баллы
0
Награды
0
Лучшие ответы
0
интересная вещь)
 
Сверху Снизу