Не то, что я ожидал: моя демонстрация Web-Midi на саммите разработчиков Chrome в этом году

Все началось, когда мне не удалось построить робота, играющего на трубе в Geekcon. Вскоре после этого меня пригласили представить демонстрацию на Chrome Dev Summit, и я подумал, что это будет отличная возможность изучить новый API, с которым я всегда хотел поиграть (буквально) - Web MIDI. Результат оказался не совсем таким, как я ожидал, как вы вскоре обнаружите.

В прошлом году на том же мероприятии я представил Реальную игру Chrome T-Rex. Это был забавный опыт, и я узнал множество новых навыков. Однако это было огромным делом для меня - я потратил месяц своей жизни, пытаясь добиться этого, и исправлял проблемы с оборудованием и ошибки в программном обеспечении до самого последнего момента, в номере отеля за ночь до праздника. конференция.

Я не хотел повторять то же самое в этом году, поэтому на этот раз я попытался заняться менее сложным проектом. Потратив немного времени на то, чтобы возиться с трубой и даже создать устройство с питанием от JavaScript и Angular, которое будет измерять давление воздуха, я понял, что двигаюсь точно в том же направлении, что и в прошлом году - много работы, высокий риск, очень требовательный проект. Поэтому я отправил организаторам конференции электронное письмо:

Это не сработает!

Вкратце объяснив ситуацию, я предложил им два варианта:

Час спустя Роберт Найман ответил:

Итак, моя цель была поставлена ​​- обеспечить «лучший опыт». Вызов принят!

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

Перенесемся в дни до конференции. Это было как раз после AngularConnect, и я летел на самолете в район залива. В то время у меня была вся электроника для проекта, готовая и упакованная в моем багаже, но не хватало одного элемента -

Не было пользовательского интерфейса

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

Это явно не было «лучшим опытом» для участников саммита разработчиков Chrome. Поскольку у меня в самолете был Wi-Fi, я решил потратить на это 10 часов полета. Я начал с того, что спросил себя: какой пользовательский интерфейс лучше всего подходит участникам саммита - разработчикам?

Лучший пользовательский интерфейс для разработчиков, редактор кода

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

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

Я провел первые несколько часов полета, исследуя различные решения. После сравнения нескольких альтернатив (например, codemirror, который я также использовал для tsquery-plays), я решил использовать Monaco Editor, редактор из Visual Studio Code. Он обеспечивает автоматическое завершение кода и проверку типов (благодаря тесной интеграции с TypeScript), что важно при изучении нового API.

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

Через пару часов проект был более-менее готов, и я приземлился в Сан-Франциско. Вероятно, это был самый продуктивный полет, который у меня был до сих пор, и, к удивлению, мне удалось выжать почти 1 ГБ данных из Wi-Fi самолета (400 МБ из которых потреблялись всего на npm).

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

Приехав в отель, я быстро распаковал и начал собирать проект в своем гостиничном номере:

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

День конференции

Наконец-то настал великий день!

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

Несмотря на то, что он отлично работал в отеле, были некоторые проблемы с подключением Raspberry Pi к Wi-Fi конференции, но благодаря очень полезным организаторам мероприятия был предоставлен кабель Ethernet, и через час все было готово. Затем случился первый сюрприз:

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

Мой друг Ларс Кнудсен тоже присутствовал на конференции, и, зная о моем проекте, он решил меня удивить и принес MIDI-клавиатуру 🎹. Затем пришла блестящая идея создать фрагмент кода JavaScript, который бы соединял клавиатуру с трубой - вы играете на клавиатуре, извлекаете звук из трубы:

и результат:

MIDI All Things!

Но на этом все не закончилось. У него также «случайно» был MIDI-саксофон (я даже не знал, что такое существует), поэтому он подключил его тоже, и теперь он мог играть на саксофоне и извлекать звук из трубы:

Когда мне показалось, что я все это видел, внезапно появилась Рут Джон с таинственным MIDI-устройством и подключила его к демонстрации:

Через несколько минут ее устройство тоже управляло трубой:

Это определенно был неожиданный поворот сюжета! Но что случилось с моей первоначальной гипотезой? Действительно ли люди писали код для воспроизведения песен?

Разработчики с редактором кода и трубой 👩‍💻🎺

Когда я писал Web MIDI Playground, редактор кода для моей демонстрации, я включил образец кода, который воспроизводит несколько нот, чтобы другие могли использовать его в качестве отправной точки. Ларс воспользовался возможностью, чтобы написать Hava Nagila, которую вы можете послушать в онлайн-симуляторе.

Затем Шмуэла Джейкобс написала песню, которую любит слушать ее ребенок:

Она нажала «Беги!» и начал двигаться под мелодию:

Она также сказала мне, что это был ее первый раз, когда она писала код с async / await, и ей очень понравилось, насколько это было прямолинейно. Остальные участники проиграли ее фрагмент кода более 50 раз на протяжении всего мероприятия!

Так что да, люди на самом деле писали код для проигрывания музыки во время конференции. Я не ожидал…

Разработчики любят абстракции

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

Он появился вскоре после того, как мы подключили к проекту MIDI-клавиатуру:

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

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

Следующим сюрпризом стало детище Рейли Гранта, разработчика программного обеспечения из команды Chrome. Мы встречались на саммите за год до этого, и в этом году он также вызвался помочь укомплектовать демонстрационную будку. Наблюдая за тем, как многие участники играют мелодии с помощью MIDI-клавиатуры, он пришел к блестящей идее:

Абстрагирование от редактора кода

Он потратил около получаса на написание сниппета «Composer», который будет записывать все, что вы играете на клавиатуре, и выдавать код, воспроизводящий то же самое. Затем вы можете скопировать этот код и сохранить его в своем собственном фрагменте.

Изначально я хотел, чтобы участники написали код для игры на трубе, но, благодаря клавиатуре Ларса и фрагменту кода Рейли, теперь у них был интерфейс, в котором они могли создавать код, фактически не записывая его. Все было отвлечено!

Это привело к появлению множества новых фрагментов кода, которые были записаны участниками, например следующие:

Но на этом веселье не закончилось. Рейли, который помнит мою волшебную умную лампочку с батарейным питанием из прошлого года, спросил меня, есть ли она у меня с собой. К счастью, я это сделал, поэтому мы приступили к объединению кода Web MIDI вместе с Web Bluetooth:

Да будет свет!

Мы написали небольшой фрагмент кода, который использует Web Bluetooth для подключения к лампочке и зажигания ее всякий раз, когда вы играете ноту. Примерно через 15 минут у него заработало следующее:

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

Разработчики полны сюрпризов

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

Я был действительно поражен разнообразием способов, которыми участники программировали моего робота и подключали его ко всем видам других MIDI-устройств, а также создавали интересные абстракции поверх редактора кода. Спасибо!