Доступ к миди-устройствам в браузере что это такое

Обновлено: 02.07.2024

Нет! Это не то, что вы думаете! У тех из нас, кто пользуется Интернетом с 1990-х годов, словосочетание «Веб-MIDI» обычно вызывает воспоминания о том времени, когда веб-сайты автоматически проигрывали лоу-файную версию The Final Countdown, пока вы подписывали гостевую книгу веб-мастера. Однако в 2016 году у Web-MIDI, и особенно у Web-MIDI API, гораздо больше возможностей.

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

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

В настоящее время Web MIDI API поддерживается только в Chrome и Opera, но вы можете следить за его развитием в Firefox, посетив эту ошибку.

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

Хочешь играть на пианино? Просто подключите клавиатуру и посетите веб-страницу, которая использует эти технологии для воспроизведения звука фортепиано. Хотите другой звук? Просто посетите другой сайт.

Надеюсь, вы видите преимущества этого API, но как он работает на самом деле?

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

Сначала мы хотим проверить, поддерживает ли наш браузер Web MIDI API. Мы делаем это, проверяя, существует ли метод navigator.requestMIDIAccess. Этот метод реализован только в браузерах, поддерживающих API.

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

navigator.requestMIDIAccess() возвращает обещание, означающее, что он вызовет либо функцию успеха, либо функцию отказа в зависимости от результата запроса доступа к MIDI. Здесь мы дали ему имена двух функций, которые мы собираемся создать дальше.

Как видите, наша функция успеха принимает параметр MIDI в виде объекта MIDIAccess. Объект MIDIAccess является ключом к получению миди-данных. Сам объект предоставляет интерфейс для любых подключенных вами MIDI-устройств. Входы представляют любые MIDI-устройства, которые вы подключили к компьютеру. У меня подключена одна MIDI-клавиатура, поэтому, если бы я зарегистрировал midi.inputs.size , он вывел бы «1».

Чтобы получить входные данные с нашего устройства, мы сначала создаем переменную и присваиваем ей значение midi.inputs.values() вот так.

Важно отметить, что значение, присвоенное входным данным, является итератором. Итератор — это объект, который знает, как получить доступ к своим свойствам по одному, отслеживая при этом текущую позицию в последовательности итераций. Он предоставляет метод next(), позволяющий получить следующий элемент в последовательности. У него также есть свойство done, чтобы сообщить нам, прошли ли мы все свойства объекта. Это означает, что мы можем написать причудливые циклы for следующим образом:

Что говорит этот цикл for:

Создайте переменную с именем input и назначьте ей следующий ввод. Поскольку мы еще не обработали какие-либо входные данные, будет возвращен первый из наших входных данных.
Если у нас есть ввод, а значение done итератора ввода не равно true, продолжаем цикл.
Задайте для ввода следующий ввод в нашем объекте итератора.

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

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

Интересующая нас часть MIDI-сообщения — это его данные; какой тип MIDI-события был отправлен? Какая клавиша на клавиатуре была нажата?

Если вы будете следовать этому руководству, то увидите, что при нажатии клавиши на клавиатуре браузер выводит на консоль что-то вроде [144, 61, 95]. И когда вы уберете палец с клавиши, браузер снова зарегистрирует что-то немного другое, например [128, 61, 0] .

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

Третье и последнее значение в массиве представляет собой скорость нажатия клавиши. Это можно использовать для имитации игры на фортепиано, где клавиши можно нажимать мягко или нажимать быстро и сильно.

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

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

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

Отметьте это и верните частоту. Давайте используем это в нашей функции onMIDIMessage.

Далее мы хотим воспроизвести ноту этой частоты, если MIDI-сообщение является сообщением noteOn.

Вы, вероятно, легко поймете первую часть этого оператора if. Мы проверяем, что тип сообщения равен 144, что является сообщением noteOn.

А как насчет второй части? Что ж, некоторые MIDI-устройства вместо отправки сообщения noteOff отправляют сообщение noteOn с нулевой велосити, поэтому мы проверяем, что сообщение имеет велосити больше нуля.

