Air - skutečná mobilní vzduchová kytara (prototyp): 7 kroků (s obrázky)

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:18

Dobrá takže, Toto bude opravdu krátký návod k první části, jak se konečně přiblížit mému dětskému snu.

Když jsem byl malý kluk, vždycky jsem sledoval, jak moji oblíbení umělci a kapely bezvadně hrají na kytaru.

Jak jsem vyrůstal, byl jsem dost vděčný za to, že jsem se naučil hrát na kytaru a dokonce hrát na některé, které vlastní jiní, ale stále nemám vlastní:(Rozhodl jsem se tedy, že si konečně sednu a vyrobím takový, který bude fungovat úplně po telefonu, bude využívat počítačové vidění a umožní lidem jako já, kteří chtějí kytaru, ale možná cestují, jsou zlomení nebo příliš mladí na to, aby si ji ještě pořídili!

Prototypovou aplikaci najdete na tomto webu

Chcete -li zjistit, jak hrát, přejděte na krok „Hotovo“.

* Určitě jej použijte v telefonu a otočte obrazovku do strany na šířku *

Užívat si!

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

Zásoby:

1. Chytrý telefon

2. Stolní počítač nebo notebook (pro programování)

Krok 1: Pozadí a poznámka ke kódu

Tento projekt je z velké části kódovaný projekt zaměřený na úplné spuštění v telefonu.

Když jsem přišel s tímto projektem, vyzkoušel jsem různé další aplikace a vyhledal další zařízení, která jsou v současné době na trhu, jako je kytara AirJamz nebo Kurv, přenosné kytary nebo dokonce aplikace Real Guitar v obchodě Play.

Problémy, které jsem u mnoha z nich postrádal, byly:

1. Některá potřebná externí zařízení

2. Téměř všechny aplikace vám opravdu nedovolily hrát skutečné akordy nebo hudbu a byly to jen simulátory pražců

3. Externí zařízení byla dost drahá a mnoho kytaristů doporučilo koupit si skutečnou kytaru

Ty jsou vyobrazeny na doprovodných obrázcích.

A tak aplikace Air musí tyto problémy vyřešit, přičemž je zcela schopná běžet na telefonu. Věřím, že je to možné, protože v roce 2020 máme mnohem lepší technologii mobilních prohlížečů a spoustu vylepšení počítačového vidění, které nám umožní dělat zázraky s jedinou kamerou RGB.

Před úplným začátkem jsem tedy udělal pár náčrtů toho, jak to bude vypadat a jak to bude fungovat.

Také jsem nakreslil své milníky v oblasti kódování, takže v tomto pokynu vás místo nudy kódem provedu procesem návrhu a na konci připojím anotovaný kód, abyste si jej mohli přečíst a podívat se, pokud budete potřebovat.

Celý kód lze nalézt na adrese https://github.com/msimbao/air a doporučuji strukturovat soubory kódu podobně jako toto.

Všimněte si také, že aby aplikace běžela, musí být hostována. Zatím jsem zjistil, že běží pouze při hostování na githubu.:)

Krok 2: Strumming Action

Prvním zásadním milníkem v kódování bylo najít způsob, jak replikovat strum digitálně bez jakékoli vnější periferie. Moje bezprostřední myšlenka byla použít přední kameru RGB mého telefonu.

Říkal jsem si, že pokud má člověk akord, který chce hrát, pak když přejíždí rukou před kamerou, přehraje se zvuk.

Poté, co jsem to zjistil, potřeboval jsem dobrý programovací jazyk, který by mohl být použit k dobrému propojení s RGB kamerou.

Rozhodl jsem se pro Javascript, protože jsem mohl vytvořit multiplatformní aplikaci s React Native nebo s něčím jiným, nebo jsem mohl hostit kytaru na webu a ta by mohla být dostupná pro každého.

Pak jsem našel různé způsoby, jak zjistit, jak přimět přejetím ruky ke spuštění akce, kterou by mohl být zvuk akordu, ale bylo mnoho způsobů, jak to udělat.

Strojové učení fungovalo skvěle, když jsem vyzkoušel služby IBM a za týden jsem vyškolil asi 3000 obrázků na rozpoznávání přejetím prstu a rozpoznávání akordů. Zkoušel jsem také handtrack.js od victordibia. Bohužel byli oba na mobilních telefonech neuvěřitelně pomalí.

Pak jsem narazil na detekci pohybu a implementaci lonekorean na diffcam.com. Dozvěděl jsem se, že je možné pomocí webové kamery zaznamenat dva samostatné snímky a poté vypočítat rozdíl mezi snímky a dát rozdílu skóre. Pokud toto skóre překročí určitou prahovou hodnotu, provedu akci.

