Кейс WeavyAudio, часть 1: каталог и поиск музыки в новом дизайне

WeavyAudio — это сервис фоновой музыки для заведений: кафе, ресторанов, магазинов, спортзалов и салонов. Наша команда Breeze Professional IT Services разработала сайт, создала его, размещает и поддерживает. Это приложение на Next.js с базой данных MariaDB, которое работает под управлением PM2 за Apache на нашем собственном сервере Debian. Это часть 1 из пяти. Она рассчитана на владельцев заведений, которые хотят увидеть, как устроен поиск музыки, и на компании, планирующие индивидуальную веб-платформу или собственную музыкальную стриминговую платформу.

Часть 1 проводит посетителя от главной страницы к музыке: стартовый экран приложения, жанры, настроения, поиск, случайный выбор, новые релизы и версия для телефона. С 11 по 13 октября 2026 года у сайта новый облик: новая главная страница, новый стартовый экран в приложении и новые страницы каталога. Все скриншоты показывают этот новый облик. Первые три и последний — публичная главная страница. Экраны приложения сняты в бесплатной гостевой сессии, поэтому на них видны значок FREE и надпись «6 skips left».

Главная страница: одно обещание и взгляд внутрь приложения

Главная страница WeavyAudio тёмная, с янтарными акцентами. В верхней панели находятся For business, Pricing, Catalog и Blog, переключатель EN | PL, Log in и янтарная кнопка Start free trial. Заголовок гласит «Музыка, которую заслуживает ваше заведение. Наконец-то.», причём последнее слово набрано янтарным курсивом. Ниже: «Оригинальный каталог, лицензированный для воспроизведения в заведениях. Один фиксированный платёж за точку, до 12 зон включено — и никаких отчислений PRO за нашу музыку.»

Под кнопками стоят три галочки: 14 days free, No card required, Cancel anytime. В правой половине приложение показано в окне браузера: боковое меню, «Саундтрек вашего заведения», ряд обложек, список «Up next» и панель плеера с кнопкой Filters. Небольшая карточка сообщает «Bar · Playing» и «Schedule: Bar & Lounge».

Живая музыка, DJ-сеты и ТВ со звуком могут по-прежнему требовать отдельных лицензий; об этом говорит страница калькулятора лицензии. Эта страница достигает Largest Contentful Paint менее чем за две секунды. Совет: сначала прочитайте предложение под заголовком. В нём сказано, что покрывает один платёж.

Стена обложек: быстрый взгляд на весь каталог

Ниже на главной странице расположена стена обложек в два ряда. Строка над ней гласит «Каждая обложка принадлежит треку из каталога — 15 528 треков, и все лицензированы для воспроизведения в заведениях.» Справа находятся круглая кнопка паузы и ссылка «Слушать каталог →».

Большинство плиток — портреты исполнителей, снятые на городской улице, в тёплом свете комнаты или под сценическими прожекторами. Несколько обложек без лиц: свеча в стакане, белые строительные леса, качели на холме на закате.

Владельцу заведения это самый быстрый способ оценить разнообразие. Обложки — миниатюры WebP, поэтому стена с множеством изображений остаётся лёгкой. Совет: когда показываете WeavyAudio персоналу или партнёру, сначала прокрутите страницу до этой стены.

Как это работает: каталог с фильтрами для заведения

Следующий блок подписан «How it works» и имеет заголовок «Одно приложение для музыки, залов и документов.» Шаг 01 — «Каталог, который мы вправе лицензировать». В тексте сказано, что каждый трек оригинальный и принадлежит WeavyAudio, поэтому одной подписки хватает, чтобы лицензировать всё для вашего заведения, и что новая музыка поступает каждую неделю и раскладывается по жанрам и настроениям.

Две галочки называют практические возможности: фильтры для чистых текстов, инструментальной музыки и языка вокала, а также воспроизведение без пауз между треками в течение всего дня. Карточка «Свежее из студии» перечисляет четыре песни с обложкой, исполнителем, жанром, настроением, BPM и длительностью. Первая — Hold The Floor от Kravz: House, Dark, 138 BPM.

Над карточкой парит панель: «Музыкальные фильтры для этого заведения». Переключатель «Clean only — no explicit lyrics» включён, «Instrumental only» выключен, а «Vocal language» предлагает All, English и Polish. Совет: семейное кафе может оставить Clean only включённым, а тихий зал для обедов — попробовать Instrumental only.

Стартовый экран приложения: проигрыватель, вмещающий весь ваш день

