Enzora Music — интерфейс музыкального стриминга
Enzora Music — наш внутренний демо-проект: интерфейс музыкального стриминга в стиле Spotify с поиском, плеером, плейлистами и избранным. Демо работает прямо в браузере на открытом каталоге iTunes, а анимации идут в 60 FPS.
Задача
Enzora Music — наш внутренний продуктовый демо-проект, а не коммерческий сервис и не заказ клиента. Это веб-интерфейс музыкального стриминга с поиском, карточками артистов, плеером, плейлистами и избранным. Spotify служил только стилистическим ориентиром и с проектом не связан, а демо показывает, как мы собираем насыщенные интерактивные интерфейсы.
Мы поставили себе задачу собрать интерфейс музыкального стриминга, который с первого взгляда узнаётся как привычный сервис. Стилистическим ориентиром стал Spotify: боковая навигация, сетка обложек и плеер, закреплённый внизу экрана. Такую раскладку многие знают наизусть, поэтому любое расхождение в отступах, порядке блоков или поведении кнопок сразу бросается в глаза.
Интерфейс без музыки остаётся картинкой. Демо должно было находить реальных исполнителей и треки, показывать обложки и проигрывать фрагменты песен, но при этом обходиться без собственного сервера, базы данных и музыкальной библиотеки: весь проект — одна статическая страница.
Плеер — центр такого продукта. Кнопки воспроизведения, перемотка, громкость и таймер должны откликаться сразу, а карточки, меню и оверлеи — двигаться плавно. Малейший рывок анимации или «прыгающий» таймер разрушают ощущение живого сервиса, даже если всё остальное сделано аккуратно.
Наконец, раскладка с боковой панелью и нижним плеером рассчитана на широкий экран. На ноутбуке, планшете и телефоне панель, строка поиска и плеер начинают спорить за место, и интерфейс нужно было перестраивать постепенно, не теряя ни одного сценария — от поиска до управления плейлистами.
Решение
Мы собрали демо как одностраничное приложение из трёх зон: слева навигация и библиотека, в центре поиск, артисты и сетка треков, внизу — постоянный плеер с обложкой и названием. Тёмная палитра и зелёный акцент повторяют стилистический референс, а все подписи интерфейса — на русском.
При открытии демо сразу загружает популярные треки. Поиск находит песни и исполнителей, карточка артиста открывает окно с его композициями и поиском по ним, а любой трек можно запустить, отметить сердцем или добавить в плейлист. Плейлисты и избранное сохраняются в браузере без регистрации, а вход, регистрация и подборки «Для вас» и «Новинки» честно открывают окно «Функция в разработке».
Технически это чистые HTML, CSS и JavaScript без фреймворков, размещённые на Vercel. Каталог приходит из открытого API iTunes через два прокси: если первый не ответил за 15 секунд, запрос уходит на второй. Анимации построены на CSS-трансформациях, а таймер плеера обновляется в такт кадрам браузера.
Раскладка стримингового интерфейса
Боковая панель с разделами «Главная», «Для вас», «Новинки», «Поиск», «Плейлисты» и «Избранное», центральная сетка обложек и плеер внизу стоят там, где их ожидают увидеть. Зелёный акцент на тёмном фоне выделяет главное действие — воспроизведение.
Реальный каталог треков
Демо обращается к открытому API iTunes: на старте подгружаются популярные треки, поиск за раз возвращает до 24 песен и 12 исполнителей, а кнопка «Загрузить ещё» добавляет следующую порцию. Показываются только треки с превью-фрагментом, поэтому пустых карточек нет.
Плеер с полным управлением
Плеер переключает треки вперёд и назад, перематывает по шкале с заливкой прогресса, показывает текущее время и длительность и регулирует громкость. Когда трек заканчивается, сразу включается следующий, а пробел ставит воспроизведение на паузу, если курсор не в поле поиска.
Плейлисты без регистрации
Плейлисты создаются, переименовываются и удаляются в пару кликов, трек добавляется в существующий список или сразу в новый, а повтор одного трека в плейлисте блокируется. Избранное и плейлисты хранятся в браузере, поэтому библиотека остаётся на месте после перезагрузки страницы.
Артисты и поиск по трекам
Карточки исполнителей показывают имя и жанр. По клику открывается окно артиста с его треками и отдельной строкой поиска по названию песни или альбома, откуда трек можно сразу включить, добавить в избранное или в плейлист.
Вёрстка под любую ширину
Раскладка перестраивается на девяти брейкпоинтах: боковая панель сужается с 260 до 220 и 80 пикселей, а на телефоне превращается в выезжающее меню. На экранах уже 1500 пикселей строка поиска сворачивается в иконку с полноэкранным оверлеем, а подписи кнопок прячутся, оставляя иконки.
Результаты
Главные итоги проекта в цифрах.
- 60 FPSПлавность интерфейса
Карточки, меню и плеер анимируются CSS-трансформациями, поэтому движение в демо остаётся плавным.
- 1:1Точность к референсу
Боковая навигация, сетка обложек и нижний плеер расположены так же, как в стилистическом референсе.
- 9Брейкпоинтов вёрстки
Интерфейс перестраивается на девяти ширинах экрана — от 1500 до 550 пикселей.
- 12 дн.От идеи до демо
Интерфейс, плеер, библиотека и подключение каталога заняли двенадцать дней.
Технологии в проекте
Стек, на котором мы строили решение под задачи клиента.
- Vercel
- HTML5
- CSS3
- JavaScript
Похожие кейсы
Готовы стать следующим кейсом?
Расскажите о задаче — менеджер соберёт команду, посчитает смету и пришлёт коммерческое предложение в первый час после заявки. Без обязательств и без рассылок.