Воздух - настоящая мобильная воздушная гитара (прототип): 7 шагов (с изображениями)

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:47

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

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

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

Вы можете найти прототип приложения на этом сайте

Чтобы узнать, как играть, перейдите к этапу «Готово».

* Обязательно используйте его на своем телефоне и поверните экран горизонтально в альбомный режим *

Наслаждаться!

(ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)

Запасы:

1. Смартфон

2. Настольный компьютер или ноутбук (для программирования)

Шаг 1. Справочная информация и примечания к коду

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

Придумывая этот проект, я пробовал различные другие приложения и искал другие устройства, имеющиеся в настоящее время на рынке, такие как гитара AirJamz или Kurv, портативные гитары или даже приложение Real Guitar в магазине игр.

Во многих из них я обнаружил следующие проблемы:

1. Некоторые необходимые внешние устройства

2. Практически все приложения не позволяли играть настоящие аккорды или музыку и были просто симуляторами грифа.

3. Внешние устройства были довольно дорогими, и многие гитаристы рекомендовали покупать настоящую гитару.

Они изображены на прилагаемых изображениях.

Таким образом, приложение Air должно решать эти проблемы, имея полную возможность работать на телефоне. Я считаю, что это возможно, потому что в 2020 году у нас будет гораздо лучшая технология мобильных браузеров и множество улучшений в области компьютерного зрения, которые могут позволить нам творить чудеса с помощью одной камеры RGB.

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

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

Полный код можно найти на https://github.com/msimbao/air, и я рекомендую структурировать ваши файлы кода, как это.

Также обратите внимание, что для запуска приложения оно должно быть размещено. Я пока обнаружил, что он запускается только при размещении на github.:)

Шаг 2: бренчание

Первой важной вехой в кодировании было найти способ воспроизвести игру в цифровом виде без какой-либо внешней периферии. Моей немедленной мыслью было использовать фронтальную камеру RGB моего телефона.

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

Разобравшись в этом, мне понадобился хороший язык программирования, который можно было бы использовать для хорошего взаимодействия с камерой RGB.

Я остановился на Javascript, потому что я мог создать кроссплатформенное приложение с React Native или чем-то еще или просто разместить гитару на веб-сайте, и это могло быть доступно для всех.

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

Машинное обучение сработало очень хорошо, когда я попробовал услуги IBM и обучил около 3000 изображений за неделю для распознавания смахивания, а также распознавания аккордов. Я также пробовал handtrack.js от victordibia. К сожалению, оба они работали невероятно медленно на мобильных телефонах.

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

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

Прилагаю фотографии попыток обучения моделей машинного обучения, а также пример с diffcam.com, из которого я узнал.

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

Код для полной игры находится в прикрепленном здесь файле script.js, а движок diffcam от lonekorean находится здесь.

Шаг 3: Распознавание аккордов

Следующей вехой в написании кода был поиск способа распознавания аккордов вживую.

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

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

Затем я кое-что узнал из приложения Real Guitar, что можно было бы разместить гриф на экране телефона и использовать экран для создания форм аккордов.

Затем мне пришлось узнать, как разрешить мультитач-взаимодействие в javascript, и я нашел отличный учебник и пример из документации Mozilla.

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

1. touchStart: когда палец касается экрана.

2. touchEnd: когда палец уходит

3. touchMove: когда палец все еще находится на экране, но меняет положение.

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

В нашем случае мы проектируем ладовую доску с помощью CSS, а затем, используя Javascript, сообщаем приложению, что при нажатии определенных div вместе должен распознаваться аккорд.

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

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

Код для определения последовательности аккордов находится здесь, а контроллер грифа находится в прилагаемом коде.

Шаг 4: поиск звуков аккордов

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

К счастью, freesound.com всегда приходит мне на помощь, когда мне нужны аудиосэмплы. Я просто искал аккорды и нашел удивительный пакет мажорных аккордов данглады.

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

Чтобы обрезать их с помощью смелости, я просто перетащил их в приложение, а затем выбрал нужную мне часть звука (всю волнистую часть и ни одного из участков плоской линии, в которых нет звука). Затем я перехожу на вкладку «Правка»> «Специальное удаление»> «Обрезать звук». Затем я перешел на вкладку Tracks> Align Tracks> Start to Zero. Затем я перехожу в файл, затем «Экспорт»> «Экспорт в WAV».

Я экспортирую как WAV, потому что мне было легче работать с аудиопроектами Javascript.

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

Вам просто нужно перетащить активы в каталог проекта, а затем вы сможете найти ссылку, щелкнув папку с активами и щелкнув актив, который хотите получить. Затем Glitch создаст уникальный URL-адрес CDN для вашего актива. Например, вот ссылка на звук ля мажорного аккорда.

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

Шаг 5: Завершение и размещение всего приложения

Есть много способов организовать хостинг.

Честно говоря, лучшее, что я нашел, - это просто использовать github. Это связано с тем, что, если вы хорошо запрограммировали приложение, вы можете настроить весь сервер для обслуживания базы данных или firestore из firebase или даже использовать CDN из glitch.com и других мест для хранения ресурсов.

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

После того, как репозиторий настроен, мы можем просто перетащить наши файлы в репозиторий и нажать зеленую кнопку фиксации внизу.

Затем мы переходим на вкладку «Настройки» со значком шестеренки в правом углу страницы репозитория под кнопками звездочки и просмотра. Зайдя в настройки, прокрутите вниз, пока не увидите поле Github Pages. Измените Source на главную ветку и выберите тему, если хотите. Вы можете узнать, как использовать темы, выполнив поиск в Google (я никогда не использую их, потому что я часто приношу свои собственные идеи CSS и темы).

Когда страница будет готова, вы получите зеленую подсветку и отметку о том, что ваш сайт опубликован и доступен для доступа.

Шаг 6: Готово

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

Краткое примечание об обнаружении движения

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

2. Например, в поезде лучше сесть, надеть наушники и повернуть телефон внутрь, чтобы при движении пассажиров камера телефона большую часть времени могла видеть, как движется только ваша рука.

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

Играть:

Загрузите приложение в свой веб-браузер, затем поверните его в альбомный режим.

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

Как вариант, вы можете остановить звук, составив комбинацию аккордов.

Когда вы составляете комбинацию аккордов, текущий звук останавливается, затем выбирается новый звук аккорда.

Шаг 7: выученные вещи и заключительные слова

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

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

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

3. Не бойтесь изучать новые языки, фреймворки и системы. Часто они оказываются проще, чем вы думаете вначале.

И огромное спасибо lonekorean за то, что мои мечты сбылись

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

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

Наслаждайтесь (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: * ヽ (◕ ヮ ◕ ヽ)