Теперь, когда мы рассмотрели noteOn, мы напишем что-то подобное для noteOff . Значение сообщения NoteOff равно 128, поэтому нам нужно проверить не только это значение, но и то, была ли его скорость равна нулю, чтобы охватить только что упомянутую ситуацию.

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

Если нет, ознакомьтесь с моей серией статей об API веб-аудио, в которой рассказывается, как создать синтезатор. Код в этом руководстве аналогичен тому, что я сделал здесь, поэтому это идеальное место для применения того, что вы здесь узнали.

Что дальше?

Помните, что noteOn и noteOff — это только два из доступных нам типов сообщений, а MIDI-клавиатура — это лишь один из множества типов MIDI-устройств. Вам даже не нужно использовать MIDI, чтобы сделать что-то музыкальное. Игра HTML5, в которую вы играете, используя MIDI-трубу? Похоже, это как раз мое дело.

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

Рабочая группа W3C по веб-аудио разработала Web MIDI API, чтобы обеспечить поддержку MIDI-устройств в качестве стандартной функции в веб-браузерах и операционных системах на различных аппаратных платформах. Google лидирует, внеся свой вклад в спецификацию и выпустив первую реализацию Web MIDI API (в Chrome v.43 для Windows, OSX и Linux), продолжая демонстрировать заинтересованность компании в том, чтобы помочь музыкантам легче взаимодействовать с музыкой. с помощью Интернета.

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

Для производителей оборудования панели управления инструментами и редакторы/библиотекари, которые ранее должны были быть выпущены в нескольких версиях, теперь могут быть реализованы один раз в HTML5, и потребители могут запускать их на любом веб-устройстве (планшете, компьютере или смартфоне). и даже "жить" в Интернете.

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

Использование и преимущества

Вот почему Web-MIDI API для веб-браузеров является самым значительным достижением MIDI с тех пор. Сам MIDI!

Работает на всех платформах и устройствах. Все, что имеет веб-браузер, может запускать приложение Web-MIDI и использовать локальное MIDI-оборудование.
Работает с существующей настройкой MIDI. Если ваше MIDI-устройство подключено к вашему компьютеру, планшету или телефону (кабелем или даже по беспроводной сети), это же соединение подключит ваше MIDI-устройство к вашему браузеру с поддержкой Web-MIDI.
Обновления выполняются автоматически . Нет необходимости устанавливать новые версии, последняя версия всегда доступна по URL-адресу веб-сайта.
Доступно везде. Приложения и данные в «облаке» доступны везде, где есть подключение к Интернету.
Это Интернет! Браузеры позволяют легко связывать вас и вашу музыку с другими людьми через социальные сети и онлайн-сообщества MIDI.

Ресурсы для разработчиков

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

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

Bandlab — Web MIDI DAW
Noteflight - Веб-нотация MIDI o - Обмен звуком в социальных сетях для синтезаторов Yamaha (
F0F7-Web MIDI SysEx Librarian n -Web MIDI DAW
Гейзенберг
Веб-синтезаторы
Хост (DAW на основе графа)
Синти
Вульт
RGBмиди
Играть на барабанах онлайн
Синтезатор Виктор НВ-1
Плоский (онлайн-оценка)
Траксус Интерактив

Компании и продукты, перечисленные здесь, не подразумевают каких-либо рекомендаций или одобрения Ассоциации MIDI.

Современные веб-браузеры предоставляют широкий набор API; некоторые из них существуют уже давно и с тех пор используются для создания мощных веб-приложений. Web Audio API был популярен среди разработчиков игр HTML5, однако Web MIDI API и его возможности еще не использовались. В этой статье инженер Toptal Стефан П. Перикат расскажет вам об основах Web MIDI API и покажет, как создать простой моносинтезатор для воспроизведения на вашем любимом MIDI-устройстве.

Стефан – технический специалист с опытом работы более 7 лет. Он специализируется на создании производительных веб-приложений на основе JavaScript.

В то время как Web Audio API становится все более популярным, особенно среди разработчиков игр HTML5, Web MIDI API по-прежнему малоизвестен среди разработчиков интерфейсов. Большая часть этого, вероятно, связана с текущим отсутствием поддержки и доступной документации; Web MIDI API в настоящее время поддерживается только в Google Chrome, при условии, что вы включили для него специальный флаг. В настоящее время производители браузеров уделяют мало внимания этому API, поскольку планируется, что он станет частью стандарта ES7.

Разработанный в начале 80-х годов несколькими представителями музыкальной индустрии, MIDI (сокращение от Musical Instrument Digital Interface) представляет собой стандартный протокол связи для электронных музыкальных устройств. Несмотря на то, что с тех пор были разработаны другие протоколы, такие как OSC; тридцать лет спустя MIDI по-прежнему является протоколом связи де-факто для производителей аудиооборудования. Вам будет трудно найти современного музыкального продюсера, у которого в студии нет хотя бы одного MIDI-устройства.

Благодаря быстрой разработке и внедрению Web Audio API мы теперь можем приступить к созданию браузерных приложений, которые устранят разрыв между облаком и физическим миром. Мало того, что Web MIDI API позволяет нам создавать синтезаторы и звуковые эффекты, мы можем даже начать создавать DAW (Digital Audio Workstation) на основе браузера, схожие по функциям и производительности с их текущими аналогами на основе флэш-памяти (посмотрите, например, Audiotool). ).