Lonekorean také vytvořil motor pro svou diferenciální kameru, kterou jsem se rozhodl použít pro kytaru Air, a fungovalo to perfektně pro získání skóre pohybu!

Přikládáme obrázky pokusů o školení modelů strojového učení a příklad diffcam.com, ze kterého jsem se naučil.

Poznámka: V tomto aktuálním prototypu se brnkání trochu opakuje znovu a znovu. Chcete -li to zastavit, jednoduše podržte akord, který chcete hrát jako další. Toto je chyba, kterou doufáme opravíme.

Kód pro plné strumy najdete v přiloženém souboru script.js a zde je engine diffcam od lonekorean.

Krok 3: Rozpoznání akordu

Dalším milníkem v kódování pak bylo najít způsob, jak zvládnout rozpoznávání akordů naživo.

Chtěl jsem, aby byl uživatel schopen replikovat skutečné tvary akordů, a tak si procvičil dobré umístění ruky a také jim pomohl cvičit různé akordy.

Stejně jako v posledním kroku jsem vyzkoušel strojové učení pro rozpoznávání akordů, ale na mobilních telefonech to šlo velmi pomalu.

Pak jsem se z aplikace Real Guitar dozvěděl něco o tom, že by bylo možné umístit hmatník na obrazovku telefonu pomocí obrazovky pro generování tvarů akordů.

Poté jsem se musel naučit, jak povolit vícedotykovou interakci v javascriptu, a našel jsem úžasný tutoriál a příklad z dokumentů Mozilly

Dotykové interakce mohou být složité, zejména v Javascriptu, ale myšlenkou je, že můžeme vytvořit určité divy a poté definovat funkce pro zpracování různých dotykových událostí:

1. touchStart: Když se prst dotkne obrazovky

2. touchEnd: Když prst odejde

3. touchMove: Když je prst stále na obrazovce, ale mění polohu

Poté tyto funkce obcházíme a definujeme vlastní prvky, které reagují na různé dotykové události a kombinace.

V našem případě navrhneme pražcovou desku pomocí CSS a poté pomocí Javascriptu řekneme aplikaci, že když jsou určité divy stlačeny dohromady, měl by být rozpoznán akord.

Poté můžeme definovat zvukový objekt, kterému předáme akord, a poté jej přehrajeme, když dojde k události přejetí prstem.

Abych definoval různé kombinace akordů, vytvořil jsem pražcovou desku pomocí tohoto obrázku a poté jsem nastavil každou zvláštní pozici jako div, kterého se mohu dotknout a kombinovat s ostatními.

Kód pro definování postupu akordů se nachází zde a ovladač hmatníku se nachází v připojeném kódu.

Krok 4: Hledání zvuků akordů

Nyní, když je náš systém nastaven na rozpoznávání, potřebujeme nějaké skutečné zvuky akordů.

Naštěstí mi freesound.com vždy přijde na pomoc, když potřebuji zvukové ukázky. Jednoduše jsem hledal akordy a našel jsem úžasný balíček hlavních akordů od danglady.

Potom jsem je stáhl a pomocí drzosti upravil, abych se ujistil, že zvuk začal hned, než krátkou pauzu na začátku většiny z nich, když se nahrávaly.

Chcete -li je oříznout pomocí drzosti, jednoduše jsem je přetáhl do aplikace a poté vybral část zvuku, kterou chci (celou vlnitou část a žádnou z plochých úseků, které nemají zvuk). Poté přejdu na kartu Upravit> Odebrat speciální> Oříznout zvuk. Pak jsem se dostal na kartu Stopy> Zarovnat stopy> Začít na nulu. Pak jdu do souboru, pak Export> Exportovat jako WAV.

Exportuji jako WAV, protože se mi snáze pracuje s audio projekty Javascript.

Poté jsem použil glitch.com k hostování těchto souborů, protože mají úžasnou síť pro doručování obsahu, kterou lze použít pro různé projekty, které máte. Další možností by mohlo být použití firebase, což je moje volba pro různé projekty, které by mohly mít více informací k uložení, jako je aplikace inventáře makerspace pro makerspace mé vysoké školy.

Jednoduše musíte přetáhnout aktiva do adresáře projektu a poté můžete najít odkaz, když kliknete na složku aktiv a kliknete na aktivum, které chcete získat. Glitch pak vytvoří jedinečnou adresu URL CDN pro vaše aktivum. Zde je například odkaz na zvuk akordu A dur.