Стартовый экран приложения WeavyAudio построен вокруг проигрывателя виниловых пластинок. Чёрная пластинка с золотым кольцом занимает левую часть, а на её этикетке написано «WeavyAudio · Tuesday · 07:00–02:00». Справа подпись гласит «A suggested day · Restaurant». Заголовок — «Саундтрек вашего заведения», а строка под ним: «Весь ваш день на одной пластинке. Золотое кольцо отмечает текущий момент: Coffee Shop.»

Карточка показывает «Now until 17:00», «Coffee Shop» и «Lo-Fi & Acoustic», а также большую янтарную кнопку «Play what fits now». Под ней: «Next at 17:00 · Restaurant Dinner». Список дня начинается с Brunch & Lunch с 07:00 до 11:00, затем Coffee Shop с 11:00 до 17:00. Ниже текст страницы перечисляет предложения для ресторана, кафе, бара, магазина, спортзала, салона, спа и лобби отеля, а также ссылку «Сделать это вашим расписанием».

В боковом меню есть Home, Browse, Search, Library и Your venue, затем группы Catalog и Tools. Плеер сообщает «Nothing playing» и «6 skips left». Совет: в начале смены нажмите янтарную кнопку и посмотрите, какой блок отмечает кольцо.

Browse all: стереоресивер на 48 жанров

Страница Browse all несёт подпись «Explore · 48 genres · 12 moods» и строку «Все жанры и настроения каталога — всё оригинальное, всё лицензировано для коммерческого воспроизведения.» Главная картинка — стереоресивер в деревянном корпусе с табличкой модели WA-1011. Две стрелочные шкалы показывают Signal и Tuning. На шкале настройки жанры расположены как радиостанции: Chill на 88.0, Nordic Bass на 88.4, PRL на 88.9.

Зелёная лампа сообщает «Tuned». Дисплей показывает «Tuned to · Station 1 of 48 · FM 88.0 MHz · Chill». Кнопки называются Tune in и Open, а рядом с большой ручкой настройки есть стрелки. Слева находится переключатель диапазонов Genres | Moods.

Под ресивером название каждого жанра дублируется обычным текстом, так что ничто не зависит от ручки. В списке соседствуют музыкальные стили и слова о заведениях: Upbeat Retail, Dinner, Workout, Late Night, Coffeehouse, Spa. Совет: владелец, не знающий музыкальных терминов, может начать со слова, которое называет его зал.

Страница жанра: короткий гид перед списком треков

У каждого жанра есть своя страница. На странице Jazz стоит заголовок «Джаз без отчислений для ресторанов и кафе» и строка «Джаз — оригинальная музыка, лицензированная для воспроизведения в заведениях.» Янтарный кристалл с мелкими светящимися точками находится рядом с заголовком, а «хлебные крошки» гласят «Genres › Jazz».

Затем идёт письменный гид. Он описывает звучание: барабаны с щётками, контрабас, мягкие клавиши и несколько джаз-хоп-пьес. В нём сказано, что джаз подходит для ужина, спокойного бранча и последнего часа перед закрытием, и советуется сочетать джаз с соседними стилями, чтобы гости не слышали повторов. Эти стили оформлены как янтарные ссылки: chill, deep house и lo-fi.

Ниже гида находятся счётчик («320+ Jazz tracks») и строки треков, в каждой из которых указаны исполнитель, название, жанр, настроение, BPM, дата добавления и ссылка «Open track page». Такие страницы жанров помогают владельцу выбирать и дают поисковым системам понятный текст для чтения. Совет: переходите по янтарным ссылкам, когда хотите чередовать стили.

Настроения: пэд из огоньков, по которому перетаскивают шайбу

Страница Moods открывается надписью «12 moods · 15,528 tracks». Главный объект — «Mood pad MP-12», тёмная панель из маленьких светящихся точек. На ней расположены двенадцать названий настроений, а круглая шайба отмечает выбранное. Здесь она стоит на Mellow. Это подбор по настроению как музыкальный инструмент, а не как список.

Боковой дисплей показывает «Mood 06/12», метку «Most played», затем Mellow, 113 BPM ±12 и 2,843 tracks. Легенда объясняет оси. Вверх — средний темп треков настроения, измеренный. Поперёк — от тёмного к яркому, и страница сама говорит, что это «our placement, not a measurement».

Так менеджер видит, какая ось — данные, а какая — оценка на глаз. Текст страницы перечисляет все двенадцать настроений от самого быстрого до самого спокойного, от Dark примерно на 129 BPM до Calm примерно на 99. Совет: для разминки в спортзале смотрите ближе к верху пэда, а для неспешного утра — к низу.

Поиск: панель Seek, показывающая, куда попадают результаты

