Описание аудиоплеера
Аудиоплеер предназначен для типа документа 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 как показано выше, посмотрите работу автозапуска музыки.
Скачать аудиоплеер бесплатно
Скачайте файлы аудиоплеера на своё устройство бесплатно.
Скачать