Poté mohu propojit všechny tyto akordy dohromady ve funkci getChord, která vyhledá, kdy byla stisknuta konkrétní kombinace pozic pražců, a poté přiřadí aplikaci vhodný akord, který bude hrát, když dojde k události přejetí rukou.

Krok 5: Dokončení a hostování celé aplikace

Existuje mnoho způsobů, jak jít o hostování.

Upřímně, nejlepší, co jsem našel, je jednoduše použít github. Důvodem je, že pokud jste aplikaci dobře naprogramovali, můžete zajistit, aby celý váš back -end sloužil databázi nebo firestore z firebase nebo dokonce použít CDN z glitch.com a dalších míst k ukládání aktiv.

Chcete -li hostovat projekt na githubu, stačí otevřít účet github a vytvořit nové úložiště. Poté, co usnadníte nastavení, poté, co zadáte název projektu, vždy přidejte licenci (nejsem odborník, ale zjistil jsem, že mi to usnadňuje život). Vždy používám veřejnou licenci jako GNU.

Jakmile je úložiště nastaveno, můžeme jednoduše přetáhnout soubory do úložiště a kliknout na zelené tlačítko potvrzení ve spodní části.

Poté přejdeme na kartu Nastavení s ikonou ozubeného kola zcela vpravo na stránce úložiště pod tlačítky hvězdičky a sledování. Jakmile jste v nastavení, přejděte dolů, dokud se nezobrazí pole Github Pages. Změňte zdroj na hlavní větev a vyberte téma, pokud chcete. Naučit se používat témata můžete tak, že si je vygooglíte (nikdy je nepoužívám, protože často přináším vlastní CSS a nápady na témata).

Když je stránka připravena, dostanete zelené zvýraznění a zaškrtnutí vám sdělí, že váš web je publikován a je k němu přístup.

Krok 6: Hotovo

Nyní si můžete užít úžasnou jam session v pohodlí vlastních sluchátek, ložnice nebo ve vlaku. Pokud chcete, přidejte další akordy a dokonce si zahrajte s pozicemi kytarového pražce.

Rychlá poznámka k detekci pohybu

1. Práh pro brnkání na kytaru lze upravit v souboru script.js, ale ujistěte se, že když používáte aplikaci, pozadí, které váš telefon vidí, je relativně klidné.

2. Například ve vlaku je lepší si sednout, nasadit si sluchátka a otočit telefon dovnitř, takže pokud se kolem vás pohybují cestující, kamera telefonu vidí většinu času pouze pohyb vaší ruky.

3. Ruka držící telefon musí být relativně klidná v závislosti na vašem prahu. Myslím, že spustím několik testů s vysokým prahem a aktualizuji limity, aby byly konkrétnější.

Hrát:

Stáhněte si aplikaci do webového prohlížeče a poté ji nakloňte do režimu na šířku.

Když pak švihnete rukou, bude hrát akord, ale bude hrát, dokud se nedotknete klávesy F v pravém dolním rohu.

Alternativně můžete zvuk zastavit vytvořením kombinace akordů.

Když vytvoříte kombinaci akordů, aktuální zvuk se zastaví a poté bude vybrán nový zvuk akordu.

Krok 7: Naučené věci a závěrečná slova

Opravdu jsem rád pracoval na tomto projektu, i když prototypování a výroba aplikace při práci na jiných projektech a domácí práci trvalo dlouho. Cestou jsem se také naučil pár úžasných věcí;

1. Při navrhování digitálních produktů vždy zajistěte, aby byly vaše prototypy co nejrychlejší, protože vaše první předpoklady budou chybné a musíte je rychle přejet, abyste se dostali na konec.

2. Vyhněte se utrácení peněz za projekt co nejvíce. Vždy znovu použijte, co můžete, a vždy začněte jednoduchými věcmi, které máte po ruce.

3. Nebojte se učit nové jazyky, rámce a systémy. Často jsou jednodušší, než si na první pohled myslíte.

A velké díky patří lonekoreanovi za splnění mých snů

Pokud vás zajímá, jak se aplikace vyvíjí, můžete se připojit k našemu seznamu adresátů. Malý tým a já budeme pracovat na vytvoření plné verze, která pomůže lidem, kteří jsou na mizině, cestují nebo mají malé děti, přístup k úžasné přenosné kytaře, ať jsou kdekoli.

Opravdu bychom rádi nějakou pomoc, zejména od grafických designérů, kytaristů a kodérů, aby vše otestovali a upřesnili.

Užijte si (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)