MIDI Visualizer

Driven by the growing popularity of their educational videos, the client sought to scale up and automate their entire video production process.

Previously, his workflow required extensive manual labor in professional video editing software. Editors spent hours precisely synchronizing audio with sheet music and lyrics, and rendering unique visual accompaniments for each clip. This approach was extremely time-consuming, expensive, and became a major bottleneck for scaling content production.

To reduce production costs and time, the goal was to engineer a scalable web-based tool. We needed to empower educators and methodologists to generate the highest-quality educational videos independently, entirely eliminating the need for complex software and specialized video editors.

A custom web app was designed and built to instantly parse Standard MIDI Files (.mid), visualize and play musical performance data and embedded lyrics with perfect precision. It features flexible playback controls and extensive visualization settings, delivering flawless 4K resolution at 60 frames per second. This allows users to create and record a wide variety of video content directly in the browser, requiring absolutely no technical skills.

Начало работы

Приложение загружается мгновенно (0.7s FCP Lighthouse), для отображения используется high-performance HTML5 Canvas. Экран равномерно заполняет музыкальный grid с обозначениями нот.

Нижний бар содержит только ключевые элементы управления воспроизведением.

Для начала работы пользователю необходимо передать программе MIDI файл с помощью кнопки Import.

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

Ноты отображаются в виде прямоугольников, размер и расположение которых строго отражает их музыкальные свойства, а grid адаптируется под параметры трека учитывая экран пользователя.

В этот момент всё готово к записи, осталось лишь скрыть элементы управления и техническую информацию (перейти в режим съемки) с помощью соответствующей кнопки на нижним баре (или хоткея Tab). А для создания уникального стиля есть большая панель гибких настроек.

Settings

Панель поделена на 5 логических блоков и насчитывает 51 кастомных настроек что позволяет делать каждую визуализацию абсолютно уникальной.

Lyrics

В музыкальной индустрии нет единого стандарта кодировок для текста для MIDI файлов, из-за этого современные программы путаются в чужих наборах данных и ломаются. Данное приложение не пользуется стандартными переводчиками, а заглядывает внутрь файла напрямую. Оно ищет специальные скрытые маячки, которые указывают на начало строк, и аккуратно собирает слова буква за буквой, благодаря чему способно достать текст песни из любого старого или поврежденного файла.

Приложение разблокирует этот блок только при наличии lyrics в MIDI файле. Оно корректно разбивает слова песни на строчки и слоги и может отображать их как на прямоугольниках нот, так и в виде караоке (визуально подсвечивая нужный слог), а также позволяет настроить цвет и размер шрифта.

Ball

За мелодией помогает следить светящийся шар с хвостом. Он автоматически определяет следующую ноту и просчитывает плавный путь к ней, а хвост из частиц добавляет визуального эффекта.

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

General

С помощью библиотеки Tone.js приложение генерирует полифонический звук для каждой ноты с учетом параметра скорости без заиканий с нулевой задержкой. Предлагается выбор из 12 инструментов (Piano, Acoustic Guitar, Violin, Synth Brass и др.).

Дополнительную визуализацию обеспечивает 88-клавишная пианино которая рендерится динамически учитывая параметры экрана пользователя что обеспечивает высочайшую четкость изображения на разных экранах. Визуальная обратная связь работает с нулевой задержкой.

Остальные настройки позволяют гибко настраивать масштаб, толщину, прозрачность и цвет grid, цвет размер grid label, резкость и threshold of vertical scroll (камера автоматически начнёт плавно следовать за мелодией по холсту при достижении крайних точек), прозрачность, радиус углов, множитель ширины и цветовую палитру (грядущие, активные и прошедшие) прямоугольников нот, а также отображение на них названий нот, их цвет и размер шрифта.

Все эти настройки можно включать и отключать, многие из них имеют скрытые зависимости (например при включении Piano, нижний Threshold автоматически поднимается, при ключении отображения lyrics на нотах отображение нот автоматически отключается и наоборот, и тд.)

Background

В качестве кастомных backgounds пользователь может загружать изображения и видео с устройства или использовать прямую ссылку на медиа или YouTube. Пользователь может настраивать zoom чтобы идеально подогнать медиа под размер формат экрана, а также offset и speed для видео, чтобы на запись попали только нужные кадры.

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

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

Other

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

В правом верхнем углу интерфейса располагается индикатор текущего веб-разрешения экрана который обновляется в живом времени. Это критически важный инструмент телеметрии для бродкаста и захвата видео. Если пропорции совпадают со студийными стандартами, система динамически добавляет соответствующий суффикс (например, 1920 × 1080 (FHD) или 3840 × 2160 (4K)). Для профессионального создания контента недопустимо записывать видео с кривым соотношением сторон, а плашка дает мгновенную аппаратную гарантию того, что окно приложения в точности соответствует необходимому стандарту.

