Подключение и настройка адаптивного аудиоплеера
Подключение белого аудиоплеера
Белый скин адаптивного аудиоплеера установлен по умолчанию, используется базовый класс 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 Скачать с сервера