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

Великолепная публикация Experiment: HTML5 Music Player на TutorialZine, снабженная исходным кодом доказывает тот тезис, что ваш браузер является самостоятельной средой исполнения и местом для экспериментов. Эта статья называется просто «Музыкальный плеер», а не эксперимент по той причине, что мысль эта пришла в голову и эксплуатируется уже лет пять и ценность заключается в наличии рабочего кода as-is в качестве примера грамотного использования библиотек js. Ну, и для весомости, ведь «В своём отечестве пророков нет». А теперь, внимание, начинаем:

На этот раз мы хотим поделиться с вами крутым результатом сделанного нами эксперимента. Это музыкальный плеер, который поселился в вашем браузере. Он использует мощный HTML5-ридер и аудио-Интерфейсы. В результате Вы можете просто перетаскивать mp3-файлы со своего компьютера прямо в браузер и они будут автоматически добавлены в список воспроизведения.

Особенности

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

Демо    Скачать

music-player-screen-1024x576[1]

Как использовать

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

Как это работает

Приложение JavaScript ожидает события перетаскивания. Когда вы тащите mp3-файл, оно извлекает информацию о названии песни, имени исполнителя, если это возможно, из ID3-тегов файла. Информация о каждой песне помещается в массив, который и представляет собой наш плейлист. Далее приложение инициализирует Wavesurfer.js аудио плеер, который создает потрясающие волны для визуализации каждой песни и проигрывает её.

Здесь мы можем делать все, что ожидаем от родного аудио плеера — Следующий/Предыдущий, Пауза, Выбор песни и так далее. Плейлист дает возможность удалять песни с плеера или искать нужный трек, альбом или исполнителя.

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

Дизайн

  • Основной макет приложения построен на адаптивном дизайне. Это позволило нам равномерно распределить все бары и кнопки без необходимости беспокоиться об оперативности. Подробнее о адаптивном дизайне здесь.
  • Pop Up эффект воспроизведения и другие основные моменты, небольшая анимации сделаны на CSS, манипулируя классами, используя jQuery.
  • Все значки, в которых мы нуждались для этого музыкального плеера доступны в потрясающем Font Awesome — спасибо, парни!

Дополнительная Литература

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Лимит времени истёк. Пожалуйста, перезагрузите CAPTCHA.