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

Обновлено: 07.07.2024

Чтобы защитить ваши данные, Яндекс.Браузер применяет к содержимому сайтов различные правила обработки (блокирует всплывающие окна, предупреждает о запросе сайтом местоположения и т. д.). Если правила браузера мешают вам работать с сайтом, задайте для него . Например, можно применить\nисключения, чтобы браузер не предупреждал вас каждый раз, когда Яндекс.Карты запрашивают ваше местоположение. Или усилить меры безопасности на конкретном сайте, запретив запускать на нем JavaScript.

Блокировать — запретить сайту собирать информацию о вас (такие как логин, пароль или сведения о просматриваемых страницах). После блокировки cookie сайт может работать неправильно.

На один сеанс — файлы cookie будут удалены сразу после закрытия браузера.

  Блокировать — запретить сайту показывать картинки. Без картинок он будет загружаться быстрее.

  Блокировать — запретить сайту запускать JavaScript. Некоторые скрипты JavaScript воруют пароли или заражают компьютер вирусами. Выбрав эту опцию, вы запретите запуск любых скриптов JavaScript на сайте, что повысит безопасность, но может привести к неправильной работе сайта.

Разрешить — позволить сайту запускать всплывающие окна.

  Блокировать — запретить фоновую синхронизацию браузера на всех устройствах.

  Разрешить — позволить сайту (например, Яндекс.Картам) определять ваше местоположение, не спрашивая каждый раз разрешения.

  Блокировать — запретить сайту запрашивать ваше местоположение.

  Разрешить — позволить сайту (например, Яндекс.Календарю) показывать оповещения.

Блокировать — запретить сайту показывать оповещения.

Разрешить — позволить сайту переключаться в полноэкранный режим, не спрашивая разрешения.

Разрешить — позволить сайту скрывать курсор, не спрашивая разрешения.

  Блокировать — запретить сайту доступ к микрофону.

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

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

  Разрешить — позволить сайту автоматически получать доступ к MIDI-устройствам.

Нет. Это не то, что вы думаете. Для тех, кто помнит интернет 90х, одной фразы “MIDI в вебе” достаточно, чтобы вспомнить унылое лофайное проигрывание “The Final Countdown” при посещении гостевых книг особо одаренных веб-мастеров. Однако в 2016 году MIDI в вебе, а точнее Web MIDI API имеет большой потенциал.

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

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

Хотите пианино? Просто подсоедините MIDI-клавиатуру и перейдите на страницу, использующую эти технологии для воспроизведения звука пианино. Нужен другой звук? Просто перейдите на другой сайт.

Итак, мы поняли, зачем нужен этот API, теперь будем разбираться, как он работает.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Если нет, еще раз советую прочитать серию статей о Web Audio API, включая статью о создании синтезатора. Код в этой статье похож на то, что получилось у нас сейчас.

Что дальше?

 — это встроенные в браузер мини-программы, которые добавляют в браузер новые функциональные возможности, например блокируют неприятную рекламу, включают ночной режим или управляют паролями. В Яндекс.Браузер можно устанавливать расширения, созданные командой браузера, а также расширения из Каталога браузера Opera.

Примечание. Среди расширений часто встречаются вредоносные, так как они создаются не только разработчиками браузеров, но и сторонними программистами. Поэтому Яндекс.Браузер отключает расширения из непроверенных источников и периодически проверяет, не появилось ли среди ранее установленных расширений подделок.

Просмотр списка расширений

Примечание. Если нужного расширения нет в списке или оно не устанавливается, скорее всего вы используете Яндекс.Браузер для организаций, а ограничения выставлены политикой «Настройки черного списка расширений».

Анализ существующих расширений и изучение предпочтений пользователей позволили отобрать для Яндекс.Браузера наиболее популярные, полезные и безопасные расширения.

Чтобы открыть список расширений, нажмите   → Дополнения .

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

Действия с расширениями

Установить
Включить или выключить
Настроить
Удалить

Выберите расширение и нажмите кнопку  Установить .

Вы можете установить расширения из Каталога браузера Opera, совместимого с Яндекс.Браузером.

В нижней части страницы нажмите  Каталог расширений для Яндекс.Браузера . Перейдите на страницу нужного расширения и нажмите  + Добавить в Яндекс.Браузер . В открывшемся окне ознакомьтесь со списком данных, к которым расширение получит доступ. Если вы согласны дать доступ к своим данным, подтвердите установку. Найдите в списке нужное расширение и установите переключатель в положение  Вкл. / Выкл.

Чтобы получить доступ к настройкам расширения:

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

