javascript

Как я не купил терменвокс и сделал его в браузере или Air Theremin

  • суббота, 7 ноября 2026 г. в 00:00:12
https://habr.com/ru/articles/1104216/
Играю на Air Theremin: Слева - экран телефона: между ладонями натянута струна-осциллограф. Справа - я.
Играю на Air Theremin: Слева - экран телефона: между ладонями натянута струна-осциллограф. Справа - я.

Доча посмотрела серию из «Кати и Эфа» и сказала, что видела там прикольный инструмент под названием терменвокс. Я вспомнил, что давно хотел тоже попробовать поиграть на нём. Загуглил, и цены оказались какие-то негуманные для инструмента на полчаса игры.

Тут мне пришла мысль сделать аналог терменвокса для телефона, чтобы для игры можно было использовать гироскоп. В современном мире расстояние от идеи до воплощения сильно сократилось, хотелось вот прям сразу пойти и вайбкодить, но я чутка притормозил себя и сперва загуглил аналоги. Оказалось, что существует прекрасный https://theremin.site/, где можно водить мышкой и генерировать прекрасные звуки. Но мне хотелось использовать именно гироскоп, поэтому я быстро создал прототип и поиграл с ним.

Air Theremin в режиме гироскопа: наклон влево-вправо — громкость, вперёд-назад — высота. На ноутбуке вместо гироскопа работает мышка.
Air Theremin в режиме гироскопа: наклон влево-вправо — громкость, вперёд-назад — высота. На ноутбуке вместо гироскопа работает мышка.

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

Забегая вперёд: в сентябре проект попал в рассылку The New York Times «The Good List». Я его туда не отправлял и никого об этом не просил — узнал по логам сервера, когда посещаемость за день подскочила со ~150 человек до 3,5 тысяч. Описали его там так:

Uses your computer's webcam to read your hand positions and translate them into the theremin's subaqueous tones.

Как на этом играют

Я не музыкант и не шарю в музыке, однако методом проб и ошибок подобрал удобные комбинации положения рук в пространстве для управления:

* Руки поднял выше — нота выше.
* Развёл руки в стороны — звук громче.
* Перекос рук управляет вибрато.
* Если ладони приблизить к камере — звук ярче, а если отклониться — глуше.

Схема жестов - эта же схема показывается в приложении при первом включении камеры.
Схема жестов - эта же схема показывается в приложении при первом включении камеры.

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

Грабли

Было много мелких, но парочка запомнилась.

Самая первая проблема — рука пропадает из трекинга. Для начала пробовал держать ноту 1.2 секунды после исчезновения руки — звук словно «подвисал». Тогда я урезал до полусекунды — при резких движениях звук пропадал внезапно и неприятно. В качестве решения стал смотреть, где рука была в последний раз. Если исчезла у края экрана, то вырубаем звук через 0.4 секунды, а если в центре экрана — то это глючит распознавание руки, так что держим звук 1 секунду.

Где пропала рука — столько и держим звук, потому что рука не телепортируется: если она пропала посреди кадра - значит её никто не убирал.
Где пропала рука — столько и держим звук, потому что рука не телепортируется: если она пропала посреди кадра - значит её никто не убирал.

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

Самая низкая нота — 65 Гц. Динамик её почти не воспроизводит, а гармоники, которые добавляет приложение, — воспроизводит, и по ним ухо достраивает ноту.
Самая низкая нота — 65 Гц. Динамик её почти не воспроизводит, а гармоники, которые добавляет приложение, — воспроизводит, и по ним ухо достраивает ноту.

После HN

Я опубликовал ссылку на Hacker News, и, внезапно, людям понравилось. За пару недель пришло 50 тысяч уникальных посетителей (не ботов, точно). Люди волновались из-за вебкамеры, подозревая, что в сеть может уходить не то, чего бы они хотели. На самом деле подгружаются только данные сайта и модель для распознавания (около 10 мегабайт). Кстати, из-за большого размера модели кнопка HANDS может срабатывать не сразу, то есть нужно капельку подождать, особенно если ты на диалапе. Возможно, интерфейс стоит немного упростить: может быть совсем не очевидно, как включить камеру или управлять звуком.

А еще как минимум четверо сказали, что нужно было назвать инструмент Airemin.

Мораль

В этой истории нет морали
В этой истории нет морали

Рекомендую поиграить - это действительно прикольно и доставляет удовольствие. Однако 5-20 минут и уже надоедает. Почему - то мне не ведомо.

Всё приложение - один файл index.html: без сборки, ничего не нужно устанавливать, код открыт под лицензией MIT. Поиграть можно на theremin.bizibah.com, код лежит на GitHub.

От распознавания пальцев я отказался, а вот энтузиаст Richard Ken Birch пошёл ровно туда: в его версии, Air Theremin - SPECTA, жестами пальцев открываются меню синтезаторов и эффектов, скрещённые запястья включают запись, а «викторией» можно зафиксировать одну руку и продолжать играть второй.

Сам я развивать проект дальше не планирую — наигрался, но если у вас есть идеи - милости просим, код открыт.