На этот раз мы хотим поделиться с вами классным аудио плеером. Он использует мощный HTML5 File Reader, и аудио API. В результате, вы можете просто перетащить mp3 файлы с вашего компьютера в браузер и они будут автоматически добавлены в список воспроизведения.
Особенности
- Вы можете загружать mp3 файлы с компьютера, перетаскивая их в браузере. Пользователи Chrome пользователи могут проделывать тоже самое с папками.
- Аудио плеер не использует какого-либо серверного кода (поэтому нет необходимости в PHP или Node.js) - только один файл HTML.
- Ничего не загружается - mp3-файлы хранятся в вашем браузере.
- Крутая аудио визуализация и воспроизведение благодаря Wavesurfer.js.
- Выбор и поиск песни в плейлисте.
- Обложки и ID3-теги с помощью JavaScript ID3 Reader.
- Опции повтор и воспроизведение в случайном порядке.
- Не нужен интернет - все работает так же хорошо, как если бы вы запускатили файлы локально.
- Адаптивный дизайн.
Как это использовать
Приложение представляет собой простой 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!