Предустановленные расширения (Антишок, Блокировка рекламы, Советник, Эфир, Почта и т. п.) удалить нельзя, их можно отключить.

В описании нужного расширения нажмите  Подробнее .

Расширение удалится из файлов браузера, но не пропадет со страницы Дополнения . При включении оно будет скачано и установлено заново.

Значок расширения

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

Скрыть значок
Показать значок
Свернуть несколько значков

Если значок расширения не отображается на панели браузера:

В описании нужного расширения нажмите  Подробнее .

Если значков на панели очень много, их можно свернуть:

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

Чтобы увидеть все свернутые расширения, нажмите  .

Задать горячие клавиши для расширений

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

В нижней части страницы нажмите  Быстрые клавиши для расширений . Выберите действие, для которого нужно задать последовательность горячих клавиш, и установите курсор в поле справа от его названия. Нажмите и удерживайте одну или несколько служебных клавиш ( Ctrl , Shift , Alt ) и клавишу по вашему выбору.

Какие расширения не поддерживает Яндекс.Браузер?

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

«Yandex заблокировал установку потенциально опасного расширения» .

Расширение является вредоносным и находится в черном списке.

«Яндекс.Браузер не поддерживает это расширение» .

Расширение несовместимо с браузером технически.

Инсталлятор сообщает об успешной установке расширения, но оно не появляется на странице дополнений.

Расширение несовместимо с браузером технически.

Как добавить новое расширение в Яндекс.Браузер?

Откройте папку с архивом и перетащите его в окно браузера.

После установки расширение появится в блоке Из других источников .

Проблемы с расширениями

Попробуйте переустановить его. Откройте в браузере страницу browser://extensions/ . Найдите нужное расширение и нажмите кнопку Удалить . Затем вновь установите его со страницы browser://tune или из источника, откуда вы раньше установили это расширение.

Не работает расширение Яндекс.Почты, Диска, Погоды или Пробок

Расширения «Элементы Яндекса» (Почта, Погода, Пробки и Диск) больше не развиваются и не устанавливаются, их корректная работа не гарантируется. Установите эти сервисы в качестве веб-приложений.

">,"extra_meta":[>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>,>],"title":"Расширения. Справка","canonical":"https://browser.yandex.ru/help/personalization/extension.html","productName":"Яндекс.Браузер","extra_js":[[],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>,,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>],[,"mods":<>,"__func134":true,"tag":"script","bem":false,"attrs":,"__func61":true>]],"extra_css":[[],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>,,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>],[,"mods":<>,"__func63":true,"__func62":true,"bem":false,"tag":"link","attrs":>]],"csp":<"script-src":[]>,"documentPath":"/help/personalization/extension.html","isBreadcrumbsEnabled":true,"lang":"ru","params":<>>>>'>— это встроенные в браузер мини-программы, которые добавляют в браузер новые функциональные возможности, например блокируют неприятную рекламу, включают ночной режим или управляют паролями. В Яндекс.Браузер можно устанавливать расширения, созданные командой браузера, а также расширения из Каталога браузера Opera.

Просмотр списка расширений

Чтобы открыть список расширений, нажмите → Дополнения .

Чтобы сделать ваше пребывание в интернете безопасным и комфортным, браузер применяет к элементам сайтов различные правила обработки (блокирует всплывающие окна, предупреждает о запросе сайтом местоположения и т. д.). С помощью панели Protect или в настройках вы можете изменить поведение браузера для всех сайтов или для выбранного сайта. Например, вы можете запретить запускать на всех сайтах JavaScript или разрешить выбранному сайту доступ к видеокамере.

Какие правила обработки вы можете менять

Для текущего сайта . Из панели Protect можно изменить правила обработки основного списка элементов.

Для всех сайтов . В настройках можно изменить правила обработки расширенного списка элементов.

Элементы, которыми можно управлять на панели Protect

Примечание. Значки из таблицы отображаются в Умной строке справа и показывают правила обработки для текущего сайта. Чтобы изменить правило обработки, нажмите на значок.

Спрашивать — при попытке сайта определить местоположение браузер запросит у вас разрешение на передачу данных.

  Блокировать — запретить сайту запрашивать ваше местоположение.

Спрашивать — если сайт (например, портал для видеоконференций) попытается получить доступ к камере, браузер предупредит вас об этом.

Спрашивать — если сайт (например, портал для видеоконференций) попытается получить доступ к микрофону, браузер предупредит вас об этом.

  Блокировать — запретить сайту доступ к микрофону.

  Разрешить — позволить сайту (например, Яндекс.Календарю) показывать уведомления.

Блокировать — запретить сайту показывать уведомления.