У поиска своя страница с заголовком «Найдите свой звук». Прибор называется «Seek · Model SK-48». В его шапке указан размер каталога: 15,528 tracks, 48 genres, 12 moods и 2,084 artists, а лампа сообщает «Found 45». В большом поле стоит слово «house».

Под полем находится столбчатая шкала от 1 до 48 с названием «Куда попадают результаты среди жанров». Один высокий янтарный столбик стоит на отметке 25 — там House находится в списке из 48 жанров. Два маленьких столбика отмечают Lo-Fi и Hip-Hop. Двенадцать круглых ручек настроений показывают числа: Energetic 13, Dark 11, Mellow 8, Upbeat 6, Calm 2, остальные нули. Итог гласит «40 tracks · 2 artists · 3 genres & moods».

Этот поиск по каталогу принимает название, исполнителя, жанр или настроение, а шкала показывает, куда попадает слово. Совет: после поиска посмотрите на ручки настроений. Если большинство результатов Dark, они могут быть слишком тяжёлыми для зала, где обедают.

Random: не уверены? Тяните жребий

Страница Random несёт подпись «Discover» и заголовок «Not sure? Draw.» В тексте предлагается ввести настроение или ничего не вводить и бросить кости. Страница сопоставляет идею с жанрами, настроениями и исполнителями каталога. В поле подсказка: «спокойный джаз для ужина, польский синт, энергия для тренировки».

Двенадцать чипов заполняют поле одним касанием, от calm и upbeat до evening, focus, polish и classical. Трёхпозиционный переключатель определяет, что вы тянете: Track (выбрано, янтарным), Playlist или Artist. Ниже находится большой янтарный кубик. Текст страницы подписывает его «Tap to draw».

У бармена нет времени листать тысячи треков. Один чип, один переключатель и одно касание дают результат. Совет: выберите Playlist для более длинного блока музыки и чип, подходящий к часу дня.

Новые релизы: прессовый цех с ежедневным журналом

Страница Fresh releases превращает список новых песен в небольшой прессовый цех. Подпись гласит «Fresh pressings · 4 tracks pressed today». На картинке зелёный гидравлический пресс с манометрами и табличкой «WeavyAudio Pressing Works · Model WA-1011 · 150 T». Справа ждёт стопка пластинок.

Слева на зажиме висит производственный листок. В нём написано «Job 5/8 · Press no. 2» и «Только что из-под пресса», затем Tańczy z nami wiatr от The Newark Kids, жанр House, 124 BPM и «Pressed yesterday». Счётчик показывает 00004, а красная аварийная кнопка Emergency Stop останавливает работу.

Под машиной текст страницы перечисляет «Журнал прессовки»: треки, опубликованные по дням за последние 14 дней, главные жанры последних семи дней и полку «Just pressed» с пометками вроде «pressed 15 h ago». Совет: открывайте эту страницу раз в неделю, чтобы услышать, что нового.

На телефоне: та же главная страница, друг под другом

Многие владельцы впервые откроют WeavyAudio на телефоне, поэтому у главной страницы есть мобильная версия. В верхней панели остаются логотип, янтарная кнопка Start free trial и круглая кнопка меню. Ссылки для компьютера и переключатель языка при такой ширине убраны с панели. Заголовок занимает три строки, а слово «Finally.» набрано янтарным курсивом.

Предложение остаётся полным, включая «up to 12 zones included» и «no PRO royalties on our music». Затем идут две широкие кнопки: янтарная «Start free trial →» и контурная «Слушать каталог». Под галочками виден предпросмотр приложения с полем поиска, «Саундтрек вашего заведения» и четырьмя обложками.

Телефоны и планшеты время от времени теряют связь. Плеер может продолжать работать офлайн благодаря service worker и воспроизводить треки, сохранённые на устройстве. Главная страница также сообщает, что приложение работает в браузере, на планшете Android и на телефоне. Совет: откройте сайт на собственном телефоне, прежде чем принимать решение.

Так посетитель находит музыку в WeavyAudio — от первого обещания на главной странице до случайного выбора. Часть 2 уходит на уровень глубже: исполнители, альбомы и треки. Часть 5 показывает старый и новый дизайн рядом с пояснениями, что изменилось, а что осталось.

Планируете индивидуальную веб-платформу с большим каталогом, понятным поиском и быстрыми страницами? Breeze Professional IT Services может спроектировать, создать, разместить и поддерживать её. Свяжитесь с нами, чтобы обсудить ваш проект.

Этот проект разработан, создан и размещается нашей командой. Обзор — в материале Наш новейший проект: WeavyAudio, на странице проекта WeavyAudio и среди других наших проектов, или свяжитесь с нами по поводу вашей собственной платформы.