Midi-клавиатура

Создание инструмента в браузере

Сделаем из нашего браузера небольшой синтезатор. Мы создадим осциллятор, генерирующий частоту нажатой клавиши, для этого нам надо конвертировать номер ноты в частоту. Алгоритм для этого нашелся в Википедии, вот как выглядит его реализация в JavaScript;

Просто отдаем ноту и получаем частоту. Используем это в функции :

Теперь мы хотим, чтобы нота с этой частотой проигрывалась при поступлении MIDI-сообщения с событием :

Первую часть этого условия понять легко — мы проверяем, что получили сообщение с номером 144, то есть .

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

Теперь у нас есть обработчик событий , напишем аналогичный для . Это сообщение с номером 128, но с учетом того, что мы выяснили, нам надо реагировать не только на него, но и на сообщения с нулевой скоростью нажатия.

Теперь нам надо написать функции и . Здесь уже работает Web Audio API, рассмотрение которого находится за пределами этой статьи, но если вы знакомы с ним, итоговый код будет вам понятен.

Декодирование MIDI-данных

Из всего содержимого MIDI-сообщения нам прежде всего интересны его данные — какой тип MIDI-событий передается, какая клавиша нажата?

Если вы подключите MIDI-клавиатуру и проверите выложенный в статье код, вы увидите, что при нажатии клавиши браузер вывод в консоль лог, примерно такой — . После того как вы отпустите клавишу, также выведется лог — .

Этот массив и есть данные. Первый его элемент это тип MIDI-события. MIDI-сообщения могут содержать небольшое количество событий и каждому типу события соответствует определенный номер. В нашем случае число 144 это сообщение , то есть нажатие клавиши, а 128 — , передающее, что клавиша отпущена. Полный список доступных типов событий есть в спецификации MIDI.

Второй элемент массива это данные о нажатой/отпущенной клавиши. Всего для нот есть 128 номеров, этого достаточно для всех октав. В нашем случае нажата клавиша 61, по таблице номеров нот мы видим, что это C#.

Третий и последний элемент это скорость нажатия клавиш (velocity). Он может использоваться, например, для имитации пианино, клавиши которого могут нажиматься мягко или с силой.

Теперь, когда мы знаем, какая клавиша нажата или отпущена, попробуем эти сведения конвертировать во что-то полезное. Привяжем Web MIDI API к Web Audio API. Если вы не знакомы с Web Audio API, вам стоит прочитать несколько статей о нем.

Шаг 2: Загрузка кода

Загрузите код в Arduino.

Примите во внимание значение, которое необходимо запомнить. Вам следует вставить это значение в код

Если в программном коде встречается значение 500, то его необходимо заменить на ваше значение.

static int lastInput1 = 0;

int newInput1 = total1;

if((lastInput1  500)) {

  for (int note=48;note 500) && (newInput1 

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

Шаг 3: Изменение программного обеспечения Arduino

На данном этапе вам необходимо изменить программу по умолчанию UNO-dfu_and_usbserial_combined на программное обеспечение arduino для обработки MIDI.

Сначала загрузите шестнадцатеричный файл, затем программу FLIP для загрузки данного шестнадцатеричного файла в Arduino.

После загрузки файла и программы FLIP, соедините вашу плату Arduino с компьютером. Затем переведите Arduino Uno R3 (это будет работать только на версии Uno!) в режим DFU.

Вставьте один проводник в контакт Ground вверху и один проводник в контакт Ground внизу. Далее необходимо прикоснуться нижним проводником к контакту GND, как показано на фото, и одновременно верхним проводником к контакту RESET. После этого плата Arduino перейдет в режим DFU.

Далее следует загрузить шестнадцатеричный файл MocoLUFA. Откройте программу FLIP, выберите ваш чип (16u), укажите место расположения вашего файла MIDI.hex и загрузите его через USB интерфейс. Отсоедините USB кабель от компьютера и повторно подсоедините назад. Плата Arduino должна определиться как MIDI/MocoLUFA устройство.

Запомните: Если необходимо изменить ADE код, тогда вам следует вернуть назад оригинальный шестнадцатеричный файл для Arduino. Этот файл расположен в папке C:\Program Files (x86)\Arduino\hardware\arduino\firmwares\atmegaxxu2

Шаг 4: Создание девайса

Соберите схему, как показано на рисунках выше.

Концы проводников – это те места, к которым вы будете прикасаться. Вы можете прикрепить зажимы типа “крокодил” к концам этих проводников для того, чтобы можно было закрепить проводники, например, к алюминиевой фольге.

Шаг 5: Заключительный шаг создания midi клавиатуры

К настоящему моменту ваша емкостная сенсорная клавиатура должна быть готова. Она может определять, когда вы держите проводник и отправляете midi ноту. Однако нам необходимо также иметь программу для чтения MIDI и воспроизведения звуков. Вы можете использовать программу DAW (Fl Studio, Ableton, Logic Pro и т.д.)

Если ваша емкостная сенсорная клавиатура работает, как было задумано, то она появится как обычное MIDI устройство в вашей программе DAW, что показано на рисунке выше. Устройство будет работать как обычная MIDI клавиатура, за исключением, что она может проиграть за один раз только одну ноту!

Наслаждайтесь!

Список радиоэлементов

Доступ к MIDI-устройству

Сначала нам надо проверить наличие поддержки Web MIDI API в браузере. Это делается проверкой наличия метода , он реализован только в браузерах с поддержкой Web MIDI API.

Теперь, когда мы убедились, что метод существует, вызовем его для доступа к любому MIDI-входу в браузере.

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

Как видите, функция для успешного подключения принимает MIDI-параметр в виде объекта . Этот объект является ключом к получению MIDI-данных. Сам по себе он предоставляет интерфейс для доступа к любым подключенным MIDI-устройствам. У меня подключена только MIDI-клавиатура, поэтому если я выведу в консоль , значение будет “1”.

Чтобы получать MIDI-данные с нашего устройства, нам надо создать переменную и задать ей значение , примерно так:

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

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

Краткое содержание цикла:

1. Создана переменная , ей присвоен следующий MIDI-вход. Так как мы не проводили итерацию по входам, это будет первый из доступных MIDI-входов.
2. Если у нас есть MIDI-вход и значение не равно , мы запускаем цикл.
3. Присваиваем следующий MIDI-вход в нашем объекте-итераторе.

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