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

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

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

Подключение и настройка адаптивного аудиоплеера

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

Белый скин адаптивного аудиоплеера установлен по умолчанию, используется базовый класс progression-skin.

<style>
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/progression-player.css");
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/font-awesome.min.css");
</style>

<script src="http://atmpl.ru/design/adaptive-audio/2015/media-audio/mediaelement-and-player.min.js"></script>

<div class="responsive-wrapper responsive-audio">
<audio class="progression-single progression-skin" controls="controls" preload="none">
<source src="http://atmpl.ru/design/adaptive-audio/2015/media-audio/aTmplDemoMuzik1.mp3" type="audio/mp3"/>
</audio>
</div>

<script>
$('.progression-single').mediaelementplayer({
features: ['playpause','current','progress','duration','volume']
});
</script>

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

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

Для использования адаптивного аудиоплеера с серым скином потребуется добавить файл стилей skin-fancy.css и дополнительно использовать класс стилей progression-fancy.

<style>
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/progression-player.css");
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/font-awesome.min.css");
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/skin-fancy.css");
</style>

<script src="http://atmpl.ru/design/adaptive-audio/2015/media-audio/mediaelement-and-player.min.js"></script>

<div class="responsive-wrapper responsive-audio">
<audio class="progression-single progression-skin progression-fancy" controls="controls" preload="none">
<source src="http://atmpl.ru/design/adaptive-audio/2015/media-audio/aTmplDemoMuzik1.mp3" type="audio/mp3"/>
</audio>
</div>

<script>
$('.progression-single').mediaelementplayer({
features: ['playpause','current','progress','duration','volume']
});
</script>

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

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

Для подключения адаптивного аудиоплеера чёрного цвета подключите файл стилей skin-default-dark.css, и добавьте класс стилей чёрного скина progression-default-dark.

<style>
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/progression-player.css");
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/font-awesome.min.css");
@import url("http://atmpl.ru/design/adaptive-audio/2015/media-audio/skin-default-dark.css");
</style>

<script src="http://atmpl.ru/design/adaptive-audio/2015/media-audio/mediaelement-and-player.min.js"></script>

<div class="responsive-wrapper responsive-audio">
<audio class="progression-single progression-skin progression-default-dark" controls="controls" preload="none">
<source src="http://atmpl.ru/design/adaptive-audio/2015/media-audio/aTmplDemoMuzik1.mp3" type="audio/mp3"/>
</audio>
</div>

<script>
$('.progression-single').mediaelementplayer({
features: ['playpause','current','progress','duration','volume']
});
</script>

Демо чёрного аудиоплеера

Описание скрипта управления аудиоплеером

Управление элементами контроля аудиоплеера заключается в добавлении или исключении соответствующих команд в скрипте.

playpause
Отображение на аудиоплеере кнопки ПУСК - ПАУЗА
current
Таймер воспроизведения
progress
Демонстрация строки прогресса воспроизведения
duration
Показать данные о продолжительности композиции
volume
Элемент контроля громкости
Элементы управления аудиоплеером

Настройка автоматического воспроизведения

Для автоматического запуска воспроизведения адаптивного аудиоплеера добавьте атрибут autoplay для тега <audio>, попробуйте добавить авто воспроизведение в коде демо примеров.

<audio class="progression-single progression-skin" controls="controls" preload="none" autoplay>
Автозапуск аудиоплеера

Дополнительные сведения

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

Подключение нескольких аудиоплееров на странице

Шрифты необходимо подключить на сервере сайта где будет работать адаптивный аудиоплеер, архив для скачивания содержит требуемые файлы, загрузите их на свой сервер и измените путь к ним в font-awesome.min.css иначе кнопки управления не будут отображаться.

Изменение адреса к файлам шрифтов

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

Аудиоплеер прошол тест на адаптивность и способен изменять свои размеры в зависимости от размеров экрана компьютера и дисплеев мобильных устройств. Ниже предоставлена ссылка на страницу с плеером Вы можете произвести проверку сами перейдя на страницу теста.

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

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

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

Скачать с GitHub Скачать с сервера

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


Добавлено Автор Ник Источник Просмотров Комментариев Теги
30-01-2015 Михаил Меренков aTmpl © 2187 0 Аудиоплеер, адаптиный, скачать бесплатно