FRP SPINS: как мы обновили платформу Shazam для диджеев — теперь она поддерживает 720 тысяч треков

Что мы сделали — в одном абзаце

Фора Софт превратила Franchise Record Pool (FRP) — сервис для диджеев, похожий на Shazam, с библиотекой из 720 000 треков — из устаревшего одностраничного продукта в полноценную экосистему из четырёх приложений: обновлённое веб-приложение, мобильные приложения на React Native для iOS и Android, а также десктопное приложение на Electron для Mac и Windows. Мы внедрили две функции, о которых диджеи просили давно: движок распознавания «Shazam для ремиксов», который находит все версии трека за две секунды, и голосового AI-ассистента для плейлистов, который понимает запросы на естественном языке — например, «итальянский поп, 90-е, 140 BPM» — и сразу формирует готовый к проигрыванию сет. Эта статья — дополнение к нашему гайду по созданию FRP: в нём разбираются архитектура и стоимость разработки с нуля, а здесь мы рассказываем об этапе улучшений на уже работающей платформе и о UX-решениях, которые помогли профессиональным диджеям перейти с старого клиента на SPINS всего за шесть недель.

Почему старую FRP пришлось перестраивать

FRP работала уже несколько лет и имела лояльную базу профессиональных диджеев, но одновременно накапливались три серьёзные проблемы. Первая: интерфейс был создан в эпоху до смартфонов — карточки треков пытались уместить восемь параметров в один ряд, который нормально смотрелся на 1440px, но превращался в нечитаемую кашу на 768px. Вторая: не было нативного приложения — диджеям, готовившимся к выступлению на iPad или хватавшим трек в последний момент с телефона, приходилось открывать десктопный сайт в мобильном Safari, и процесс скачивания превращался в мучение. Третья: каталог вырос до полумиллиона треков, но поиск по-прежнему работал как обычный SQL-запрос с LIKE — он хорошо справлялся с названиями, но был бесполезен для запросов вроде «песни, похожие на эту» или «все ремиксы этого трека».

Основатели выбрали Фора Софт, потому что мы уже имели опыт создания аудиостриминговых продуктов в большом масштабе и ранее публиковали разбор кейса о работе с лицензированными каталогами. Им не хотелось начинать с нуля. Нужен был аккуратный апдейт интерфейса, нативные клиенты и две ключевые функции: распознавание треков, как у Shazam, и генерация плейлистов с помощью ИИ.

Рабочий процесс профессионального диджея, под который мы проектировали

Прежде чем перерисовать хоть один экран, мы неделю наблюдали за работой четырёх действующих диджеев — двух клубных резидентов из Нью-Йорка, мобильного свадебного диджея из Далласа и радиоведущего из Лондона, работающего на Serato. Рабочий процесс везде был одинаковым: два-три вечера в неделю они просматривали музыкальные пулы, за одну сессию скачивали по двадцать-сорок перспективных треков, затем загружали их в Serato или rekordbox для анализа, а в ночь выступления — прослушивали и отсеивали. Скорость поиска была важнее визуальной красоты — никто не станет разглядывать анимацию карточки, когда нужно уложиться в 90-минутное окно подготовки.

Чего они просили снова и снова: видеть BPM, тональность и уровень энергии без наведения курсора и кликов; возможность услышать 30-секундное превью одним касанием; способ найти «все версии этой песни» (чистую, explicit, акапеллу, инструментал, ремиксы); и синхронизацию папок, которая просто работает с тем, как их диджейский софт уже читает файлы. Мы строили под эти четыре потребности, а остальное не трогали.

Полный редизайн интерфейса — что изменилось и почему

Старый интерфейс скрывал важные данные под наведением курсора. В новом они всегда на виду. Мы перешли к компактной строчной раскладке с четырьмя постоянно видимыми колонками: название и исполнитель, жанр и поджанр, BPM и тональность — и одной кнопкой действий, которая раскрывается в «скачать», «превью» или «добавить в плейлист». Сетка построена по 12-колоночной системе, поэтому на планшете она плавно переходит к 8 колонкам, а на мобильных устройствах складывается в карточную раскладку — при этом ничего не теряется.

Навигация переехала из бокового дерева в постоянную верхнюю панель и контекстную боковую полосу. Четыре основных раздела: Каталог, Плейлисты, Загрузки, Настройки. Всё остальное теперь строится вокруг поиска — наши данные показывают, что более 70% сессий начинаются с поискового запроса. Фильтры мы переделали в виде чипов-пилюль (метка, диапазон BPM, тональность, год, уровень эксклюзивности), чтобы применённые фильтры всегда были видны без открытия модального окна.