Разрешать — по умолчанию запускать JavaScript разрешено.

  Блокировать — запретить сайту показывать картинки. Без картинок он будет загружаться быстрее.

Блокировать — по умолчанию всплывающие окна блокируются, так как загромождают экран и часто используются для баннерной рекламы. Если сайт пытается открыть всплывающие окна, в Умной строке появляется значок .

Разрешить — позволить сайту запускать всплывающие окна.

Разрешать — по умолчанию синхронизация устройств производится в фоновом режиме.

Блокировать — запретить фоновую синхронизацию браузера на всех устройствах.

Спрашивать — если сайт после загрузки первого файла попытается автоматически загрузить второй, браузер предупредит вас об этом.

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

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

Спрашивать — если сайт запросит доступ к электронным музыкальным инструментам, использующим интерфейс MIDI, браузер предупредит вас об этом.

  Разрешить — позволить сайту автоматически получать доступ к MIDI-устройствам.

  Блокировать — запретить сайту доступ к MIDI-устройствам.

Выключено — запретить строгую проверку сертификатов. Режим включается автоматически при открытии страниц оплаты на сайтах банков и платежных систем.

 Включено — разрешить строгую проверку сертификатов, отключить все расширения браузера.

Web MIDI API — интересный зверь. Хоть он и существует уже почти пять лет, его все еще поддерживает только Chromium. Но это не помешает нам создать полноценный синтезатор в Angular. Пора поднять Web Audio API на новый уровень!

Web MIDI API

Dependency Injection

Чтобы подписаться на события, мы сначала должны получить MIDIAccess -объект, чтобы добраться до портов. navigator вернет нам Promise , а RxJs превратит его для нас в Observable . Мы можем создать для этого InjectionToken , используя NAVIGATOR из @ng-web-apis/common. Так мы не обращается к глобальному объекту напрямую:

Теперь мы можем подписаться на все MIDI-события. Можно создать Observable одним из двух способов:

Создать сервис, который наследуется от Observable , как мы делали в Geolocation API
Создать токен с фабрикой, который будет транслировать этот Promise в Observable событий

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

Кстати, вы знали, что нет необходимости спрэдить массив Provider[] , когда добавляете его в метаданные? Поле providers декоратора @Directive поддерживает многомерные массивы, так что можно писать просто:

Если вам интересны подобные практичные мелочи про Angular — приглашаю почитать нашу серию твитов с полезными советами.

Аналогичным образом можно добывать и входные порты, а также запрашивать их по имени.

Операторы

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

Вот так мы можем слушать события с определенного канала:

Status byte организован группами по 16: 128—143 отвечают за нажатые клавиши ( noteOn ) на каждом из 16 каналов. 144—159 — за отпускание зажатых клавиш ( noteOff ). Таким образом, если мы возьмем остаток от деления этого байта на 16 — получим номер канала.

Если нас интересуют только сыгранные ноты, поможет такой оператор:

Теперь можно строить цепочки операторов, чтобы получить стрим, который нам нужен:

Пора применить все это на практике!

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

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

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

Чтобы звук не прерывался резко и не звучал всегда на одной громкости, создадим полноценный ADSR-пайп. В прошлой статье была его упрощенная версия. Напомню, идея ADSR — менять громкость звука следующим образом:

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

Теперь, когда мы нажимаем клавишу, громкость будет линейно нарастать за время attack. Затем она убавится до уровня sustain за время decay. А когда мы отпустим клавишу, громкость упадет до нуля за время release.

С таким пайпом мы можем набросать синтезатор в шаблоне:

Мы перебираем собранные ноты с помощью встроенного keyvalue пайпа, отслеживая их по номеру сыгранной клавиши. Затем у нас есть два осциллятора, играющих нужные частоты. А в конце — эффект реверберации с помощью ConvolverNode . Довольно нехитрая конструкция и совсем немного кода, но мы получим хорошо звучащий, готовый к использованию инструмент. Попробуйте демо в Chrome:

Если у вас нет MIDI-клавиатуры — можете понажимать на ноты мышкой.

Заключение

В Angular мы привыкли работать с событиями с помощью RxJs. И Web MIDI API не сильно отличается от привычных DOM-событий. С помощью пары токенов и архитектурных решений мы смогли с легкостью добавить поддержку MIDI в наше Angular приложение. Описанное решение доступно в виде open-source библиотеки @ng-web-apis/midi. Она является частью большого проекта, под названием Web APIs for Angular. Наша цель — создание легковесных качественных оберток для использования нативного API в Angular приложениях. Так что если вам нужен, к примеру, Payment Request API или Intersection Observer — посмотрите все наши релизы.

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