Музыкальный плеер на HTML5

Опубликовано: 10 марта 2015 г.
  • Аудио/Видео
  • Пример
  • Скачать
На этот раз мы хотим поделиться с вами классным аудио плеером. Он использует мощный HTML5 File Reader, и аудио API. В результате, вы можете просто перетащить mp3 файлы с вашего компьютера в браузер и они будут автоматически добавлены в список воспроизведения.
Аудио плеер на HTML5

Особенности

  • Вы можете загружать mp3 файлы с компьютера, перетаскивая их в браузере. Пользователи Chrome пользователи могут проделывать тоже самое с папками.
  • Аудио плеер не использует какого-либо серверного кода (поэтому нет необходимости в PHP или Node.js) - только один файл HTML.
  • Ничего не загружается - mp3-файлы хранятся в вашем браузере.
  • Крутая аудио визуализация и воспроизведение благодаря Wavesurfer.js.
    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!
Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
CanvasSPAcssjavascriptjqueryphotoshopphpunitywordpress{"fieldValue":[{"image_preview":"","image_demo":"","example":""}],"fieldSettings":{"autoincrement":1}}{"fieldValue":[{"image_preview":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","image_demo":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","example":""}],"fieldSettings":{"autoincrement":1}}Аудио/Видеоаккордеонанимациябазы данныхбраузерные игрыверсткагалереяграфикакартыкнопкименюпараллаксподсказкипопаппрелоадерслайдертаймерформычекбоксыэлементы интерфейса
© 2009-2017 WebSketches.ru