Библиотека треков: показываем BPM, тональность и источники — всё, что важно

Каталог охватывает 720 000 лицензированных треков от Sony Music, Universal, Virgin и десятков независимых лейблов. На старой платформе у каждого трека были подробные метаданные — BPM, тональность, жанр, поджанр, год, лейбл, тип микса, окно эксклюзивности, исходные файлы — но интерфейс показывал всё это в виде одного абзаца. Диджеи просто пролистывали эти данные. Мы перестроили панель деталей на три блока: вверху — ключевые параметры для выбора (BPM, тональность, энергия), посередине — творческий контекст (лейбл, год, релизный тир), внизу — операционная информация (форматы файлов, история скачиваний, дерево ремиксов).

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

Экосистема SPINS: веб, десктоп и мобильная версия как единое приложение

До этого проекта FRP существовала только как сайт. Мы создали вокруг него три новых клиента и дали всему набору общее название продукта — SPINS — чтобы диджеи понимали: они получают один продукт на четырёх платформах, а не четыре отдельных инструмента. Плейлист, который вы создаёте на iPhone, появляется в десктопном приложении буквально через несколько секунд. Трек, скачанный на Windows, уже лежит в папке Serato на вашем Mac, если вы вошли в систему на обоих устройствах. Именно синхронизация состояния заняла больше всего времени на настройку.

Все четыре клиента обращаются к одному и тому же GraphQL API и используют общее подмножество компонентов из одной React-библиотеки. Дизайн-токены — цвета, шкала шрифтов, отступы — хранятся в одном репозитории, который подключает каждый клиент. Когда дизайнеры меняют правила отступов, изменения автоматически применяются во всех приложениях — вебе, десктопе и двух мобильных версиях — при следующей сборке.

Мобильные приложения на React Native — для iOS и Android

Мы выбрали React Native, потому что веб-команда FRP уже работала с React, а сроки были жёсткими. Плюсы: около 85% кода общие для iOS и Android, одна команда, один набор тестов. Минусы: пришлось написать два нативных модуля — один для фоновых загрузок, которые продолжают работать после сворачивания приложения на iOS, и второй для аудиографа, чтобы плавно переключать превью-клипы без потери кадров из-за ограничений потока React.

Мобильный сценарий заточен под прослушивание: диджей просматривает каталог в дороге, отмечает треки звёздочкой, а десктопное приложение скачивает их автоматически при следующем подключении к сети. Паттерн «звезда — в очередь на скачивание» стал самой популярной функцией уже через месяц после запуска. Изначально мы вообще не рассматривали скачивание на устройство как основной сценарий — ведь никто не работает с телефона, — но добавили офлайн-превью, чтобы можно было слушать отмеченные треки без интернета. Посмотрите, как мы формируем команду на React Native рядом с веб- и бэкенд-разработкой, на странице наших услуг по разработке программного обеспечения на заказ.

Десктопное приложение на Electron для Mac OS и Windows

Десктопное приложение — это место, где диджеи выполняют основную работу: массовое скачивание, синхронизация папок, перетаскивание треков в Serato, общение с другими участниками пула. Мы построили его на Electron с тонким нативным слоем для отслеживания файловой системы и реализации привычного поведения — сворачивания в системный трей. Чат работает на той же WebSocket-инфраструктуре, что и у наших видеостриминговых клиентов: как только мы подключили готовый стек для стриминга, добавить чат заняло всего один день.

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

Распознавание музыки — это «Shazam для ремиксов»

Движок распознавания решает задачу, с которой не справляется ни один потребительский Shazam: он находит оригинал по ремиксу, бутлегу или эдиту. Диджей, услышавший в клубе незнакомый бутлег, может напеть или записать десять секунд на телефон, отправить это в SPINS — и мы найдём все версии этого трека в каталоге: чистую, explicit, радиоэдит и несколько ремиксов. Потребительские приложения такого не умеют.

Под капотом движок использует алгоритм распознавания по частотным пикам в стиле Shazam, но обученный на дереве ремиксов, а не только на оригинальных версиях. Каждый отпечаток в индексе содержит ссылку на оригинал и связанные ремиксы, поэтому при совпадении возвращается вся «семья» треков, а не один вариант. Технические детали реализации подробно описаны в нашем гайде по созданию FRP — а этот материал посвящён тому, почему пользовательский опыт воспринимается как магия, а не как обычный поиск.

