HTML5 аудіо плеєр
Особливості
Як це використовувати
Додаток являє собою простий HTML-файл, який ви відкриваєте в браузері. Вам потрібно лише завантажити наш архів і розпакувати його десь на вашому комп'ютері. На жаль, через обмеження безпеки в сучасних браузерах, плеєр не буде працювати, якщо ви просто двічі клацніть на файлі index.html. Ви повинні будете відкрити його локально через веб-сервер Apache, або Nginx, отримавши до нього доступ через localhost (http: //localhost/index.html). Також ви можете просто використовувати наше демо , При цьому нічого завантажуватися не буде, так що ваша музика в безпеці.
Як це працює
Додаток прослуховує JavaScript події Drag і Drop (в перекладі з англійської означає буквально тягни-і-кидай; Бери-і-Кинь). Коли ви кидаєте mp3 файл, він витягує інформацію (назва пісні та ім'я виконавця), якщо вона є, з ID3 тегів. Кожна пісня заноситься в масив, який представляє собою наш список відтворення. Потім додаток ініціалізує аудіоплеєр Wavesurfer.js, який генерує красиву хвильову візуалізацію для кожної пісні і грає її.
Ми можемо зробити все, що очікується від аудіоплеєра - грати наступну / попередню пісню, зробити паузу, вибрати пісню і так далі. Наш плейлист також дає можливість користувачам видалити пісні з плеєра, або пошук певного треку, альбому, або виконавця.
Ви можете дізнатися більше про те, як працює плеєр, вивчивши файл /assets/js/script.js, який знаходиться в архіві для скачування.
Дизайн
- Основний макет додатки зроблений за допомогою flexbox. Це дозволяє рівномірно розташувати всі бари і кнопки і не турбуватися про чуйну дизайні. Детальніше про flexbox ви можете прочитати в статті flexbox css .
- Спливаючі ефекти для нового списку відтворення та ін. І невеликі анімації були зроблені за допомогою CSS шляхом маніпуляції класами з помощьюJQuery.
- Всі необхідні нам ікокі для цього музичного програвача вже доступні в Font Awesome!