В этом учебном пособии по MIDI я познакомлю вас с основами Web MIDI API, и мы создадим простой моносинтезатор, который вы сможете использовать на своем любимом MIDI-устройстве. Полный исходный код доступен здесь, и вы можете напрямую протестировать живую демонстрацию. Если у вас нет MIDI-устройства, вы все равно можете следовать этому руководству, просмотрев ветку «клавиатура» репозитория GitHub, которая обеспечивает базовую поддержку клавиатуры вашего компьютера, поэтому вы можете играть ноты и менять октавы. Это также версия, доступная в качестве демо-версии. Однако из-за ограничений компьютерного оборудования скорость и расстройка отключаются всякий раз, когда вы используете клавиатуру компьютера для управления синтезатором. Пожалуйста, обратитесь к файлу readme на GitHub, чтобы узнать о сопоставлении клавиш и нот.

Предварительные требования к учебнику по миди

Для этого урока по MIDI вам понадобится следующее:

Мы также будем использовать Angular.js, чтобы немного структурировать наше приложение; следовательно, необходимым условием является базовое знание фреймворка.

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

Мы разобьем наше MIDI-приложение на модули с нуля, разделив его на 3 модуля:

WebMIDI: работа с различными MIDI-устройствами, подключенными к вашему компьютеру.
WebAudio: предоставление источника звука для нашего синтезатора
WebSynth: подключение веб-интерфейса к звуковому движку

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

Вы также должны установить следующие библиотеки, которые помогут вам создать приложение: Angular.js, Bootstrap и jQuery. Вероятно, проще всего установить их через Bower.

Модуль WebMIDI: связь с реальным миром

Давайте начнем выяснять, как использовать MIDI, подключив наши MIDI-устройства к нашему приложению. Для этого мы создадим простую фабрику, возвращающую единственный метод. Чтобы подключиться к нашим MIDI-устройствам через Web MIDI API, нам нужно вызвать метод navigator.requestMIDIAccess:

И это почти все!

Метод requestMIDIAccess возвращает обещание, поэтому мы можем просто вернуть его напрямую и обработать результат обещания в контроллере нашего приложения:

Как уже упоминалось, метод requestMIDIAccess возвращает обещание, передавая объект методу then с двумя свойствами: входными данными и выходными данными.

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

Наконец, мы можем получить количество устройств через свойство размера объекта итератора. Если есть хотя бы одно устройство, мы просто перебираем результат, вызывая метод next объекта итератора и помещая каждое устройство в массив, определенный в $scope. Во внешнем интерфейсе мы можем реализовать простое поле выбора, в котором будут перечислены все доступные устройства ввода, и мы сможем выбрать, какое устройство мы хотим использовать в качестве активного устройства для управления веб-синтезатором:

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

Модуль WebAudio: создание шума

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

Создать осциллятор

