Адаптивний аудіоплеєр · 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 як показано вище, подивіться роботу автозапуску музики.
Завантажити аудіоплеєр безкоштовно
Скачайте файли аудіоплеєра на свій пристрій безкоштовно.
завантажити