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


Как всё начиналось

Всё начиналось в прошлом году.
Я случайно узнал о сервисе Suno. ОтношусьОтносился к нейросетям я, мягко говоря, скептически, поэтому сначала не придал значения.

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

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


От Telegram к собственному сайту

У меня есть группа в Telegram, где я развлекаю подписчиков песнями, созданными вместе с Suno. Если интересно - можно найти по нику @frogyf.

Но в какой-то момент мне стало тесно в Telegram.
Я решил сделать себе полноценный сайт-визитку: плейлист с песнями и текстами, чтобы любой желающий мог послушать.

Вот на этом должен был и остановится, но что-то пошло не так.
Вот на этом должен был и остановится, но что-то пошло не так.

Идея быстро разрослась до медиа-платформы:
генеративное радио, обработка аудио на Python, автоматический постинг в соцсети и удобная админка.
В этой статье расскажу, как это всё развивалось.


Первый шаг: фронт и админка

Сначала я собрал минимальный фронт на React с использованием вайбкодинга, чтобы быстро собрать интерфейс.
В качестве "фронторисовалки" использовал bolt.new - описываешь, что хочешь, и он отдаёт тебе прототип фронта. При регистрации даётся 1М токенов и этого хватает на простой фронт. Сейчас bolt уже умеет сам прикручивать API, но тогда мне нужен был только фронт.

Вот такой вариант я получил от bolt, о только всё было на английском
Вот такой вариант я получил от bolt, о только всё было на английском

Я не дизайнер, и это моя слабая сторона, поэтому когда есть кто-то (или что-то), что может помочь, - я только "За-За".

Задача: сделать простую страницу, почти как одностраничник на Tilda.
Контент - в структурированном JSON.
Добавляешь песню, видео или статью → пересобираешь сайт.

На этом этапе стало понятно: без бэка и админки не обойтись.


Что умела первая версия админки

В первой версии админка могла:

  • Добавлять песни и видео через форму;

  • Добавлять статьи.

И всё. Но долго это не продлилось ?


Требования выросли

Список возможностей начал расти:

  • Проверка текстов песен на спецсимволы и форматирование по шаблону(т.к. текст я храню с тегами для suno, а руками их вымарывать долго);

  • Получение статистики и видео с YouTube (позже отказался, теперь храню всё на S3 от REG.RU, но статистику просмотров и лайков с YouTube продолжаю собирать и суммировать со всех площадок);

  • Мастеринг треков (раньше делал через внешние сервисы и Audacity, но это долго);

  • Очистка цифрового шума (наткнулся на обсуждение на 4PDA, где писали, что suno добавляет "водяные знаки" в треки - решил так же почистить);

  • Генеративное радио (агенты записывают короткие подкасты до 5 минут, а потом снова включается стриминг; дополнительно планирую вставки погоды, новостей и дорожной ситуации, как на настоящем радио);

  • Автоматизация постинга в соцсети (Хотелось как-то сократить процесс, поэтому добавил сервис по планированию и рассылке постов/сторис);

  • Идея на будущее - добавить генератор видео-превью с помощью Sora 2 при создании поста.

Подготовка постов, можно накидать идеи, а потом их использовать в создании.
Подготовка постов, можно накидать идеи, а потом их использовать в создании.

Бэкэнд и хранение контента

Для сервера я использую Railway, а медиа храню в облаке S3 от REG.RU.

Что это даёт:

  • Разделение фронта и бэка;

  • Возможность масштабировать проект при росте трафика;

  • Освобождение сервера от хранения тяжёлых файлов.

Railway - очень удобный сервис:
в один клик поднимаешь фронт, вторым - n8n, поднимаешь базу данных, настраиваешь API через визуальный конструктор.

Вот так выгуeлядит вся архитектура сайта. empowering-comfort - это Python сервис, который отвечает за обработку треков.
Вот так выгуeлядит вся архитектура сайта. empowering-comfort - это Python сервис, который отвечает за обработку треков.

Что дальше

Я не буду превращать статью в бесконечный лонгрид, поэтому это - только часть первая.
Сайт пока в тестовом режиме, радио ещё не работает, и не все песни и клипы залиты.

Вот так выглядит раздел с клипами. У каждого клипа есть обложка, сам клип, описание. Возможность поставить лайк и дизлайк и статистика просмотров по всем соцсетям.
Вот так выглядит раздел с клипами. У каждого клипа есть обложка, сам клип, описание. Возможность поставить лайк и дизлайк и статистика просмотров по всем соцсетям.

Итог: как визитка стала медиаплатформой

То, что начиналось как простой сайт-визитка, превратилось в полноценную "ферму блогера", где:

  • Фронт и админка упрощают управление контентом;

  • Python-сервисы автоматизируют обработку аудио;

  • ИИ генерирует радио и контент;

  • Автопостинг экономит время.

Сейчас это уже не просто сайт для музыки, а инфраструктура для быстрого создания и публикации медиа.

Вот скрин из админки - раздел «Мастерская». Я не дизайнер ? К цветам и кнопочкам просьба не придираться. Хотя нет - если есть идеи, я всегда рад.
Вот скрин из админки - раздел «Мастерская». Я не дизайнер ? К цветам и кнопочкам просьба не придираться. Хотя нет - если есть идеи, я всегда рад.

Вот так выглядит пресет для пост обработки. Чтобы поддержать правильность статьи на хабре, необходимо добавить немного кода.

    "vinyl": {
        "clean": {
            "remove_hiss": True,
            "remove_clicks": True,
            "remove_dc_offset": True,
            "filter": {"type": "lowpass", "cutoff_hz": 18000}  # эмуляция мягкости
        },
        "eq": {"low": +3, "mid": -1, "high": -2},
        "compressor": {"threshold": -20, "ratio": 2.5, "attack": 15, "release": 100},
        "limiter": {"threshold": -1.0},
        "normalize_lufs": -14,
        "extras": {"vinyl_noise": True, "wow_flutter": 0.3}  # можно добавить имитацию винила

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

Комментарии (0)