Роль осцилляторов состоит в том, чтобы выводить сигнал. Существуют различные типы сигналов, четыре из которых поддерживаются API WebAudio: синусоидальный, прямоугольный, треугольный и пилообразный. Говорят, что формы волн «колеблются» на определенной частоте, но при необходимости можно определить свою собственную волновую таблицу. Определенный диапазон частот, слышимых людьми, известен как звуки. В качестве альтернативы, когда они колеблются на низких частотах, осцилляторы также могут помочь нам построить LFO («низкочастотный осциллятор»), чтобы мы могли модулировать наши звуки (но это выходит за рамки данного руководства).

Первое, что нам нужно сделать, чтобы создать какой-то звук, — создать экземпляр нового AudioContext :

Оттуда мы можем создать экземпляр любого компонента, доступного через WebAudio API. Поскольку мы можем создать несколько экземпляров каждого компонента, имеет смысл создавать службы, чтобы иметь возможность создавать новые уникальные экземпляры необходимых нам компонентов. Начнем с создания сервиса для генерации нового осциллятора:

Теперь мы можем создавать новые осцилляторы по своему желанию, передавая в качестве аргумента экземпляр AudioContext, который мы создали ранее. Чтобы упростить задачу в будущем, мы добавим несколько методов-оболочек — простой синтаксический сахар — и вернём функцию Oscillator:

Создание многопроходного фильтра и регулятора громкости

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

Мы создаем фильтр, вызывая метод createBiquadFilter экземпляра AudioContext:

Аналогично для узла усиления мы вызываем метод createGain:

Модуль WebSynth: подключение

Теперь мы почти готовы создать наш синтезаторный интерфейс и подключить MIDI-устройства к нашему источнику звука. Во-первых, нам нужно соединить наш звуковой движок и подготовить его к приему MIDI-заметок. Чтобы подключить звуковой движок, мы просто создаем новые экземпляры необходимых нам компонентов, а затем «соединяем» их вместе, используя метод подключения, доступный для экземпляров каждого компонента. Метод connect принимает один аргумент, который является просто компонентом, к которому вы хотите подключить текущий экземпляр. Можно организовать более сложную цепочку компонентов, поскольку метод подключения может подключать один узел к нескольким модуляторам (что позволяет реализовать такие вещи, как перекрестное затухание и многое другое).

Мы только что построили внутреннюю проводку нашего звукового движка. Вы можете немного поиграть и попробовать разные комбинации проводки, но не забудьте уменьшить громкость, чтобы не стать глухим. Теперь мы можем подключить MIDI-интерфейс к нашему приложению и отправлять MIDI-сообщения звуковому движку. Мы настроим наблюдатель в поле выбора устройства, чтобы виртуально «подключить» его к нашему синтезатору.Затем мы будем прослушивать MIDI-сообщения, поступающие от устройства, и передавать информацию звуковому движку:

Здесь мы прослушиваем MIDI-события с устройства, анализируем данные из объекта MidiEvent и передаем их соответствующему методу; либо noteOn, либо noteOff в зависимости от кода события (144 для noteOn, 128 для noteOff). Теперь мы можем добавить логику в соответствующие методы аудио модуля, чтобы фактически генерировать звук:

Здесь происходит несколько вещей. В методе noteOn мы сначала помещаем текущую заметку в массив заметок. Несмотря на то, что мы строим моносинтезатор (это означает, что мы можем играть только одну ноту за раз), у нас все еще может быть несколько пальцев одновременно на клавиатуре. Итак, нам нужно поставить все эти ноты в очередь, чтобы, когда мы отпускаем одну ноту, проигрывалась следующая. Затем нам нужно остановить осциллятор, чтобы назначить новую частоту, которую мы преобразуем из ноты MIDI (шкала от 0 до 127) в фактическое значение частоты с небольшим количеством математики:

В методе noteOff мы сначала находим заметку в массиве активных заметок и удаляем ее. Затем, если это была единственная нота в массиве, мы просто выключаем громкость.

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

Модуль WebAnalyser: визуализация нашего звука

Еще одна интересная функция, которую мы можем добавить к нашему синтезатору, — это узел анализатора, который позволяет нам отображать форму волны нашего звука с помощью холста для его рендеринга. Создание узла анализатора немного сложнее, чем других объектов AudioContext, поскольку для фактического выполнения анализа требуется также создать узел scriptProcessor. Начнем с выбора элемента холста в DOM:

Затем добавляем метод подключения, в котором создадим и анализатор, и обработчик скриптов:

