1. Особливості
2. Як використовувати
3. Як це працює
4. Дизайн

чудова публікація

Чудова публікація на, забезпечена вихідним кодом доводить ту тезу, що ваш браузер є самостійною середовищем виконання і місцем для експериментів. Ця стаття називається просто «Музичний плеєр», а не експеримент з тієї причини, що думка ця прийшла в голову і експлуатується вже років п'ять і цінність полягає в наявності робочого коду as-is як приклад грамотного використання бібліотек js. Ну, і для вагомості, адже «В своїй вітчизні пророків немає». А тепер, увага, починаємо:

На цей раз ми хочемо поділитися з вами крутим результатом зробленого нами експерименту. Це музичний плеєр, який оселився в вашому браузері. Він використовує потужний HTML5-рідер і аудіо-Інтерфейси. В результаті Ви можете просто перетягувати mp3-файли зі свого комп'ютера прямо в браузер і вони будуть автоматично додані в список відтворення.

Особливості

• Ви можете завантажити МР3 файли зі свого комп'ютера, просто перетягуючи їх мишею в браузер. А любителі Chrome, крім того можуть забирати цілі папки.
• Немає будь-якого серверного коду (тому немає необхідності в PHP або node.js) - одінственний HTML-файл.
• Нічого не треба довантажувати - mp3-файли зберігаються в вашому браузері.
• Чудова аудіо візуалізація відтвореного звуку завдяки.
• Вибір і пошук композиції у списку відтворення.
• Обв'язка для читання ID3 тегів с.
• Випадкове відтворення і функція повтору.
• Немає залежності від інтернету - все працює і запускається локально в автономному режимі.
• Responsive design.

Як використовувати

Додаток являє собою простий HTML-файл, який Ви відкриваєте в браузері. Потрібно просто завантажити наш zip-файл за допомогою кнопки вище, розпакувати його в будь-яке місце свого комп'ютера. На жаль, іноді за вимогами безпеки в сучасних браузерах він не буде працювати, якщо просто двічі клікнути на index.html. Тоді доведеться запустити його, використовуючи локальний веб-сервер, наприклад, Apache або nginx і відкрити його з localhost. Але Ви можете просто подивитися наше демо і нічого не завантажувати - музика безпечна.

Як це працює

Додаток JavaScript очікує події перетягування. Коли ви тягнете mp3-файл, воно витягує інформацію про назву пісні, імені виконавця, якщо це можливо, з файлу. Інформація про кожну пісню поміщається в масив, який і являє собою наш плейлист. Далі додаток ініціалізує аудіо плеєр, який створює приголомшливі хвилі для візуалізації кожної пісні і програє її.

Тут ми можемо робити все, що очікуємо від рідного аудіо плеєра - Наступний / Попередній, Пауза, Вибір пісні і так далі. Плейлист дає можливість видаляти пісні з плеєра або шукати потрібний трек, альбом або виконавця.

Про те, як плеєр працює Ви можете дізнатися, прочитавши /assets/js/script.js файл з вихідним кодом. Він добре прокоментований і легко сприймається.

Дизайн

• Основний макет додатки побудований на адаптивному дизайні. Це дозволило нам рівномірно розподілити всі бари і кнопки без необхідності турбуватися про оперативність. Детальніше про адаптивному дизайні.
• Pop Up ефект відтворення та інші основні моменти, невелика анімації зроблені на CSS, маніпулюючи класами, використовуючи jQuery.
• Всі значки, в яких ми потребували для цього музичного плеєра доступні в - спасибі, хлопці!

Додаткова література

Музичний плеєр на HTML5 , опубліковано До ВВ , Ліцензія - Creative Commons Attribution-NonCommercial 4.0 International .