Мабуть, перш ніж завантажувати і взагалі встановлювати будь-якої скрипт, потрібно дізнатися про нього по більше, а точніше його функціональні особливості. Ось з ними ми зараз і познайомимося!
унікальність
Touch ефект
Мабуть незамінна річ при використанні будь-яким пристроєм, що мобільним або ПК.
адаптивний
Синхронізація
Вся ваша аудіо запис має отсчетное час, індикатор завантаження і повноцінну буферизацию, як і регулювання гучності.
Міні версія аудіоплеєра важить всього 4 кілобайти, що істотно знижує потребу в розмірі зберігання скрипта.
Насамперед, нам просто необхідно підключити всі стилі, js бібліотеки і скрипти. Тому весь повний список, відразу нижче:
Файл demo.css містить в собі стандартні стилі скрипта, плюс трохи доповнення. Файли reset.css і main.css потрібні виключно для створення дизайнерського образу плеєра. З приводу бібліотеки jquery я думаю Вам і так все зрозуміло, а скрипт audioplayer.js має весь базовий функціонал аудіоплеєра.
Таким ось простим кодом, ми підключаємо сам аудіоплеєр. Як бачимо атрибут preload варто в автоматичному режимі, що означає наступна композиції буде автоматично програватися після попередньої. Ну, а далі йде тег source йде в якому вказується повний шлях в src до виконуваного аудіо файлу.
З приводу самого скрипта, він має безліч налаштувань, всі вони прописані на офіційному сайті або можна подивитися в скрипті audioplayer.js.
Щоб аудіоплеєр був активним, потрібно його підключити. Для цього після коду HTML. вставляємо наступне:
Найбільший для мене інтерес, надав файл стилізації самого плеєра, адже він повноцінно розмічений на області, якими дуже зручно користуватися як стилізації дизайну плеєра. Наприклад, клас:
Надає стилізацію смузі завантаження аудіо записи.
Надає стилізацію кнопок програвання і паузи.
Надає стилізацію відліку початку програвання аудіо записи.
Надає стилізацію кінця відліку аудіо записи.
Надає стилізацію гучності звуку аудіо записи.