MIDI-клавиатура в браузере.

Для этого есть стандарт Web MIDI. Страница не лезет в USB сама: она просит браузер, а браузер выступает посредником между ней и клавиатурой.

Как это устроено

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

Условия простые. Страница должна открываться по https. Браузер должен показать запрос на доступ: Chrome ввёл его для всех MIDI-страниц в версии 124. Большинство современных USB-клавиатур определяются сами и работают без драйвера.

Что приходит на страницу

• Нота включена и выключена. Номер ноты от 0 до 127 и сила нажатия от 1 до 127. «Нота включена» с силой 0 многие клавиатуры используют вместо «выключена».
• Педаль сустейна. Это контроллер № 64: значение от 64 и выше значит «нажата», ниже — «отпущена».
• Колесо высоты тона. Число от 0 до 16383, спокойное положение — 8192.
• Прочие контроллеры: модуляция, громкость, ручки и фейдеры, если они у клавиатуры есть.

Номер 60 — это «до» первой октавы, или центральное «до». А вот как его называют, договорённости нет: в одних программах это C3, в других C4, в третьих C5. Если нота на странице звучит на октаву не там, где вы ждёте, дело в этой путанице, а не в клавиатуре. Проверьте, как называет её ваша программа.

Где это работает

По данным caniuse, Web MIDI поддерживают Chrome с 43-й версии, Edge с 79-й, Opera с 30-й и Firefox с 108-й. Яндекс Браузер и другие браузеры на движке Chromium работают так же, как Chrome. В Safari встроенной поддержки нет, на iPhone MIDI в браузере тоже не получить. На Android всё зависит от версии и сборки, надёжнее проверять на компьютере.

Если браузер не видит клавиатуру

1. Проверьте кабель. Бывают кабели, которые только заряжают и данных не передают.
2. Закройте программы, которые могли занять порт: FL Studio, Ableton, другие секвенсоры. Старые драйверы Windows отдают MIDI-порт одной программе за раз.
3. Подключите клавиатуру до открытия страницы или перезагрузите вкладку.
4. Посмотрите значок рядом с адресом. Если доступ к MIDI запрещён, сбросьте разрешение и нажмите кнопку подключения снова.
5. Bluetooth-клавиатуры подключаются через операционную систему, а не через браузер. Сначала соедините её с компьютером, потом открывайте страницу.

Зачем это нужно, если есть секвенсор

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

Второй случай: набросок. Сыграли мысль, записали .mid, перенесли файл в FL Studio и подставили настоящий инструмент.

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

Клавиатура знает 128 нот. Браузеру достаточно трёх байт, чтобы услышать одну.

Механик

• Звукорежиссёр, музыкант, электронщик из Петербурга.
• Более 20 лет в музыке: дрим-поп, эмбиент, электроника.
• Рассказываю о фишках и техниках при создании музыки.
• Помогаю подобрать музыкальный сетап без переплат.
• Собираю аналоговые гитарные педали.

Вопросы — в Telegram.