html код аудиоплеера для сайта

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

До сих пор мне вспоминаются 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 код уже готов, следующим шагом будет активация плеера в специальном скрипте. В наш пример мы добавим несколько аудио файлов одного и того же выпуска в формате mp3 и ogg. Формат ogg мы можем использовать для кроссбраузерности, особенно для Firefox и Opera.

После добавления данного скрипта, плеер по сути находится в рабочем состоянии. Если мы посмотрим на код страницы, то увидим специально сгенерированный HTML5 тег

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

В этой секции мы начнём оформление нашего плеера. В первую очередь, подключим шрифты и уберём подчёркивание у ссылок.

Название аудио

Тут ничего такого особенного менять мы не будем, просто сделаем размер текста немного меньше, чем он есть.

GUI контейнера

GUI контейнеру плеера был задан класс jp-gui. Результат наших преобразований вы можете глянуть в демо. Тут мы применяем градиенты и специальные цвета #f34927, #dd3311. Также обратите внимание на то, что опция position нашего div-а содержит значение relative.

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

GUI блока управления представляет собой кнопки контроля за воспроизведением аудио: пауза, громкость и так далее. Тут мы снова поиграем с шрифтами, сделаем цвет текста белым и добавим тенюшку.

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

Расположение данных кнопок мы сделаем абсолютным. Именно для этого ранее контейнер, где они находятся, мы сделали релативным. Таким образом, они будут располагаться согласно позиции своего родительского элемента.

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

Данные элементы выглядят абсолютно одинаково, только имеют разный размер. Область перемотки обычно больше, чем область уровень громкости:

Вот и всё. Теперь вы можете насладиться аудио плеером в демо или скачать исходник.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/web-audio-player/
Перевел: Станислав Протасевич
Урок создан: 7 Марта 2013
Просмотров: 62571
Правила перепечатки

5 последних уроков рубрики «jQuery»

Анимация набора текста на jQuery

Сегодня мы бы хотели вам рассказать о библиотеке TypeIt — бесплатном jQuery плагине. С её помощью можно имитировать набор текста. Если всё настроить правильно, то можно добиться очень реалистичного эффекта.

Временная шкала на jQuery

jQuery плагин для создания временной шкалы.

Заметка: Перезагрузка и редирект на JavaScript

Быстрая заметка, где вы сможете найти парочку JS сниппетов для перезагрузки и перенаправления пользователей через JavaScript.

Рисуем диаграмму Ганта

jQuery плагин для создания диаграммы Ганта.

AJAX и PHP: загрузка файла

Пример того как осуществить загрузку файла через PHP и jQuery ajax.

Источник

1.12. HTML5-аудио

Как добавить HTML5-аудио на веб-страницу

1. Элемент

Поддержка браузерами

IE: 9.0
Firefox: 3.5 базовая поддержка, 15.0 — полная
Chrome: 3.0
Safari: 3.1
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

Атрибут controls добавляет отображение браузерами интерфейса управления аудио плеера — кнопки воспроизведения, паузы, громкости.

Рис. 1. Внешний вид аудио плеера в разных браузерах

2. Аудио кодеки

Аудио кодек (декодер) представляет собой программу для преобразования цифровых данных в формат звукового файла или звукового потока. Популярными аудио форматами являются следующие:

MP3 — самый популярный аудио формат, использующий сжатие с потерями и позволяющий уменьшить размер файла в несколько раз. В силу лицензионных отчислений не поддерживается Firefox и Opera.

AAC (Advanced Audio Codec) — закрытый кодек, аналог MP3, но по сравнению с последним, поддерживает более высокое качество звука при сходном размере файла.

Ogg Vorbis — бесплатный формат с открытым кодом, поддерживается в Firefox, Opera и Chrome. Обеспечивает хорошее качество звука, но недостаточно широко поддерживается аппаратными проигрывателями.

3. Альтернативные медиа-ресурсы

Таблица 2. Атрибуты тега

Атрибут	Описание, принимаемое значение
media	Определяет тип медиа-устройства (т.е. для каких устройств оптимизирован файл).
src	Содержит абсолютный или относительный URL-адрес медиафайла.
type	Определяет MIME-тип медиафайла.

4. Добавление субтитров и заголовков

Таблица 3. Атрибуты тега

Атрибут	Описание, принимаемое значение
default	Указывает, что данная дорожка воспроизводится по умолчанию. Только один элементможет содержать данный атрибут.
kind	Указывает тип текстовой дорожки, по умолчанию выводятся субтитры ( subtitles ). Принимаемые значения: captions — перевод диалогов и звуковых эффектов, отображаемый в виде текста поверх видео (для глухих пользователей). chapters — добавляет названия глав в виде списка для навигации по медиафайлу. descriptions — добавляет звуковое описание происходящего в видео (для слепых пользователей). metadata — метаданные, используемые скриптами, не отображаются для пользователей. subtitles — текстовое дублирование звуковой дорожки видео, отображается в виде субтитров к видео.
label	Добавляет название дорожки. Если этот атрибут не задан, браузер применит значение по умолчанию.
src	Содержит абсолютный или относительный URL-адрес данных текстовой дорожки.
srclang	Язык воспроизводимой дорожки.

5. Стилизованный пример аудио плеера

С помощью css-стилей можно придать аудио плееру необычный вид. Воспроизведение управляется с помощью небольшого скрипта (используется библиотека jQuery), звук появляется при наведении на пластинку.

See the Pen Music animation by Elena Nazarova (@nazarelen) on CodePen.

Источник

Адаптивный аудио-плеер для сайта

Адаптивность играет большую роль в современном веб-дизайне. Создатель сайта должен это прекрасно понимать, ведь хороший дизайн это половина успешного сайта. В каждого из посетителей свои потребности, кто-то заходит из планшета, кто-то из смартфона, а кто-то из ноутбука, при этом надо учитывать, что все эти устройства имеют различное разрешение, и сайт просто обязан правильно отображаться на ним. Каждая деталь сайта должна подстраиваться под разрешения устройства. В данном уроке мы рассмотрим, как создать замечательный, адаптивный аудио-плеер.

Без необходимости применять media queries у вас в распоряжении будет простой гибкий шаблон. Плеер представляет собой довольно маленький объект, и это значительно облегчает задачу. Дальше мы более подробно рассмотрим все это.

Поддержка сенсорное управления

Плеер можно использовать для сенсорных экранов. Все, что можно делать курсором, вы сможете делать пальцем. Каждое действие имеет отдельные touch-события.

Не используем изображения

В процессе разработки не использовались изображения. Мы будем использовать только чистый код CSS.

Плеер работает в соответствии с определенными атрибутами элемента «audio»:

src определяет расположение (url) аудио-файла;
атрибут autoplay boolean определяет, воспроизводить ли аудио-файл, когда он уже загружен;
атрибут loop boolean определяет, воспроизводить ли аудио-файл снова, когда его воспроизведение будет завершено;
preload определяет, как аудио-файлы должны быть загружены, и имеет значения: auto/metadata/none.

Шаг 1. HTML

Мы будем использовать тег «audio» с некоторыми атрибутами из вышеприведенного раздела о родственных свойствах.

Вы можете автоматически запустить воспроизведение файла,при его загрузке, а затем сделаем цикличную прокрутку.

Для поддержки максимального числа браузеров, вы можете указать несколько форматов аудио следующим образом.

С этим шагом вы завершили, переходим к следующему.

Шаг 2. Запуск плагина

Для того чтобы плагин сработал добавим немного javascript в форме строк кода.

Кроме этого элемент audioPlayer имеет несколько опциональных параметров. Один из самых важных называется classPrefix. Введенное значение становится именем класса для родительского элемента, и префиксом имени класса для дочерних элементов.

Когда вы вызываете плагин, он полностью заменяет элемент «audio» и получаем совершенно новый HTML-код. Вот что мы имеем.

audioplayer-playing – воспроизводится аудио (то есть, div);

audioplayer-mute – звук отключен (то есть, div);

audioplayer-novolume – недоступны контроллеры звука (то есть, div).

Шаг 3. CSS

По началу мы не будем использовать градиенты, тени, и другие забавные причуды в коде, приведенном ниже (в демо вы сможете их увидеть). Для стилизации необходимо добавить следующий код.

Теперь добавим кнопку воспроизведения и паузы.

Далее будут таймеры и их стилизация.

Последним шагом будет регулятор громкости.

Следует добавить что плеер отлично работает на мобильных устройствах.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Статьи по теме

Хлебные крошки & многоэтапный Индикатор на CSS3

Курсор как элемент веб-дизайна

3D эффекты для миниатюр при наведении курсора мыши

Меню только на CSS3

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.

Источник

15 лучших HTML5 аудио-плееров

Russian (Pусский) translation by Ellen Nelson (you can also view the original English article)

К счастью, HTML5 стал стандартом для мультимедиа в веб-дизайне. Прошли дни плагинов Flash и Silverlight, так как поддержка HTML5 элементов для аудио и видео привнесла стандарт на все платформы, не говоря уже о преимуществах SEO и автономного кэширования.

Другим преимуществом HTML5 является его легкость в адаптации на различных платформах. Это значительно упрощает дизайн, разработку и развертывание пользовательских аудиоплееров, чем в прошлом, а также они работают на настольных, мобильных и различных операционных системах.

Следующие 15 аудио-плееров HTML5 на Envato это отличные примеры того, насколько могут быть продвинуты эти проигрыватели, и, в то же время, их легко подстроить под ваши дизайнерские потребности.

1. Audio Waveform Player с плейлистом

Аудиоплеер Waveform с плейлистом один из моих любимых HTML5-аудиоплееров. Он заимствует некоторые элементы дизайна от проигрывателя SoundCloud и вбрасывает некоторые дополнительные функции, которые полезны для тех, кто публикует свои аудиофайлы.

Этот полностью отзывчивый и настраиваемый проигрыватель имеет такие полезные параметры:

Отличное решение для подкастов, групп и т.д. Для аудио, которое размещено на Google Диске, Amazon S3 и даже SoundCloud.

С его надежным API и доступными callback вы найдете аудиоплеер Waveform с плейлистом одинаково хорошо разработанным и мощным.

2. HTML5 Audio Player with Playlist

Аудиоплеер HTML5 с плейлистом это ещё один мощный вариант.

Благодаря мощному API и неограниченному внешнему виду плеера, вы можете использовать этот аудиоплеер на HTML5 практически так, как только вы можете себе представить.

Формы и функции этого аудиоплеера имеют множество опций и он является отличным плеером для подкастов, SoundCloud и других.

HTML5 Audio Player с плейлистом вполне может быть самым отзывчивым HTML5 аудиоплеером.

3. MP3 Sticky Player

Самое лучшее в MP3 Sticky Player это то, что он… «липкий»!

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

Некоторые его другие важные функции:

Вы найдёте множество опций и шесть различных обложек в приложенном PSD файле.

Плеер MP3 Sticky может идеально прилипнуть к вашему веб-сайту, в качестве HTML5 аудиоплеера.

4. sPlayer — суперский музыкальный плеер на HTML5

sPlayer — суперский музыкальный плеер на HTML5 сглаживает границы между аудиоплеером для рабочего стола и веб-сайта:

«SPlayer выжимает HTML5 до предела, это почти наверняка первый музыкальный проигрыватель HTML5 в своём роде, делая его самой многофункциональной библиотекой JavaScript Audio».

Вы даже можете импортировать локальную музыку с ID3 тегами и всем остальным.

От веба на рабочий стол, полностью поддерживает мобильные, поддерживает несколько различных аудиоформатов (mp3, ogg, oga, aac, m4a, and mp4), sPlayer — супперский музыкальный плеер на HTML5 готов для вас.

5. All in One Audio and Radio Player

Хотите ли вы воспроизвести одну песню, составить список воспроведения или потоковое аудио — All in One Audio and Radio Player — готов для вещания.

Этот, хорошо выглядящий плеер поддерживает:

Имея различные темы и мощный API, вы можете настроить этот плеер на HTML5 просто любым способом, который вы можете себе представить.

Некоторые из особенностей:

All in One Audio and Radio Player — впечатляющий вариант для аудио проигрывателя на HTML5.

6. Responsive HTML5 Audio Player PRO With Playlist

Отзывчивый аудио плеер PRO на HTML5 со списком воспроизведения — достойный выбор. С его полностью настраиваемым интерфейсом, вы можете идеально интегрировать этот аудио плеер в дизайн вашего веб-сайта.

Некоторые из его лучших функций включают в себя:

Подключитесь к отслеживанию Google Analytics и настройте автоматическое создание списка воспроизведения на основе организации ваших папок, и всё готово, почти моментально.

Если ищите надёжный аудиоплеер на HTML, который можно настроить под ваше оформление, то внимательно ознакомьтесь с Responsive HTML5 Audio Player PRO With Playlist.

7. ProgressionPlayer — отзывчивый аудио-видео проигрыватель

Если вам нужно добавить какое-то видео вместе со звуком, вы захотите использовать ProgressionPlayer — отзывчивый аудио-видео плеер. Он легко настраивается, полностью отзывчив и включает в себя все основные функции, которые вы хотите использовать в аудиоплеере на HTML5.

«Пользовательские Flash и Silverlight проигрыватели, которые имитируют HTML5 MediaElement API для старых браузеров»

ProgressionPlayer — отзывчивый аудио-видео плеер идеально подходит если вам нужно несколько экземпляров на одной странице, так как плееры автоматически прекращают играть, когда активируются другие плееры.

8. Single jQuery Audio Player (музыка и радио)

Благодаря своему лёгкому дизайну и уникальным функциям Single JQuery Audio Player (музыка и радио) это отличное решение для потокового вещания и музыкальных исполнителей.

Каждый экземпляр плеера может быть настроен по-разному, используя его полезный API плагинов:

Вот некоторые из его полезных функций:

Самое лучшее то, что он автоматически приостанавливает и останавливает воспроизведение при запуске нового плеера на той же странице.

С его минималистичный дизайном и мощным API, Single jQuery Audio Player (музыка и радио) является одним из лучших аудио-плееров на HTML5 для музыкантов и потокового вещания.

9. DS SoundCloud Custom Music Player

Если вы любите SoundCloud, ну хотите использовать по‑вашему оформленный проигрыватель, вы захотите DS SoundCloud Custom Music Player.

“DS SoundCloud Music Player это динамический плагин jQuery, разработанный чтобы добавить возможность обычного аудио вещания на веб-сайты, используя HTML5 и jQuery. Он разработан на основе технологии SoundCloud и может использоваться, как замена для встраиваемого плеера SoundCloud.”

DS SoundCloud Custom Music Player является отличной альтернативой проигрывателю SoundCloud по умолчанию, с небольшими дополнениями.

10. Clean HTML Audio Player with Playlist

Clean HTML Audio Player with Playlist на самом деле вот это.

Разместить у себя или вести вещание, этот плеер может справиться с этим.

Некоторые другие функции включают в себя:

11. Easy Audio Player

Easy Audio Player — это цельный, хорошо округленный простой аудиоплеер, который можно настроить по своему вкусу.

Он включает полную поддержку API и оптимизирован для мобильных устройств.

Дополнительные функции включают:

Easy Audio Player — прост в настройке, прост в использовании и является простым выбором.

12. tPlayer — аудио проигрыватель (со списком воспроизведения) v1.5

tPlayer — аудио проигрыватель (со списком воспроизведения) v1.5 мне особенно нравится, потому что он хорошо оформлен и выглядит современно.

Его эксклюзивная кнопка SVG, анимация, а также эластичная обложка и слайдер поиска придают этому плееру приятный няшный вид.

Некоторые из его особенностей включают в себя:

13. ZoomSounds — опрятный аудио-плеер на HTML5

ZoomSounds — опрятный аудио-плеер на HTML5 хорошо продаётся по очевидным причинам.

Благодаря своему дизайну, склоненному к SoundCloud, он предлагает несколько разных стилей и шкурок, которые упрощают оформление вашего проигрывателя, как вам нравится.

14. Chameleon HTML5 Audio Player With/Without Playlist

Аудио плеер на HTML5 Chameleon с/без списка воспроизведения, благодаря настраиваемой цветовой схеме и экранным элементам, запросто смешается с вашим сайтом.

Дополнительные возможности включают:

15. HTML5 Vinyl-styled Music Player

Как кто-то, кто любит виниловые пластинки, музыкальный проигрыватель на HTML5 с виниловым оформлением — это один из моих излюбленных в этом списке.

Мало того, что пластинка вылазит из обложки для альбома с обложкой там ещë и анимация крутящейся пластинки.

Некоторые другие функции, в которых вы также можете быть заинтересованы:

HTML5 Vinyl-styled Music Player просто самый лучший аудио-плеер на HTML5, который вы можете найти.

Заключение

Формы и функции этих аудиоплееров на HTML5 блистают, причём подавляющее большинство из них позволяет полностью настраивать дизайн под потребности вашего сайта. Если вы ищете что-то другое, вы можете рассмотреть возможность внесения изменений в один из ранее упомянутых аудио-проигрывателей или создать свой собственный с нуля.

На Envato Tuts+, вы найдёте все виды полезных ресурсов для изучения HTML5, вроде уроков по HTML5, eBooks по кодингу, и видеокурсы уроков. Изучите What Is HTML5?, начните с Decoding HTML5, а можете взять продвинутые курсы по HTML5.

Какая функция аудиоплеера на HTML5 наиболее важна для вас?

Источник