Разработка музыкального плеера
Разработка страницы музыкального плеера с возможностью поиска/выбора альбома для воспроизведения. Адаптивная верстка для устройств с шириной экрана от 320px.
Проект работает в паре с api, который предоставляет данные об имеющихся альбомах и аудиофайлы.
API проекта
Проект api реализован посредством библиотеки expressjs, с простой маршрутизацией. Данные, предоставляемые api, хранятся в директории data: файл albumsData.json с описанием модели данных и директория music со вложенными директориями для альбомов. Каждая директория альбома должна хранить треки в формате mp3 и файл изображения для обложки cover.jpg.
В общем виде модель данных представлена массивом, содержащим объектные представления информации об альбомах:
[
{
"id": "some unique album id",
"title": "album title",
"artist": "artist name",
"genre": "genre description",
"tracklist": [
{
"id": "some unique track id",
"title": "track title",
"duration": 123,
"waveformData": [12, 45, 100]
}
]
}
]
Для простоты поиска и маршрутизации принято соглашение: наименование директории с файлами альбома совпадает с id альбома, а наименования аудиофайлов (не включая расширение .mp3) - с id треков. Длительность указывается в секундах. Массив waveformData содержит информацию, необходимую для уникальной визуализации прогресс-бара плеера и не является обязательным. Данную информацию можно получить, вытянув из аудиофайла набор значений амплитуд (например, с помощью этого приложения), отфильтровав и нормализовав его (в данном случае визуализация заточена под использование наборов из 100 усредненных значений в диапазоне 3 - 100).
Клиентская часть проекта
При запуске приложения через api запрашивается информация об имеющихся на сервере альбомах. После получения описаний и изображений, происходит рендеринг альбомов с предварительной сортировкой по указанным в описаниях жанрам.
При клике на альбом открывается панель проигрывателя. Выбор трека для проигрывания выполняется кликом по нему в списке. Постановка на паузу производится повторным кликом на трек.
Визуализация прогресса воспроизведения реализована с использованием элемента canvas. При наличии в модели данных трека массива waveformData визуализация происходит с использованием этих данных. Прогресс-бар является интерактивным, позволяет по клику выполнять навигацию по треку. Также осуществляется отрисовка различными цветами буфферизованной части трека, воспроизведенной части трека, на устройствах без тач-дисплея также отображается hover-эффект. Реализовано адаптивное изменение ширины canvas при изменении размеров окна.
При окончании трека выполняется переход наследующий трек в альбоме. При окончании воспроизведения последнего трека альбома воспроизведение останавливается.
В шапке страницы есть поле ввода для фильтрации имеющихся альбомов. Фильтрация осуществляется по назнанию и исполнителю и производится непосредственно после ввода текста (без подтверждения), debounce составляет 700мс. При наличии в поле ввода текста вместо иконки поиска отображается кнопка очистки поля.
Уведомления об ошибках со стороны api реализованы в виде высплывающих сообщений (скрываются автоматически через 5 сек. или по клику на них).
Реализовано упрощенное управление с клавиатуры: переход по альбомам возможен табуляцией, выбор альбома производится нажатием Enter или Spacebar. После выбора альбома появляющаяся панель плеера автоматически получает фокус. Навигация по плееру также осуществляется табуляцией, выбранный трек воспроизводится/останавливается нажатием Enter или Spacebar. Когда фокус находится внутри компонента плеера, дополнительно обрабатываются нажатия:
- ArrowRight и ArrowLeft выполняют перемотку трека на +/- 10 сек.
- Escape скрывает панель плеера
Сборка проекта
1. git clone https://github.com/Dimeliora/js-music-player
2. cd js-music-player/client
3. npm install
4. cd ../api
5. npm install
Для сборки клиентской части проекта используется планировщик задач Gulp. Скрипты для сборки:
- serve - сборка в development-режиме и запуск dev-server
- build - сборка в development-режиме
- prod - сборка в production-режиме
В режиме production осуществляется минификация HTML, CSS и JS кода без записи source-map, создание и подключение favicon.
ВНИМАНИЕ
Для работы скрипта генерации favicon необходимо наличие файла favicon.png в директории src/favicon, там же расположен файл favicon-design.json для описания правил отображения иконок на разных устройствах.
Запуск проекта api производится из директории api:
npm start