Режим записи позволяет быстро скрыть все элементы управления и технические данные чтобы оставить под запись чистую визуализацию.

Чтобы каждый раз вручную не менять десятки настроек в приложении реализована система пресетов. Авторизованные пользователи с ролью методиста (те кто создают учебные материалы) имеют возможность сохранять полные конфигурации под разными названиями и затем загружать их.

При наведении мыши на любое поле в настройках приложение отображает небольшую подсказку об этом поле. Также при нажатии на "?" открывается небольшая инфо панель демонстрирующая 7 хоткеев для быстрого управления и навигации по приложению.

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

The app is built on a highly optimized rendering loop utilizing the native requestAnimationFrame API to guarantee locked 60FPS performance. Vanilla JavaScript ensures sub-millisecond execution and absolute DOM control, completely eliminating the overhead and garbage collection stutter often associated with heavy reactive frameworks. Visual rendering is intelligently bifurcated into dual layers: a static canvas that pre-renders the complex coordinate grid, and a dynamic canvas that exclusively handles high-velocity moving elements like notes and particles. This strict separation of concerns minimizes expensive redraw operations and significantly reduces GPU overhead. State synchronization between the visual engine and the audio synthesizer operates on a deterministic master clock driven by the Web Audio API. As audio streams buffer and play, the visual timeline computes exact positional data using strict time-to-pixel mathematical formulas, completely eliminating drift. Memory management is handled locally via ArrayBuffers for instant file parsing, ensuring that even heavy MIDI files loaded with thousands of notes execute instantaneously strictly within the client's local memory parameters. Cloud connectivity operates strictly as a decoupled secondary layer, handling authentication and configuration delivery without ever blocking the primary rendering thread.

Grid Engine


Архитектура рендеринга построена на принципе строгой изоляции слоев (Dual-Canvas Architecture). Вместо того чтобы перерисовывать тысячи статических элементов координатной сетки каждый кадр, движок использует изолированный фоновый холст (gridCanvas), который не выводится в DOM напрямую. При инициализации система считывает аппаратный множитель пикселей монитора (devicePixelRatio) и физически масштабирует холст, гарантируя абсолютную резкость графики на дисплеях высокого разрешения (Retina, 4K). Алгоритм вычисляет музыкальный якорь (centerNote) и рендерит пиксельную сетку с текстовыми подписями в кэш оперативной памяти. В главном цикле анимации requestAnimationFrame основной холст просто копирует этот готовый слепок сетки через аппаратное ускорение, полностью исключая перерасчет сотен линий каждый кадр. Перегенерация фона происходит только в моменты зумирования или смещения камеры по вертикали. Приложение загружается мгновенно (FCP 0.7s). Благодаря отсутствию накладных расходов на Virtual DOM, время блокировки основного потока составляет всего 20 миллисекунд, обеспечивая безупречную отзывчивость интерфейса с нулевым сдвигом макета.

MIDI Processing

При загрузке файла система десериализует бинарный ArrayBuffer, схлопывая все музыкальные треки в единый плоский массив событий. Данные проходят жесткую хронологическую сортировку и обогащаются пространственными метаданными — это критический фундамент для будущей работы алгоритма Frustum Culling. Сразу после парсинга движок эвристически анализирует первые 10 секунд трека, вычисляя тональный диапазон. На основе этой дельты система динамически калибрует масштаб и высоту нот так, чтобы начальная музыкальная фраза идеально вписалась во вьюпорт без пустых зон, после чего координатная сетка мгновенно перерисовывается под новые габариты. Стандартные библиотеки парсинга MIDI часто терпят крах при обработке текстов песен из-за конфликтов кодировок (UTF-8 против legacy Windows-1252). Чтобы решить эту проблему, был написан кастомный бинарный парсер. Движок читает сырой массив байт (Uint8Array), проводит эвристический анализ маркеров мета-событий (0xFF 0x01 или 0x05) и посимвольно восстанавливает лирику, спасая даже поврежденные или нестандартные файлы. Алгоритм автоматически распознает заглавные буквы, собирая разрозненные слоги в семантически корректные строки. Функция Highlight работает на микросекундном уровне: система высчитывает currentTime проигрывателя, сравнивает его с таймстампом конкретного слога из массива, и в нужную миллисекунду накладывает на текст хайлайт подсветку.