Как сделать плейлист в html
Постановка задачи: воспроизведение аудио файлов в формате mp3 (уж как минимум), регулирование громкости, перемотка, плейлист, возможность переключения треков, разумеется html5 и, хотелось бы уже сказать: "Бе бе бе flash", но все таки поддержка flash при отсутствии html5.
Характеристики и правда впечатляют:
HTML5: mp3, m4a (AAC), m4v (H.264), ogv, oga, wav, webm
Flash: mp3, m4a (AAC), m4v (H.264)
Windows: Firefox, Chrome, Opera, Safari, IE6, IE7, IE8, IE9 beta
OSX: Firefox, Chrome, Opera, Safari
iOS: Mobile Safari: iPad, iPhone, iPod Touch
Android: создатели не нашли девайс для тестирования. okay
Начнем по порядку. Подключаем скрипты. Не забываем, что все скрипты лучше подключать внизу страницы.
Как видно, мы подключили скин. Их несколько стандартных в комплекте, все красивые, все дела, но мы же создаем плеер, как вконтакте! Так что мы его перерисуем. В той директории, где скрипт плеера хранится, есть папка skin. Создадим там папку "jplayer.vkontakte", кладем туда этот, этот, этот, этот и этот файл. Третью строчку смело заменим:
Так же мы подключили jplayer.playlist.min.js, который мы тоже любезно подправим и по пользуем. Добавим немного html кода. Не забывайте в отступы в 4 пробела, ибо дзен.
Ниже пишем js код. Правильнее бы его вынести в отдельный файлик *.js и подключить. Но мы же плохие парни, да? =Р
Важно отметить такую вещь: не стоит пихать аудио в каждый ваш сайт и, уж тем более, бесконтрольно включать музыку (таких вообще надо alert`ами лечить). Посетитель должен предсказуемо манипулировать всем и вся на странице, а не ложить печку от крика в наушниках)
Вообщем делаем свое личное радио, где вы сами можете составить плей лист как исполнителей так и групп. Но самое главное, это неограниченно на нем музыкальных композиций. Также присутствуют различные функций по выбору, что можно поставить на случайное произведение и автоматически будет воспроизводить. Подключив его и выбрав ту или иную группу, вы подключаете и на сайте ищете что вам нужно и слушаете прекрасную музыку. Как он будет реально смотреться, то когда вы скачаете архив, то будет файл демонстраций, где можете подключить его и поработать над настройками и после этого решить, ставить его на портал.
При открытие и выбора музыки:
Рассмотрим особенности:
1. Легкий в использовании
2. Поддержка плейлиста
3. Изображение на заднем плане
4. Обложка альбома
5. Регулятор громкости
6. Функции для случайного и повторного воспроизведения композиций
7. Работает на всех популярных браузерах
8. Работает в Android и IOS
Если решите добавить свою композицию, то вам поставить в файл index.html, что предоставлен ниже.
<
"title": "This Is What You Came For",
"author": "Calvin Harris",
"cover": "files/covers/2.jpg",
"background": "files/backgrounds/2.jpg",
"pfile": "files/music/2.mp3",
"duration": "221"
>,
Чтоб понять, что за какие формы отвечает.
"title" : - Название композиции
"author" : - Исполнитель
"cover" : - Обложка альбома
"background" : - Задний фон
"pfile" : - Ссылка на .mp3 файл
" duration" : - Продолжительность композиции в секундах.
currentTime Позиция курсора проигрывателя, double (секунды) duration Длительность воспроизведения, double (секунды); только чтение muted Заглушен ли звук, boolean paused Остановлено ли воспроизведение, boolean volume Уровень громкости, double (от 0 до 1) played Были ли воспроизведены интервалы полностью, возвращает объект TimeRanges seekable Интервалы, которые готовы для немедленного воспроизведения, возвращает объект TimeRanges buffered Возвращает объект TimeRanges буферизованного файла
События тегаdurationchange Обновлён атрибут duration ended Воспроизведение остановлено по достижению конца pause Воспроизведение было остановлено (обратите внимание на отсутствие события stop) play Файл начал проигрываться timeupdate Текущая позиция воспроизведения изменилась (обычно каждые 250 мс) volumechange Значение изменилось canplay Файл может быть воспроизведен, но, возможно, потребуется пауза, пока он загружается. canplaythrough При имеющемся темпе скачивания предполагается, что файл может быть проигран от начала до конца без перерыва. progress Браузер показывает состояние проигрывания (обычно каждые 250 мс)
Объект TimeRanges
Содержит данные о частях буферизованных участков медиафайла (один или более — сколько успело буферизоваться) и имеет свойства:
length Число интервалов start(index Начальное время указанного интервала end(index) Конечное время указанного интервала (отсчитывается от начала воспроизведения)
Управление воспроизведением через JavaScript
Для создания объекта audio в javascript используется:
Чтобы определить, поддерживается ли данный формат файла в браузере используйте метод canPlayType() , который возвращает одно из 3 значений:
- probably,
- maybe,
- "" (пустая строка).
Как вариант, объект создаётся полностью на Javascript.
Старые форматы вставки музыки:
Пример
Поддерживаемые форматы: Ogg Vorbis, WAV PCM, MP3, AAC, Speex (зависит от конкретного браузера).
Подробнее на Wiki: Audio format support
До сих пор мне вспоминаются 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 контейнер и задать ему В дальнейшем значение данного атрибута мы будем использовать при настройке jPlayer.
Идём дальше и создаём элементы с классами jp-play, jp-pause, jp-mute и jp-unmute, для создания кнопок контроля за воспроизведением аудио. Для начала, я советую вам не экспериментировать с собственными стилями для этих классов, а оставить всё как есть.
В приведённой HTML структуре вы найдёте подобные наборы символов: . ? ? Это специальные HTML вставки, которые отобразят нам иконки FontAwesome.
Активация аудио плеера
Поскольку нужный нам HTML код уже готов, следующим шагом будет активация плеера в специальном скрипте. В наш пример мы добавим несколько аудио файлов одного и того же выпуска в формате mp3 и ogg. Формат ogg мы можем использовать для кроссбраузерности, особенно для Firefox и Opera.
После добавления данного скрипта, плеер по сути находится в рабочем состоянии. Если мы посмотрим на код страницы, то увидим специально сгенерированный HTML5 тег
Создаём свой стиль
В этой секции мы начнём оформление нашего плеера. В первую очередь, подключим шрифты и уберём подчёркивание у ссылок.
Название аудио
Тут ничего такого особенного менять мы не будем, просто сделаем размер текста немного меньше, чем он есть.
GUI контейнера
GUI блока управления
GUI блока управления представляет собой кнопки контроля за воспроизведением аудио: пауза, громкость и так далее. Тут мы снова поиграем с шрифтами, сделаем цвет текста белым и добавим тенюшку.
Кнопки воспроизведения и паузы
Расположение данных кнопок мы сделаем абсолютным. Именно для этого ранее контейнер, где они находятся, мы сделали релативным. Таким образом, они будут располагаться согласно позиции своего родительского элемента.
Перемотка и уровень громкости
Данные элементы выглядят абсолютно одинаково, только имеют разный размер. Область перемотки обычно больше, чем область уровень громкости:
Вот и всё. Теперь вы можете насладиться аудио плеером в демо или скачать исходник.
5 последних уроков рубрики "jQuery"
Анимация набора текста на jQuery
Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.
Временная шкала на jQuery
jQuery плагин для создания временной шкалы.
Заметка: Перезагрузка и редирект на JavaScript
Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.
Читайте также: