Адаптивный аудиоплеер · HTML5 ► jQuery ► CSS3

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

Стильный адаптивный аудиоплеер HTML5 ► jQuery ► CSS3 изменяет свои размеры в зависимости от размеров экрана, актуален как для обычных мониторов, так и для дисплеев планшетов и мобильных телефонов.

Описание аудиоплеера

Аудиоплеер предназначен для типа документа HTML5, имеет адаптивные свойства менять свои размеры в зависимости от ширины родительского элемента и размеров экрана монитора или дисплея мобильного устройства. Для работы аудиоплеера требуется подключенная библиотека jQuery, цвет плеера можно изменить, внеся корректировки в значения свойств CSS3.

Подключение аудиоплеера

Для подключения понадобится подключить файл стилей audioplayer.css и скрипт управления audioplayer.js в зону <head> страниц с установленным аудиоплеером.

<link href="//atmpl.ru/design/adaptive-audio/2014/audioplayer/audioplayer.css" rel="stylesheet" />
<script src="//atmpl.ru/design/adaptive-audio/2014/audioplayer/audioplayer.js"></script>

Запуск аудиоплеера

Для запуска аудиоплеера добавьте скрипт перед закрывающим тегом </body> на страницах подключенного плеера.

<script>
$( function()
{
$( 'audio' ).audioPlayer();
});
</script>

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

Настроек минимальное количество, а точнее их всего 2, аудиоплеер может включаться принудительно или самопроизвольно.

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

Используйте код установки с тегом <audio> атрибут preload="auto" указывает на загрузку аудиофайла параллельно загрузке страницы.


<audio src="//atmpl.ru/music/rus/2014/delfin-you_are_my_joy.mp3" preload="auto"></audio>

Настройка автозапуска аудиоплеера

Если Вы хотите чтобы воспроизведение начиналось автоматически, добавьте атрибут autoplay.

<audio src="//atmpl.ru/music/rus/2014/delfin-you_are_my_joy.mp3" preload="auto" autoplay></audio>

Тест аудиоплеера на адаптивность

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

//atmpl.ru/design/adaptive-audio/2014/audioplayer/test-audioplayer.html
Тест на адаптивность аудиоплеера

Демо аудиоплеера

Нажмите на значёк выполнения кода чтобы посмотреть демо адаптивного аудиоплеера. Попробуйте добавить атрибут autoplay как показано выше, посмотрите работу автозапуска музыки.

Скачать аудиоплеер бесплатно

Скачайте файлы аудиоплеера на своё устройство бесплатно.

Скачать

Рейтинг: 4.0/5 из 4



Добавлено Автор Ник Источник Просмотров Комментариев Теги
11-11-2014 Михаил Меренков aTmpl © 2370 0 adaptive audioplayer, responsive audioplayer, адаптивный аудиоплеер, адаптивное аудио