AI-плейлисты по голосу — «итальянский поп, 90-е, 140 BPM»

Вы удерживаете кнопку микрофона, говорите, что хотите, отпускаете. SPINS анализирует ваш запрос, преобразует его в структурированный поиск по метаданным каталога — жанру, поджанру, эпохе, диапазону BPM и совместимости тональностей — добавляет вектор настроения, построенный на основе признаков из Essentia, и возвращает стартовый набор из 20 треков, который можно сохранить, перемешать или отредактировать. Весь процесс занимает меньше четырёх секунд при хорошем соединении.

Голосовой ввод построен на Whisper от OpenAI (0,45 ₽ за минуту аудио — то есть почти ничего), а преобразование запроса в структуру — на GPT-4o с жёсткой JSON-схемой. Логика подбора плейлиста — наша собственная: она комбинирует варианты от LLM с проверкой на согласованность по BPM, чтобы разница между соседними треками не превышала ±3 BPM и они были в совместимых тональностях по системе Camelot. Диджеи говорят, что именно это отличает «интересный плейлист» от «того, по которому реально можно диджеить». Если хотите добавить такой голосовой функционал в свой продукт — начните с наших услуг по интеграции ИИ.

Чат, синхронизация папок и перетаскивание в Serato

Диджеи попросили три небольшие функции, которые в итоге сильнее всего повлияли на удержание пользователей — даже больше, чем любые флагманские нововведения. Первая: чат в десктопном приложении, где диджеи одного пула могут писать друг другу и делиться внутренними ремиксами. Вторая: возможность создавать папки для загрузок, повторяющие структуру, по которой Serato и rekordbox сканируют файлы — так скачанный трек сразу появляется в софте диджея, без необходимости перемещать его вручную. Третья: перетаскивание треков из десктопного приложения SPINS прямо в открытое окно Serato. Electron поддерживает эту функцию нативно, но на Windows потребовалась дополнительная доработка.

Именно эти функции сделали переход со старого клиента FRP похожим на получение лучшего инструмента, а не на изучение нового. В каждом интервью после запуска синхронизацию папок называли по имени.

Архитектура мультиплатформенной системы

Все четыре клиента (веб, десктоп, iOS, Android) общаются с единым GraphQL-шлюзом, который направляет запросы в пять бэкенд-сервисов: Каталог (настроен на частые чтения, использует Postgres и кэш Redis для быстрого доступа к популярным трекам), Идентификация (Cognito, обёрнутый в тонкий слой), Загрузки (очередь задач на базе SQS), Распознавание (сопоставление аудиоотпечатков, реализовано на Go с использованием FAISS) и Плейлисты (обрабатывает цепочку «голосовой запрос → запрос к каталогу»). Хранение данных организовано так: исходное аудио — в S3, стриминг превью — через CloudFront, а перекодированные превью хранятся в отдельном бакете, потому что трафик на превью в 20 раз превышает трафик скачиваний.

Синхронизация состояния между клиентами происходит через WebSocket-канал для каждого пользователя — когда вы ставите трек в избранное на мобильном устройстве, десктопное приложение получает уведомление и обновляет плейлист в течение секунды. Мы намеренно отказались от использования CRDT: для пользователя, у которого все четыре клиента обычно находятся под контролем, схема «последний записал — тот и прав» с сервером в роли источника истины работает хорошо и в два порядка проще в поддержке.

Аудиоотпечатки на масштабе 720 000 треков

В каталоге 720 000 треков, и для каждого создаётся отпечаток из примерно 500 пиковых пар — опорных точек (плотность подобрана так, чтобы сбалансировать точность распознавания и размер индекса). Всего в индексе около 360 миллионов таких опорных точек. FAISS IVF-ПК позволяет находить ближайших соседей быстрее 100 мс на одной машине c6i.8xlarge; индекс разбит по жанрам — в первую очередь ради эффективности кэша, а не ради увеличения ёмкости.

10-секундный отпечаток-запрос отправляется с клиента в сервис распознавания, сопоставляется с индексом и проходит проверку на временную согласованность: мы считаем совпадение достоверным, только если как минимум 40% пар опорных точек выстраиваются в пространстве временных сдвигов, а не просто совпадают по количеству. В этом и заключается разница между треком, который действительно воспроизводит оригинал, и двумя треками, у которых случайно похожие бочки.

Метрики, которые изменились после запуска

Первые 90 дней после запуска мы отслеживали четыре ключевые метрики и сравнивали их с показателями за 90 дней до запуска: время до первого скачивания за сессию, количество прослушанных превью за сессию, число активных диджеев в неделю и конверсию в платный тариф.

Как мы перенесли живую платформу без простоя

FRP ни разу не выключали во время перестройки. Шесть недель мы держали старую и новую версии параллельно, переводя пользователей группами и сохраняя общую базу данных — чтобы плейлисты диджеев, история скачиваний и сохранённые треки работали в любом клиенте. Когда группа переходила на новый интерфейс, старый оставался доступен по адресу /legacy ещё две недели — на случай, если кто-то захочет вернуться. Но за 10 дней никто так и не воспользовался этой возможностью.

Единственное, что мы переносили жёстко, — это бэкенд поиска: старый стек на LIKE-запросах был выведен из эксплуатации в первый же день для новой когорты. Откат потребовал бы, чтобы старый интерфейс указывал на поисковый сервис, которого больше не существует. Мы приняли этот риск ради более чистого перехода; альтернативой было держать два поисковых стека в продакшене месяцами.

Пять уроков из улучшения профессионального инструмента для диджеев

Урок 1: плотность информации важнее визуального лоска. Профессиональному диджею, готовящему сет перед выступлением, не нужен просторный, «дышащий» интерфейс. Ему важны семь параметров — в одной строке. Мы потратили две недели, чтобы убрать «воздух», который добавили в первом варианте редизайна.

Урок 2: функция, от которой пользователи в восторге, редко оказывается флагманской. Распознавание музыки получило внимание прессы; синхронизация папок — удержание пользователей. Обе важны — но если нужно выбрать одну для инвестиций, отдайте предпочтение той, что незаметно решает повседневные проблемы.

Урок 3: для мультиплатформенного продукта сначала делите дизайн-токены, потом компоненты. Четыре клиента стали ощущаться как единый продукт во многом потому, что цвет, шрифты и отступы брали из одного источника. На деле общими оказались лишь 30% компонентов.

Урок 4: внедряйте AI как помощника в рабочем процессе, а не как замену. Функция голосовых плейлистов популярна, потому что экономит десять минут ручной фильтрации и выдаёт диджею плейлист, который он может отредактировать. Если бы мы сразу проигрывали сгенерированный сет, диджеи перестали бы доверять этой функции уже через неделю.

Урок 5: держите старое и новое параллельно дольше, чем кажется необходимым. Мы оставляли старый клиент работающим две недели после миграции каждой когорты. Это почти ничего не стоило в эксплуатации и принесло нам огромную лояльность опытных пользователей, которые нервничали из-за изменений.

Стоимость создания похожей экосистемы в 2026 году

Примерные диапазоны по порядку величины для продукта с уже существующим каталогом и клиентской базой, модернизированного так, как мы модернизировали FRP. Эти оценки основаны на том, что у вас уже есть лицензирование, хранилище, метаданные каталога и работающий бэкенд — стоимость складывается из переработки UX, нативных клиентов и двух AI-функций.

Итого ориентировочно: 34,5–47 млн ₽ — примерно за шесть месяцев, если направления работ идут параллельно там, где это позволяют зависимости. Мы дешевле большинства американских и западноевропейских агентств сопоставимого качества, потому что наша команда senior-уровня базируется в Восточной Европе и ОАЭ. Актуальные диапазоны цен можно посмотреть на странице наших услуг по разработке программного обеспечения на заказ.

Когда нанимать Фора Софт, а когда строить своими силами

Нанимайте Фора Софт, когда у вас уже есть работающий продукт с реальными пользователями, вы хотите его модернизировать, не останавливая развитие, и в команде нет специалистов по нативной мобильной разработке и аудиостримингу. Мы запустили шесть музыкальных и аудиопродуктов сопоставимой сложности и можем подключиться за три недели.

Стройте своими силами, когда у вас уже есть достаточная экспертиза в предметной области — например, мобильный разработчик, выпустивший приложение на React Native, DSP-инженер по распознаванию и собственная дизайн-система, которой вы доверяете, — и масштаб модернизации настолько мал, что привлечение агентства обойдётся дороже, чем принесёт пользы.

Частые вопросы

Что почитать дальше

Готовы модернизировать свой аудиопродукт?

Фора Софт перестроила FRP в экосистему SPINS из четырёх продуктов с распознаванием музыки в стиле Shazam и AI-плейлистами по голосу — и повысила платную конверсию на 34% без единого дня простоя. Если у вас есть работающий аудиопродукт, которому нужен похожий апдейт, мы проведём исследование, за два рабочих дня подготовим фиксированную оценку и начнём работу в течение трёх недель.