Air - True Mobile Air Guitar (прототип): 7 стъпки (със снимки)

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:49

Добре и, Това ще бъде наистина кратка инструкция за първата част от най -накрая да се доближа до моята детска мечта.

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

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

Можете да намерите прототипното приложение на този уебсайт

За да видите как да играете, преминете към стъпката „Готови сте“.

* Не забравяйте да го използвате на телефона си и да завъртите екрана странично в пейзажен режим *

Наслади се!

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

Консумативи:

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. За съжаление и двамата бяха невероятно бавни с мобилните телефони.

След това се натъкнах на откриване на движение и изпълнение от lonekorean на diffcam.com. Научих, че е възможно да се използва уеб камерата за запис на два отделни кадъра и след това да се изчисли разликата между кадрите и да се даде оценка на разликата. Ако този резултат надхвърли определен праг, тогава изпълнявам действие.

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

Прикачени са снимки на опити за обучение на модели за машинно обучение, както и примерът diffcam.com, от който научих.

Забележка: В този текущ прототип струпването се повтаря отново и отново, за да го спрете, просто задръжте акорда, който искате да свирите следващия надолу. Това е грешка, която се надяваме да поправим напред.

Кодът за пълната структура се намира във файла script.js, прикачен тук, а двигателят diffcam от lonekorean е тук.

Стъпка 3: Разпознаване на акорди

Следващият етап в кодирането беше да намери начин да се справи с разпознаването на акорди на живо.

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

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

След това научих нещо от приложението Real Guitar, че може да е възможно да поставите гриф на екрана на телефона, като използвате екрана за генериране на форми на акорд.

След това трябваше да се науча как да позволя мултитъч взаимодействие в javascript и намерих страхотен урок и пример от документите на Mozilla

Взаимодействията с докосване могат да бъдат трудни, особено в Javascript, но идеята е, че можем да създадем определени диви и след това да дефинираме функции за обработка на различни събития при докосване:

1. touchStart: Когато пръст докосне екрана

2. touchEnd: Когато пръстът напусне

3. touchMove: Когато пръстът все още е на екрана, но променя позицията си

След това заобикаляме тези функции, за да дефинираме собствените си елементи, които реагират на различни събития и комбинации при докосване.

В нашия случай ние проектираме дъска за фретове, използвайки CSS и след това използвайки Javascript, казваме на приложението, че когато някои div са натиснати заедно, акорд трябва да бъде разпознат.

След това можем да дефинираме аудио обект, към който ще предадем акорда, и след това да възпроизведем този звук, когато възникне събитие с плъзгане.

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

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

Стъпка 4: Намиране на акордови звуци

Сега, когато системата ни е настроена да разпознава, имаме нужда от някои действителни акордови звуци.

За щастие, freesound.com винаги ми идва на помощ, когато се нуждая от аудио проби. Просто потърсих акорди и намерих невероятен пакет от основни акорди на danglada.

След това ги изтеглих и редактирах с дързост, за да се уверя, че звукът започва веднага, а не кратката пауза в началото на повечето от тях, когато се записват.

За да ги изрежа с помощта на дързост, просто ги плъзнах в приложението, след което избрах желаната част от звука (цялата вълнообразна част и нито една от секциите с плоска линия, които нямат звук). След това отивам в раздела Редактиране> Премахване на специални> Подстригване на аудио. След това стигнах до раздела Tracks> Align Tracks> Start to Zero. След това отивам във файл, след това Експорт> Експортиране като WAV.

Експортирам като WAV, защото ми беше по -лесно да се справям с аудио проекти на Javascript.

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

Просто трябва да плъзнете и пуснете активите в директорията на проекта и след това можете да намерите връзка, когато щракнете върху папката с активи и щракнете върху актива, който искате да получите. След това Glitch ще създаде уникален CDN URL адрес за вашия актив. Например, ето връзката към звука на A -major Chord.

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

Стъпка 5: Завършване и хостване на цялото приложение

Има много начини за хостинг.

Честно казано, най -доброто, което открих, е просто да използвам github. Това е така, защото ако сте програмирали добре приложение, можете да накарате целия ви заден край да се обслужва от база данни или firestore от firebase или дори да използвате CDN от glitch.com и други места за съхранение на активи.

За да хоствате проекта на github, всичко, което трябва да направите, е да отворите github акаунт, да направите ново хранилище. След това, за да улесните настройката, след като сте въвели името на проекта, винаги се уверете, че сте добавили лиценз (не съм експерт, но установих, че това улеснява живота ми). Винаги използвам само публичен лиценз като GNU.

След като хранилището е настроено, можем просто да плъзнем и пуснем файловете си в хранилището и да кликнете върху зеления бутон за ангажиране в долната част.

След това отиваме в раздела Настройки с иконата на зъбно колело най -вдясно на страницата на хранилището под бутоните със звезда и часовник. След като влезете в настройките, превъртете надолу, докато видите полето Github Pages. Променете източника на главен клон и изберете тема, ако искате. Можете да научите как да използвате теми, като ги потърсите в гугъл (никога не ги използвам, защото често нося свои собствени CSS и идеи за теми).

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

Стъпка 6: Готово

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

Бърза бележка за откриване на движение

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

2. Например във влака е по -добре да седнете и да сложите слушалките си и да обърнете телефона си навътре, така че ако пътниците се движат около вас, камерата на телефона може да вижда ръката ви само през повечето време.

3. Ръката, която стиска телефона, трябва да е относително неподвижна в зависимост от прага ви. Мисля, че ще пусна някои тестове с висок праг и ще актуализирам границите за по -нататък, за да бъдат по -конкретни.

Да играя:

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

След това, когато замахнете с ръка, акорд ще свири, но той ще продължи да свири, докато не докоснете клавиша F в най -долния десен ъгъл.

Като алтернатива можете да спрете звука, като направите комбинация от акорди.

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

Стъпка 7: Научени неща и заключителни думи

Наистина ми хареса да работя по този проект, дори ако отне много време за създаването на прототип и създаването на приложението, докато работя по други проекти и домашна работа. Научих няколко страхотни неща по пътя;

1. Когато проектирате цифрови продукти, винаги се уверете, че правите вашите прототипи възможно най -бързо, защото първите ви предположения ще бъдат погрешни и трябва да ги преодолеете бързо, за да стигнете до края.

2. Избягвайте да харчите пари по проект колкото е възможно повече. Винаги използвайте отново каквото можете и винаги започнете с прости неща, които имате под ръка.

3. Не се страхувайте да научите нови езици, рамки и системи. Често те са по -лесни, отколкото си мислите в началото.

И огромни благодарности на lonekorean за осъществяването на мечтите ми

Ако ще ви интересува как се развива приложението, можете да се присъедините към нашия пощенски списък. Малък екип и аз ще работим, за да направим пълна версия, за да помогнем на хората, които са счупени, пътуващи или малки деца, да имат достъп до страхотна преносима китара, където и да се намират.

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

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