Создание музыки в браузере - Web MIDI API
MIDI официально попал в веб-браузер! Ну, по крайней мере, в Google Chrome. В последней версии Google Chrome MIDI включен по умолчанию, тогда как ранее его нужно было включить, установив специальный флажок в браузере. Это открывает огромное разнообразие возможностей не только для искусства и музыки в браузере, но также позволяет любому оборудованию, которое использует MIDI в качестве своей коммуникационной платформы, контролировать и контролировать ваш браузер. MIDI.org Сам по себе говорит: « Web-MIDI API - это самое значительное усовершенствование MIDI, так как… само MIDI!»
MIDI был доступен во всех основных ОС в течение многих лет, даже на iOS / планшете / мобильном телефоне, но до сих пор существовала явная нехватка поддержки MIDI в чем-то, что есть у каждого с компьютером, планшетом или смартфоном: в Интернете браузер.
Использование и преимущества **
Вот почему API-интерфейс Web-MIDI для веб-браузеров является наиболее значительным усовершенствованием MIDI, поскольку… сама MIDI!
- Работает на всех платформах и устройствах. Все, что имеет веб-браузер, может запускать приложение Web-MIDI и использовать локальное оборудование MIDI.
- Работает с вашей существующей настройкой MIDI. Если ваше MIDI-устройство подключено к вашему компьютеру, планшету или телефону (по кабелю или даже по беспроводной связи), то это же соединение подключит ваше MIDI-устройство к вашему браузеру с поддержкой Web-MIDI.
- Обновления автоматические. Нет необходимости устанавливать новые версии, последняя версия всегда доступна по адресу сайта.
- Доступно где угодно. Приложения и данные в «облаке» доступны везде, где есть подключение к Интернету.
- Это интернет! Браузеры позволяют легко связать вас и вашу музыку с другими людьми через социальные сети и интерактивные MIDI-сообщества.
В этой вводной статье серии «Создание музыки в веб-браузере» я собираюсь рассказать вам об основах настройки MIDI-клавиатуры / контроллера для взаимодействия с вашим браузером. В следующих статьях я покажу вам, как использовать API-интерфейс Web Audio для создания простых приложений для воспроизведения и манипуляции, вплоть до создания различных синтезаторов в вашем браузере.
Примечание. Базовое понимание JavaScript или другого языка на основе Си поможет сделать эту статью более понятной.
Ты можешь использовать Codecademy чтобы быстро освоить JavaScript, если вы заинтересованы, и вы можете и должны проконсультироваться с Сеть разработчиков Mozilla часто, чтобы получить более глубокое понимание языка.
Инструменты: Консоль разработчика ((Mac) Command + Opt + J, (Windows) Control + Shift + J), редактор кода, такой как SublimeText ,
Во-первых, давайте выясним, что не мешает Web-MIDI API: *
- Непосредственно не поддерживает стандартные MIDI-файлы, хотя проигрыватель стандартных MIDI-файлов может быть построен поверх Web MIDI API.
- Не предназначен для семантической записи патчей или назначений контроллеров, как это делает General MIDI, хотя General MIDI можно легко использовать через Web MIDI API.
ОК, подключите MIDI-клавиатуру и начнем!
Взгляните на следующий фрагмент кода, который является основным принципом использования Web MIDI.
Самый первый шаг, который нам нужно сделать, это проверить, поддерживает ли браузер API WebMIDI, проверив наличие метода requestMIDIAccess ().
* В настоящее время только Google Chrome, Opera, Brave и MicroSoft Edge поддерживают Web MIDI API, но в следующем году или около того мы можем увидеть Mozilla (FireFox) и Safari с их собственными реализациями. К счастью, вы можете использовать Web MIDI во всех современных браузерах, используя очень полезные WebMIDIAPI Polyfill написанный Крисом Уилсоном.
Хорошо, вернемся к нашему коду.
Если браузер поддерживает Web MIDI, метод requestMIDIAccess () возвращает объект «MIDI Access», который содержит всю информацию о подключенном устройстве, которую мы вскоре рассмотрим. Этот объект 'MIDI Access' передается в функцию onMIDISuccess () для использования нами. Если браузер не поддерживает Web MIDI, то вызывается функция onMIDIFailure (), заканчивая все самое интересное, что вы могли бы получить. * Возможно, вы заметили, что сообщения System Exclusive, или «sysex», также поддерживаются, если установлено значение «true», но это для другой статьи.
Теперь, когда у нас есть активное MIDI-соединение и информация об устройстве, нам нужно что-то с этим сделать. Нажмите на вкладку «Результат» выше и откройте Chrome Developer Tools (Console), вы увидите наш объект MIDIAccess, который показывает входы, выходы и статус sysex. 
В этом объекте мы ищем «входы», в частности их значения, которые нам нужно перебрать.
Давайте добавим этот фрагмент кода в нашу функцию onMIDISuccess (): 
В теле цикла for вы увидите, что каждый раз, когда мы отправляем сообщение, вызывается наша функция onMIDIMessage ().
Далее, давайте добавим некоторый код в нашу функцию onMIDIMessage () для регистрации наших входящих данных ключа:
Нажмите клавишу на клавиатуре MIDI, и вы увидите серию сообщений. 
Нажатие на треугольник покажет вам всю информацию, которую вы получаете при каждом нажатии клавиши.
Как бы круто это ни было, это все еще не очень удобно. Мы хотим получить свойство data.
Теперь нам нужно создать нашу функцию onMIDIMessage (), чтобы мы могли использовать входящие данные.
Давайте добавим некоторые переменные, чтобы легче использовать наши данные:
Кроме того, мы должны добавить оператор switch, чтобы контролировать, что происходит, когда мы нажимаем и отпускаем клавишу:
Оператор switch - это место, где происходит настоящая логика. Существует множество «случаев», которые могут возникнуть при нажатии клавиши / контроллера. Например, вы можете написать функции, которые используют давление или изгиб высоты тона для манипулирования нотой / образцом. *****
Вы также можете легко преобразовать данные нот MIDI в высоту тона, используя API-интерфейс Web Audio и такую функцию:
Наш оператор switch использует первую часть наших MIDI-данных: [144, 63, 73], 144, чтобы выбрать, что мы будем делать дальше. 144 обычно является сообщением о включении, а 128 - сообщением о выключении.
Этот первый байт обычно представляет тип MIDI-сообщения, например, вкл., Выкл., Изменение высоты тона и т. Д. Мы также проверим скорость, просто чтобы убедиться, что мы получаем сообщение noteOff, когда ожидаем его.
Теперь, когда вы нажмете клавишу, вы увидите, что у вас есть сообщения noteOn и NoteOff, все, что вам нужно сделать, это передать эти данные ключа в функцию, чтобы что-то с ней сделать.
Давайте добавим функции noteOn () и noteOff (), которые вызывают player (), который воспроизводит сэмплы:
В следующих статьях я расскажу о том, как использовать API-интерфейс Web Audio для генерации и использования звуков в деталях, но просто чтобы дать вам представление об использовании Web Audio с Web MIDI, я создал простой пример проигрывателя, который реагирует на MIDI, qwerty клавиатура [q, w, e, r, t] и щелчок мышью ниже. По сути, я загружаю звуки и управляю воспроизведением, используя значение и скорость MIDI-ноты. Я также рандомизирую скорость воспроизведения сэмпла при каждом нажатии клавиши для разнообразия. Все звуки, которые я использую, взяты из поста Eurorack Мэтта Хеттиха в модуле Taiko ALM Dinky: Ежемесячная раскопка Мэтта: ALM Dinky's Taiko ,
Попробуйте и расскажите, что код делает из моих комментариев, я объясню все это в следующих публикациях по API Web Audio. Кроме того, сэмплы здесь запускаются только нотами MIDI 60 - 64.
С нетерпением ждем, чтобы наши руки испачкались с помощью Web Audio и Web MIDI!
Несколько заключительных слов вдохновения от MIDI.org :
« Web MIDI API подключает ваше MIDI-устройство непосредственно к вашему браузеру.
Ваш браузер соединяет вас с остальным миром. »
Нажмите на вкладку «Результат», чтобы увидеть его в действии.
Вы можете скачать исходный код урока со звуками Вот ,
Вот живая статистика по поддержке браузера Web MIDI
Могу ли я использовать миди? Данные о поддержке функции midi в основных браузерах от caniuse.com.
Ресурсы:
* https://webaudio.github.io/web-midi-api/
** https://www.midi.org/aboutmidi/web-midi.php
*** https://github.com/cwilso/WebMIDIAPIShim
**** http://createdigitalmusic.com/2015/05/hardware-midi-chrome-audiotool-free-code-coming-html5/
***** https://www.midi.org/specifications/item/table-1-summary-of-midi-message
JavaScript обещания
Битовые операторы JavaScript
Если у тебя есть Продукт KMI попробуйте эту демонстрацию Web MIDI, чтобы увидеть разнообразные данные, которые вы получите от наших контроллеров. Если у вас нет продукта KMI, получите его на нашем Магазин ,
Похожие
WHT SHDW выходит в центр внимания. WHT SHDW выходит в центр внимания. Продюсер суперзвезд широко известен сво...WHT SHDW выходит в центр внимания. WHT SHDW выходит в центр внимания. Продюсер суперзвезд широко известен своим огромным талантом в альбомах Lady Gaga Born This Way и ARTPOP , но сложный хитмейкер наконец-то решил выпустить собственное произведение. акустика
акустика Создание акустически благоприятных условий в офисе важно, но сложно, поэтому мы годами помогаем нашим клиентам в создании тихого рабочего места. Мы организовали первый в Польше форум по акустике , где вместе с известным экспертом доктором Кристианом Ноке мы поделились своими знаниями о создании акустического комфорта в современных офисах. В сотрудничестве с Университетом наук и технологий AGH в Кракове и Университетом наук о жизни в Познани Понимание покупательского цикла и триггеров
В этой статье рассказывается, почему клиенты ожидают от вас различного взаимодействия в зависимости от того, где они находятся в цикле покупки. Он также исследует, как конкретные события запускают их в режиме покупки. Затем объясняется, как вы можете использовать эту информацию для повышения эффективности маркетинга. Цикл покупки покупателя Простой способ взглянуть на цикл покупки - разбить его на три этапа: Осведомленность - когда клиент впервые узнает