Вселенная Рус.Ким

Как работает трекер для создания караоке - Магнито?

Я собрал «Магнито» — студию караоке и моушен-дизайна в одном HTML-файле весом 40 КБ. Без серверов, подписок и возни с таймкодами

Почему вообще появилась эта идея сделать караоке Магнито:

Если вы когда-нибудь пробовали сделать красивое лирик-видео (Lyric Video) или караоке-ролик для песни, вы знаете, какая это боль. У вас есть два пути:

  • Путь первый — тяжелый профессиональный софт (After Effects, Premiere, DaVinci). Там можно сделать голливудскую графику, но выставлять тайминг на каждое отдельное слово вручную по ключевым кадрам — это часы монотонной рутины. Сдвинули одно слово в начале куплета — и вся остальная песня «поехала».
  • Путь второй — онлайн-сервисы и генераторы субтитров. Они требуют подписку, грузят ваш трек на чужие сервера, ставят водяные знаки, а когда дело доходит до тонкой подстройки ритма (когда вокалист красиво тянет гласную или делает неожиданную паузу), их крошечные ползунки просто не дают попасть мышкой в нужную долю секунды.

Мне захотелось решить эту задачу радикально: создать инструмент «Магнито», который живет в одном-единственном HTML-файле. Вы просто скачиваете его на компьютер, открываете двойным кликом в любом браузере (даже без интернета!), закидываете песню с текстом и через несколько минут забираете готовый видеоролик в формате .webm с частотой 60 кадров в секунду.

В чем главная фишка «Магнито» и почему он так называется:

Свое название трекер получил из-за главной механики — магнитного каскадного таймлайна.

В обычных редакторах каждая строчка или слово живут сами по себе. Если вы поняли, что первая строчка песни заканчивается на полсекунды позже, и растянули её, она просто налезет на вторую строчку. Вам придется вручную выделять и двигать десятки следующих фраз.

В «Магнито» весь текст песни работает как единая эластичная магнитная цепь:

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

Как решили главную боль караоке-мейкеров: «Я не могу попасть мышкой в короткое слово!»

В быстрых песнях короткие слова и предлоги («в», «на», «мы», «дождь») звучат всего по 0.15−0.25 секунды. На общей шкале трехминутной песни такой отрезок превращается в тонкую полоску шириной в пару миллиметров. Если повесить на её края обычные круглые точки-маркеры, они просто слипнутся, и вы никогда не попадете по ним курсором.

В «Магнито» для этого сделана двухъярусная система с «Микроскопом фразы»:

  • Нижний ярус — Общая карта песни. Сверху бежит секундная линейка и рисуется звуковая волна (кардиограмма вашего трека, по которой сразу глазами видно, где вступает голос). Под ней лежат блоки целых фраз. При этом саму шкалу можно растягивать простым вращением колесика мыши вплоть до масштаба 900 пикселей на одну секунду времени!
  • Верхний ярус — «🔬 Микроскоп слов». Как только вы кликаете на любую фразу снизу, она мгновенно разворачивается на верхнем ярусе во всю ширину вашего монитора (на все 100% экрана). Даже если фраза длится всего две секунды, под микроскопом каждое её слово становится огромным и просторным.
  • Лазерные лезвия вместо толстых точек. Вместо громоздких кружков, закрывающих буквы, границы слов размечаются тонкими лазерными линиями с флажками (▾ — старт слова и ▴ — конец слова). Сама линия тонкая и не мешает читать текст, но имеет широкую невидимую магнитную зону захвата для мыши — промахнуться невозможно.

При этом настроить время можно буквально в один клик: просто поставьте красный курсор плеера на нужный момент песни и кликните по флажку маркера — граница слова сама прыгнет ровно в эту точку. А если случайно удалили фразу или не туда увели маркер, встроена полноценная машина времени на 50 шагов назад по привычному сочетанию Ctrl + Z.

Моушен-дизайн и визуальные пресеты прямо из кода:

Обычно, чтобы сделать красивый эквалайзер, летающие частицы и неоновое свечение букв в такт басам, нужно долго настраивать плагины. В «Магнито» вся графика генерируется процедурно на лету с помощью браузерного движка HTML5 Canvas и анализатора частот Web Audio API.

Прямо во время проигрывания песни можно в один клик переключать пресеты оформления:

  • Музыкальная анимация над словами: симметричные неоновые столбики, вращающийся 360-градусный реактор, жидкие переплетающиеся волны, звездный гиперпрыжок со струной осциллографа, парящие плазменные сферы или «Корона над словом» — когда эквалайзер вырастает прямо над тем конкретным словом, которое поется в эту секунду, и перепрыгивает дальше по тексту!
  • Анимация самого текста караоке: от классического прыгающего неонового мячика-кометы со шлейфом искр (который летит по параболе точно по вашим маркерам) до 3D-пружинного взрыва букв и лазерного сканера.
  • Автоматическая верстка длинных строк: если строчка в песне попалась слишком длинной, она никогда не уйдет за края кадра. Трекер сам аккуратно перенесет слова на 2–3 центрированные строки (причем прыгающий мячик и заливка сами перепрыгнут со строки на строку!), либо автоматически уменьшит шрифт под ширину экрана, либо включит режим «следящей камеры», плавно ведущей зрителя за активным словом.

Как это работает внутри (для тех, кому интересна начинка):

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

  1. Web Audio API декодирует загруженный .mp3 или .wav, строит звуковую волну для таймлайна и каждую секунду 60 раз снимает частотный спектр трека (FFT), заставляя фон и эквалайзер пульсировать от реального баса и вокала.
  2. HTML5 Canvas API рендерит 3D-сетку, частицы, эквалайзер и пословную маску караоке в разрешении HD (1280×720).
  3. MediaRecorder API захватывает видеопоток прямо с холста (canvas.captureStream(60)), склеивает его с чистым цифровым звуком из аудиоконтекста и сжимает с битрейтом 8 Мбит/с в готовый видеофайл .webm, который сразу скачивается на компьютер.

Как попробовать (Инструкция в 4 шага):

  1. Откройте файл «Магнито» в любом современном браузере.
  2. Загрузите свой аудиофайл, вставьте текст песни и нажмите «📏 Разложить текст по таймлайну».
  3. Подстройте ритм фраз на нижней шкале и отдельных слов в полосе «🔬 Микроскоп» (при необходимости можно замедлить песню до 0.5× прямо в плеере, чтобы спокойно расставить акценты на быстрых речитативах).
  4. Выберите любимый визуальный пресет и нажмите «⏺ Записать и скачать WebM».

Буду рад вашим отзывам, идеям по новым визуальным пресетам и комментариям! Если нужно — делитесь в комментариях, какие фишки для работы с текстом и звуком вам хотелось бы видеть в следующих версиях.

11