Захотел сыграть «On the Nature of Daylight» Макса Рихтера. Ноты я читаю плохо, а в YouTube-туториалах клавиши подсвечиваются по одной: чтобы понять, что нажимать, приходится постоянно ставить на паузу и перематывать. За один день вместе с Claude я собрал себе стенд, который решает эту задачу и заодно понемногу учит читать ноты.
Задача
- Видеть сразу, какие клавиши нажимать, а не ловить их в видео.
- Не садиться учить нотную грамоту отдельно, но начать понимать ноты на живом примере.
- Чтобы работало с любым произведением, а не только с одним.
Как это работает
- Загружаешь MIDI-файл, и стенд раскладывает пьесу на шаги: каждый шаг — момент, когда нажимается что-то новое. Файл читается прямо в браузере и никуда не отправляется.
- Клавиатура подсвечивает, что нажать сейчас, что продолжать держать и что будет дальше. У каждой руки свой цвет.
- Над клавиатурой нотный стан, синхронный с шагами: те же ноты, тем же цветом, с подписями. Так связь «нота на стане ↔ клавиша» видна сразу.
- Вид «Ноты» показывает всю пьесу целиком. Кликаешь по такту — переходишь туда.
- Воспроизведение на семплах настоящего рояля, с замедлением до 50% и режимом «учу одну руку»: вторая рука звучит, но не подсвечивается.
- Шпаргалка собирается под конкретную пьесу: тональность словами, какие ноты на каких линейках, что значат знаки при ключе.
Как собирал
- Начал с простой клавиатуры, где шаги можно отмечать вручную и листать как слайды.
- Скачал MIDI этой аранжировки, и Claude разобрал его на 569 шагов. Ручная разметка не понадобилась.
- Добавил звук, потом нотный стан — чтобы учить ноты на той же пьесе, которую играю.
- Превратил стенд в сервис: открывается любой MIDI, появился экран загрузки, подсказки при первом входе и минималистичный интерфейс.
- Дольше всего искали, как показывать следующие ноты. Цифры 1 и 2 начинали путать, когда клавиш много. Нарисовали четыре варианта вайрфреймов, в итоге сделали бледные подсказки, пунктир вместо заливки, постепенное проявление цвета к моменту нажатия и режим одной руки.
- Заменил игрушечный синтезатор на настоящий рояль, добавил цветовые пары для рук, адаптив под широкий экран и управление с клавиатуры.
Как менялся интерфейс
Промпт, чтобы собрать такой же
Скопируйте его в Claude или другой ИИ — по нему можно собрать стенд с нуля. Семплы рояля Salamander Grand Piano лежат в открытом доступе, например в репозитории Tonejs/audio на GitHub.
Сделай одностраничное веб-приложение «MIDI-стенд»: тренажёр для игры на фортепиано по MIDI-файлу. Пользователь загружает .mid, а приложение показывает пьесу по шагам на нотном стане и на клавиатуре, подсвечивая, какие клавиши нажимать. Всё работает в браузере, файл никуда не отправляется. Язык интерфейса — русский.
ВХОД (онбординг)
- Первый экран: заголовок «Открой MIDI и играй по подсветке», большая зона «Перетащи .mid сюда / нажми, чтобы выбрать», список недавних файлов и ссылка «Попробовать на примере» (встроенная «Ода к радости», общественное достояние).
- Файл можно перетащить в любое место окна.
- Недавние файлы (до 6) и последний открытый файл с текущей позицией хранятся в localStorage. При повторном заходе последний файл открывается сразу.
- После первого файла показывается короткий тур из 5 карточек с подсветкой нужной области: цвета клавиш, подсказки «дальше», нотный стан, управление, переключатель видов. Тур можно пропустить и показать заново из справки.
РАЗБОР MIDI (свой парсер, без библиотек)
- Читать формат 0/1: ноты (с учётом running status и note-on с нулевой скоростью), темпы (полная карта темпов), размер, тональность (число знаков, мажор/минор), названия дорожек.
- Дорожки и каналы — это «партии». По умолчанию партия с самым высоким средним звуком — правая рука, с самым низким — левая. Если партия одна, она делится по C4. Канал 10 (ударные) скрыт. В настройках каждой партии можно назначить: правая / левая / делить по C4 / скрыть.
- Ноты, начинающиеся почти одновременно (допуск 1/32 доли), объединяются в «шаг». Для каждого шага хранить: новые клавиши, удерживаемые с прошлых шагов, длительность и силу нажатия каждой ноты.
ЭКРАН «СТЕНД»
- Шапка: «назад к файлам», название пьесы, тональность / размер / темп / длительность, переключатель видов «Стенд | Ноты», кнопки «?» и «Настройки».
- Строка-подсказка: «правая D♭5 · левая A♭2».
- Нотный стан (SVG): скрипичный и басовый ключи, знаки при ключе, размер, 2–4 такта в зависимости от ширины экрана, номера тактов, доли бледными линиями. Ноты окрашены в цвет руки, с правильной высотой (буквенное написание по тональности), добавочными линейками и случайными знаками ♯ ♭ ♮, которые действуют до конца такта, как в настоящих нотах. Головка нот: закрашенная — короткая, пустая — половинная, без штиля — целая. Аккорды на общем штиле. Подписи нот рядом с головками (C D E / до ре ми / без подписей). Текущий шаг: мягкая полупрозрачная капсула с треугольником сверху, ореол вокруг нот. Сыгранные ноты приглушены, будущие — полным цветом. Клик по ноте переходит к её шагу.
- Клавиатура: диапазон подстраивается под пьесу (минимум 3 октавы), ширина клавиш — под ширину экрана, высота — около трети окна. Подписаны все C (C3, C4…), на широких клавишах и остальные белые. Клик по клавише проигрывает её звук.
- Состояния клавиш: «нажать сейчас» — яркий цвет руки со свечением; «держать» — затемнённый цвет руки; «дальше» — следующий шаг (1) и шаг после него (2), считаются отдельно для каждой руки. Они бледные: около 25% и 10% цвета руки, чтобы не путались с «нажать сейчас».
- Настройки подсказок «дальше»: сколько шагов показывать (нет / 1 / 2), для какой руки (левая / правая, независимо), вид (бледная заливка или цветная пунктирная рамка), цифры 1/2 на клавишах (вкл/выкл).
- «Проявление при игре»: во время воспроизведения следующая клавиша каждой руки постепенно окрашивается в полупрозрачный цвет руки и к моменту нажатия доходит до максимума. Анимация непрерывна между шагами: длительность — от прошлого нажатия этой руки до следующего, текущий прогресс задаётся отрицательной задержкой анимации.
- Режим «Учу руку»: обе / правая / левая. Вторая рука при воспроизведении звучит, но не подсвечивается и почти прозрачна на стане. Стрелки пропускают шаги без выбранной руки.
- Небольшая легенда под клавиатурой.
ЭКРАН «НОТЫ» (вся пьеса)
- Вся пьеса строками по 2–6 тактов в зависимости от ширины экрана, в каждой строке ключи и знаки. Текущий шаг подсвечен, сыгранное приглушено. Клик по ноте или по пустому месту такта — переход туда. При воспроизведении лист сам прокручивается за текущим местом.
НИЖНЯЯ ПАНЕЛЬ (закреплена в обоих видах)
- Назад, Играть/Пауза, Вперёд; ползунок по всей пьесе с подписью «такт 5 из 93 · 2/4» и «шаг 31 из 569»; кнопка руки (Обе/Правая/Левая); скорость 1× / 0.75× / 0.5×.
УПРАВЛЕНИЕ С КЛАВИАТУРЫ
- ← → — шаг; Shift + ← → — предыдущий / следующий такт (пустые пропускаются); пробел — играть / пауза; S — прослушать текущий шаг; H — сменить руку; V — переключить вид; Esc — закрыть панели.
ЗВУК
- Web Audio, семплы рояля Salamander Grand Piano (CC-BY 3.0, автор Alexander Holm): ноты через малую терцию от A0 до C8, лежат файлами рядом со страницей, промежуточные получаются сдвигом высоты. Громкость и яркость (фильтр) зависят от силы нажатия, мягкая отпускающая огибающая, лёгкая реверберация (сгенерированный импульс), компрессор. Пока семплы грузятся — запасной синтезатор, статус загрузки показывать в настройках.
- Воспроизведение идёт по карте темпов файла с учётом выбранной скорости.
НАСТРОЙКИ (боковая панель)
- Подсказки «дальше» (см. выше), цвета рук, подписи нот, скорость, «Учу руку», распределение партий по рукам. Всё запоминается в localStorage.
- Цветовые пары рук (правая / левая), отдельные оттенки для светлой и тёмной темы: Янтарь и индиго (по умолчанию), Коралл и бирюза, Золото и сирень, Малина и лёд, Зелёный и синий («как в видео»), пара для дальтоников (оранжевый и голубой).
СПРАВКА «?» (боковая панель)
- Шпаргалка по чтению нот, собранная под конкретную пьесу: какой стан для какой руки, ноты на линейках и между ними, добавочные линейки и C4, тональность словами («ре-бемоль мажор: 5 бемолей — B♭ E♭ A♭ D♭ G♭, эти ноты играются на полтона ниже…»), размер, виды головок нот. Плюс список клавиш управления.
ДИЗАЙН
- Минималистичный, тёмный по умолчанию, с полноценной светлой темой (prefers-color-scheme). Шрифты: Fraunces для заголовков, IBM Plex Sans для текста, IBM Plex Mono для цифр и подписей, Noto Music для нотных символов.
- Адаптивность: на широком экране всё растягивается на всю ширину, на телефоне перестраивается без горизонтальной прокрутки страницы.
- В правом нижнем углу плашка автора: круглая аватарка с переливающейся рамкой в цветах рук, при наведении раскрывается подпись. Ведёт на Instagram автора.