Сначала мы создаем объект scriptProcessor и подключаем его к месту назначения. Затем мы создаем сам анализатор, на который мы подаем аудиовыход генератора или фильтра. Обратите внимание, что нам все еще нужно подключить аудиовыход к месту назначения, чтобы мы могли его слышать! Нам также необходимо определить цвета градиента нашего графика — это делается путем вызова метода createLinearGradient элемента canvas.

Наконец, scriptProcessor запускает событие «аудиопроцесс» через определенный интервал; при запуске этого события мы вычисляем средние частоты, захваченные анализатором, очищаем холст и перерисовываем новый график частот, вызывая метод drawSpectrum:

И последнее, но не менее важное: нам нужно немного изменить проводку нашего звукового движка, чтобы приспособить этот новый компонент:

Теперь у нас есть хороший визуализатор, который позволяет нам отображать форму волны нашего синтезатора в реальном времени! Это требует некоторой работы по настройке, но это очень интересно и познавательно, особенно при использовании фильтров.

Разработка нашего синтезатора: добавление скорости и расстройки

На данный момент в нашем руководстве по MIDI у нас есть довольно крутой синтезатор, но он воспроизводит все ноты с одинаковой громкостью. Это связано с тем, что вместо правильной обработки данных о скорости мы просто устанавливаем громкость на фиксированное значение 1,0. Давайте начнем с исправления этого, а затем мы посмотрим, как мы можем включить колесо расстройки, которое вы найдете на большинстве распространенных MIDI-клавиатур.

Включение скорости

Если вы не знакомы с ним, "скорость" относится к тому, насколько сильно вы нажимаете клавишу на клавиатуре. В зависимости от этого значения создаваемый звук кажется тише или громче.

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

Диапазон динамической чувствительности MIDI-устройства составляет от 0 до 127, поэтому мы просто делим это значение на 127 и возвращаем значение с плавающей запятой с двумя десятичными знаками. Затем мы можем обновить метод _noteOn, чтобы передать вычисленное значение узлу усиления:

И все! Теперь, когда мы играем на синтезаторе, мы заметим, что громкость меняется в зависимости от того, насколько сильно мы нажимаем на клавиши на клавиатуре.

Включение колеса Detune на MIDI-клавиатуре

Большинство MIDI-клавиатур имеют колесо расстройки; Колесо позволяет слегка изменить частоту воспроизводимой в данный момент ноты, создавая интересный эффект, известный как «расстройка». Это довольно легко реализовать, когда вы научитесь использовать MIDI, поскольку колесо расстройки также запускает событие MidiMessage со своим собственным кодом события (224), которое мы можем прослушивать и действовать, пересчитывая значение частоты и обновляя генератор.

Во-первых, нам нужно поймать событие в нашем синтезаторе. Для этого мы добавляем дополнительный регистр к оператору switch, который мы создали в обратном вызове _onmidimessage:

Затем мы определяем метод расстройки в звуковом движке:

Значение расстройки по умолчанию равно 64, что означает, что расстройка не применяется, поэтому в этом случае мы просто передаем текущую частоту генератору.

Наконец, нам также необходимо обновить метод _noteOff, чтобы учитывать расстройку на случай, если в очереди появится другая заметка:

Создание интерфейса

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

Создание макета интерфейса

Мы создадим различные элементы формы для управления звуком нашего синтезатора:

Группа переключателей для выбора типа генератора
Флажок для включения/выключения фильтра
Группа переключателей для выбора типа фильтра.
Два диапазона для управления частотой и резонансом фильтра.
Два диапазона для управления атакой и высвобождением узла усиления

Создав HTML-документ для нашего интерфейса, мы должны получить что-то вроде этого:

В этом базовом руководстве по MIDI я не буду рассматривать причудливое оформление пользовательского интерфейса; вместо этого мы можем сохранить его как упражнение, чтобы позже отшлифовать пользовательский интерфейс, возможно, чтобы он выглядел примерно так:

Привязка интерфейса к звуковому движку

Мы должны определить несколько методов для привязки этих элементов управления к нашему звуковому движку.

Управление осциллятором

Для осциллятора нам нужен только метод, позволяющий установить тип осциллятора:

Управление фильтром

Для фильтра нам нужны три элемента управления: один для типа фильтра, один для частоты и один для резонанса. Мы также можем связать методы _connectFilter и _disconnectFilter со значением флажка.

Управление атакой и резонансом

Чтобы немного придать форму нашему звуку, мы можем изменить параметры атаки и восстановления узла усиления. Для этого нам нужны два метода:

Настройка наблюдателей

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

Заключение

В этом руководстве по MIDI было рассмотрено множество концепций; в основном мы узнали, как использовать WebMIDI API, который практически не документирован, если не считать официальной спецификации W3C. Реализация Google Chrome довольно прямолинейна, хотя переключение на объект итератора для устройств ввода и вывода требует небольшого рефакторинга устаревшего кода с использованием старой реализации.

Что касается WebAudio API, это очень многофункциональный API, и в этом руководстве мы рассмотрели лишь некоторые из его возможностей. В отличие от WebMIDI API, WebAudio API очень хорошо документирован, в частности, в Mozilla Developer Network. Mozilla Developer Network содержит множество примеров кода и подробные списки различных аргументов и событий для каждого компонента, которые помогут вам реализовать собственные аудиоприложения на основе браузера.

Поскольку оба API продолжают развиваться, перед разработчиками JavaScript откроются очень интересные возможности. что позволяет нам разрабатывать полнофункциональные DAW на основе браузера, которые смогут конкурировать со своими Flash-эквивалентами. А разработчики настольных компьютеров также могут начать создавать собственные кроссплатформенные приложения с помощью таких инструментов, как node-webkit. Надеемся, что это приведет к появлению нового поколения музыкальных инструментов для аудиофилов, которые расширят возможности пользователей, сократив разрыв между физическим миром и облаком.

Веб-сайт с видео, который я иногда использую, перестал работать. Я получил запрос на предоставление этому веб-сайту доступа к MIDI:

Это безопасно? Youtube и другие веб-сайты по-прежнему воспроизводят звук без каких-либо специальных разрешений, но я не уверен, каковы будут риски, если я позволю это.

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

2 ответа 2

Это в основном безопасно, если недавно не был обнаружен новый эксплойт.

Вы правы, беспокоясь. Были эксплойты с использованием MIDI, такие как этот в Windows и этот в Chrome, оба из которых были особенно неприятными. Они оба уже давно исправлены, но никогда не знаешь, когда обнаружат новую атаку.

Лично я бы не разрешил это, если бы я действительно не хотел слушать музыку - и, учитывая, что это MIDI, а не WAV или MP3, это, вероятно, довольно ужасно.

Просто примечание. Ваш ответ касается загрузки миди-файлов. MIDI API Chrome — это совсем другое.Он меньше ориентирован на воспроизведение миди-файлов и больше ориентирован на создание / транспортировку сообщений SysEx. Запрос разрешений относится к этому API.

Важно знать, что аудио не передается через MIDI. MIDI — это транспорт для команд, которые могут активировать звук. Буквальный пример: у вас есть музыкальная клавиатура, которая не издает звука. Но он подключен к коробке, которая издает звук. Таким образом, клавиатура передает команды для активации звуков и может управлять нотами, тоном, октавами и т. д. Этот транспорт может отправлять (исходить), получать (входить) или передавать (сквозь) эти команды. Обратите внимание, что это конкретные команды, а не реальный код.

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

Возможно также, что это плохо созданный сайт и он был реализован случайно. Chrome будет запрашивать доступ к MIDI-устройствам независимо от того, вызывается ли API.

Хотя я не знаю ни одного эксплойта, использующего эту функцию, мне известно о двух предыдущих CVE. CVE-2015-6792 и CVE-2015-6765 могут выполнять атаку типа «отказ в обслуживании», вызывать сбой браузера и, возможно, выполнение произвольного кода за пределами «песочницы». Однако для обоих требуются более старые версии Chrome, например 46 или 47.

Таким образом, ваши преднамеренные риски заключаются в том, что вы можете отправлять/считывать команды на подключенные MIDI-интерфейсы. Но команды должны быть конкретными и не вредными сами по себе. Но тем не менее вы все еще разрешаете команды.

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

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

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

Читайте также: