З виходом HTML5, набирає обертів популярність аудіо плеєрів. Сьогодні ми розглянемо плагін AudioPlayer.js. завдяки якому ви зможете швидко і легко додати програвач музики на ваш сайт.
Головні характеристики даного плагіна:
- Адаптивність, на основі CSS;
- Доброзичливий для всіх типів моніторів, включаючи сенсорні;
- Важить всього 4 KB;
Використання
В першу чергу, вам необхідно вказати шлях до файлу через атрибут src. приклад:
Даний код тільки завантажить файл, без його запуску. Для запуску потрібно натиснути на кнопку Play. Інші можливі варіанти атрибута preload (none, metadata).
Для автоматичного програвання файлу після завантаження скористайтеся атрибутом autoplay:
Для того, щоб забезпечити одне і те ж аудіо в різних форматах для різних типів браузерів, використовуйте наступний код:
Ну а як же запустити плагін? Дуже просто. Підключаємо jQuery і плагін в HTML:
Також ви можете скористатися кількома додатковими параметрами. Наприклад, classPrefix, який задасть префікс атрибутам клас. Інші можливі опції:
Після запуску плагіна елемент
Якщо ж браузер не підтримує елемент audio, то він буде замінений на:
За рахунок отримання інформації відразу по двох каналах (зір і слух) ефективність навчання значно перевершує навчання по книгах. А домашні завдання і онлайн-тести дозволять вам постійно думати на мові, що вивчається і відразу перевіряти свої знання!
Якщо ви давно хочете як слід вивчити HTML, то у мене для Вас є чудова новина!
Якщо ви вже вивчили HTML і хочете рухатися далі, то наступним кроком буде вивчення технології CSS.
Якщо ви хочете розібратися з поняттями домену і хостингу, навчитися створювати бази даних, закачувати файли сайту на сервер по FTP, створювати піддомени, налаштовувати поштові скриньки для свого сайту і стежити за його відвідуваністю, то цей курс створений спеціально для вас!