Zračna - prava mobilna zračna gitara (prototip): 7 koraka (sa slikama)

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:04

Ok tako, Ovo će biti zaista kratka pouka o prvom dijelu konačnog približavanja snu iz djetinjstva.

Kad sam bio mali, uvijek sam gledao svoje omiljene umjetnike i bendove kako besprijekorno sviraju gitaru.

Kako sam odrastao, bio sam dovoljno zahvalan da naučim svirati gitaru, pa čak i svirati neke u vlasništvu drugih, ali još uvijek nemam svoju:(Odlučio sam napokon sjesti i napraviti onu koja radi potpuno na telefonu, koristi računalni vid i dopušta ljudima poput mene koji žele gitaru, ali možda putuju, švorc ili su premladi da bi je dobili!

Prototip aplikacije možete pronaći na ovoj web stranici

Da vidite kako igrati, idite na korak "Gotovi ste".

* Obavezno ga koristite na telefonu i okrenite ekran bočno u pejzažni način *

Uživajte!

(Završni priručnik) (*

Potrošni materijal:

1. Pametni telefon

2. Stoni računar ili laptop (za programiranje)

Korak 1: Pozadina i napomene o kodu

Ovaj projekat je u velikoj mjeri kodiran projekt čiji je cilj da se u potpunosti izvodi na telefonu.

Smišljajući ovaj projekt, isprobao sam razne druge aplikacije i potražio druge uređaje koji su trenutno na tržištu, poput gitare AirJamz ili Kurv, prijenosnih gitara ili čak aplikacije Real Guitar u trgovini za reprodukciju.

Problemi za koje sam smatrao da nedostaju mnogima od njih su:

1. Neki su trebali vanjske uređaje

2. Gotovo sve aplikacije nisu vam dopuštale da svirate stvarne akorde ili muziku i bile su samo simulatori fret board -a

3. Vanjski uređaji bili su prilično skupi i mnogi gitaristi su preporučili samo kupovinu prave gitare

Oni su prikazani na priloženim slikama.

I tako aplikacija Air mora riješiti ove probleme dok je u potpunosti sposobna raditi na telefonu. Vjerujem da je to moguće jer 2020. imamo daleko bolju tehnologiju mobilnog preglednika i mnogo poboljšanja u računarskom vidu koji nam mogu omogućiti čuda s jednom RGB kamerom.

Stoga sam prije nego što sam započeo s radom napravio neke skice kako bi to izgledalo i kako bi funkcioniralo.

Također sam izvukao svoje prekretnice u kodiranju pa ću vas u ovom uputstvu, umjesto da vam dosadim sa kodom, provesti kroz proces dizajna i na kraju priložiti označeni kod da biste ga mogli pročitati i pogledati ako vam zatreba.

Cijeli kod možete pronaći na https://github.com/msimbao/air i preporučujem strukturiranje datoteka koda na sličan način.

Također imajte na umu da je za pokretanje aplikacije potrebno njeno hostiranje. Do sada sam otkrio da se pokreće samo kada je hostiran na githubu.:)

Korak 2: Snažna akcija

Prva velika prekretnica u kodiranju bila je pronaći način za digitalnu replikaciju struma bez ikakve vanjske periferije. Odmah mi je pala na pamet prednja RGB kamera telefona.

Mislio sam da ako osoba ima akord koji želi svirati, tada će se prevući rukom ispred kamere, čuti zvuk.

Nakon što sam to shvatio, trebao mi je dobar programski jezik koji bi se mogao koristiti za dobro sučelje s RGB kamerom.

Zadovoljio sam se Javascriptom jer sam mogao napraviti aplikaciju za više platformi s React Native-om ili nečim drugim ili sam jednostavno mogao smjestiti gitaru na web stranici i mogla je biti dostupna svima.

Zatim sam pronašao različite načine da shvatim kako prelaskom ruke pokrenuti akciju koja bi mogla biti sviranje akorda, ali bilo je mnogo načina za to.

Mašinsko učenje je super funkcioniralo kada sam isprobao IBM -ove usluge i obučio oko 3000 slika tokom jedne sedmice za prepoznavanje prevlačenja, kao i prepoznavanje akorda. Probao sam i handtrack.js by victordibia. Nažalost, oboje su bili nevjerojatno spori na mobilnim telefonima.

Zatim sam naišao na detekciju pokreta i implementaciju od strane lonekorean na diffcam.com. Naučio sam da je moguće koristiti web kameru za snimanje dva odvojena kadra, a zatim izračunati razliku između kadrova i dati ocjenu razlici. Ako taj rezultat prelazi određeni prag, tada izvršavam radnju.

Lonekorean je također napravio motor za svoju diferencijalnu kameru koji sam odlučio koristiti za Air gitaru i savršeno mi je uspio da dobijem rezultat pokreta!

U prilogu su slike pokušaja obuke modela strojnog učenja, kao i primjer diffcam.com iz kojeg sam naučio.

Napomena: U ovom trenutnom prototipu, sviranje se stalno ponavlja, da biste ga zaustavili, jednostavno držite akord koji želite odsvirati sljedeći. Ovo je greška koju se nadamo popraviti.

Kôd za cijeli strum se nalazi u datoteci script.js koja je ovdje priložena, a diffcam engine kompanije lonekorean je ovdje.

Korak 3: Prepoznavanje akorda

Sljedeća prekretnica u kodiranju bila je pronalaženje načina za upravljanje prepoznavanjem akorda uživo.

Htio sam da korisnik može replicirati stvarne oblike akorda i tako uvježbati dobro postavljanje ruku, a također im pomoći i u vježbanju različitih akorda.

Kao i u posljednjem koraku, isprobao sam Strojno učenje za prepoznavanje akorda, ali na mobilnim telefonima bilo je vrlo sporo.

Zatim sam iz aplikacije Real Guitar naučio nešto da je moguće postaviti gredicu na ekran telefona pomoću ekrana za generiranje oblika akorda.

Zatim sam morao naučiti kako dopustiti interakciju s više dodira u javascriptu i pronašao sjajan vodič i primjer iz Mozillinih dokumenata

Interakcije dodirom mogu biti škakljive, posebno u Javascriptu, ali ideja je da možemo stvoriti određene divove, a zatim definirati funkcije za rukovanje različitim događajima dodira:

1. touchStart: Kada prst dodirne ekran

2. dodirnite Kraj: Kada prst ode

3. touchMove: Kada je prst još uvijek na ekranu, ali mijenja položaj

Zatim zaobilazimo te funkcije kako bismo definirali vlastite elemente koji reagiraju na različite događaje i kombinacije dodira.

U našem slučaju, dizajniramo fret ploču koristeći CSS, a zatim koristeći Javascript, kažemo aplikaciji da kada se određeni div -i pritisnu zajedno, akord treba prepoznati.

Zatim možemo definirati audio objekt kojem ćemo prenijeti akord, a zatim reproducirati taj zvuk kada dođe do događaja prevlačenja.

Da bih definirao različite kombinacije akorda, napravio sam ploču za fret koristeći ovu sliku, a zatim samo postavio svaku posebnu poziciju kao div koji mogu dodirnuti i kombinirati s drugima.

Kôd za definiranje progresije akorda nalazi se ovdje, a kontroler fretboarda nalazi se u priloženom kodu.

Korak 4: Pronalaženje akorda

Sada kada je naš sistem postavljen za prepoznavanje, potrebni su nam neki stvarni zvukovi akorda.

Srećom, freesound.com mi uvijek dolazi u pomoć kad mi zatrebaju audio uzorci. Jednostavno sam tražio akorde i našao nevjerojatan paket glavnih akorda Danglade.

Zatim sam ih preuzeo i uredio koristeći drskost kako bih bio siguran da je zvuk počeo odmah, a ne kratka pauza na početku većine njih dok su se snimali.

Da bih ih izrezao koristeći drskost, jednostavno sam ih odvukao u aplikaciju, a zatim odabrao dio zvuka koji želim (cijeli valoviti dio i nijedan dio ravne linije koji nema zvuk). Zatim odlazim na karticu Uređivanje> Ukloni specijalno> Trim audio. Zatim sam prešao na karticu Tragovi> Poravnaj staze> Počni na nulu. Zatim idem u datoteku, zatim Izvezi> Izvezi kao WAV.

Izvozim kao WAV jer sam se lakše snalazio u Javascript audio projektima.

Zatim sam koristio glitch.com za hostovanje ovih datoteka jer imaju nevjerojatnu mrežu za isporuku sadržaja koja se može koristiti za različite projekte koje imate. Druga mogućnost bi mogla biti upotreba firebasea koji je moj izbor za različite projekte koji bi mogli imati više podataka za pohranu, poput aplikacije inventara makerspace za makerspace mog fakulteta.

Jednostavno morate povući i ispustiti materijal u direktorij projekta, a zatim ćete pronaći vezu kada kliknete na mapu imovine i kliknete na materijal koji želite dobiti. Glitch će tada proizvesti jedinstveni CDN url za vaše sredstvo. Na primjer, evo veze do zvuka A -dur akorda.

Zatim mogu povezati sve te akorde zajedno u funkciju getChord koja će tražiti kada se pritisne određena kombinacija položaja freta, a zatim dodijeliti odgovarajući akord za aplikaciju da se reproducira kada dođe do događaja prevlačenja ruke.

Korak 5: Dovršavanje i hostiranje cijele aplikacije

Postoji mnogo načina za hosting.

Iskreno, najbolje što sam otkrio je jednostavno koristiti github. To je zato što ako ste dobro programirali aplikaciju, možete učiniti da cijeli vaš back -end bude opsluživan bazom podataka ili firestore -om iz firebase -a, ili čak koristiti CDN sa glitch.com i drugih mjesta za skladištenje imovine.

Da biste ugostili projekt na githubu, sve što trebate učiniti je otvoriti github račun, napraviti novo spremište. Zatim, radi lakšeg postavljanja, nakon što unesete naziv projekta, uvijek dodajte licencu (nisam stručnjak, ali sam otkrio da mi to olakšava život). Uvijek koristim samo javnu licencu poput GNU -a.

Kada se spremište postavi, možemo samo povući i ispustiti naše datoteke u spremište i kliknuti zeleno dugme za urezivanje pri dnu.

Zatim idemo na karticu Postavke s ikonom zupčanika krajnje desno na stranici spremišta ispod zvjezdice i gumba za gledanje. Kad uđete u postavke, pomaknite se prema dolje dok ne vidite okvir Github stranice. Promijenite Izvor u glavnu granu i odaberite temu ako želite. Možete naučiti kako koristiti teme tako što ćete ih proguglati (nikad ih ne koristim jer često donosim vlastiti CSS i ideje za teme).

Kad stranica bude spremna, dobit ćete zeleni označivač i kvačicu koji će vas obavijestiti da je vaša web stranica objavljena i da joj se može pristupiti.

Korak 6: Gotovo

Sada možete uživati u sjajnom jam sessionu u udobnosti vlastitih slušalica, spavaće sobe ili u vlaku. Dodajte još akorda ako želite, pa se čak i igrajte s pozicijama gitarskih fretova.

Kratka napomena o otkrivanju pokreta

1. Prag za prevlačenje gitare može se prilagoditi u datoteci script.js, ali pazite da dok koristite aplikaciju pozadina koju vaš telefon vidi bude relativno mirna.

2. Na primjer, u vozu je bolje sjesti i staviti slušalice i okrenuti telefon prema unutra, tako da ako se putnici kreću oko vas kamera telefona može vidjeti samo vašu ruku koja se kreće većinu vremena.

3. Ruka koja drži telefon mora biti relativno mirna, ovisno o vašem pragu. Mislim da ću pokrenuti neke testove s visokim pragom i ažurirati ograničenja kako bi bili precizniji.

Igrati se:

Učitajte aplikaciju u svoj web preglednik, a zatim je nagnite u vodoravni način.

Kada zamahnete rukom, svirat će akord, ali će nastaviti svirati sve dok ne dodirnete tipku F u donjem desnom kutu.

Alternativno, možete zaustaviti zvuk kombinacijom akorda.

Kad napravite kombinaciju akorda, trenutni zvuk prestaje, a zatim se odabire novi zvuk akorda.

Korak 7: Naučene stvari i završne riječi

Zaista sam volio raditi na ovom projektu, čak i ako mi je trebalo puno vremena za izradu prototipa i izradu aplikacije dok sam radio na drugim projektima i domaćim poslovima. Usput sam naučio i nekoliko sjajnih stvari;

1. Prilikom dizajniranja digitalnih proizvoda uvijek vodite računa da prototipi budu što je moguće brži jer će vaše prve pretpostavke biti pogrešne i morate ih brzo pregaziti da biste došli do kraja.

2. Izbjegavajte trošenje novca na projekt što je više moguće. Uvijek ponovo upotrijebite sve što možete i uvijek započnite s jednostavnim stvarima koje imate pri ruci.

3. Ne bojte se naučiti nove jezike, okvire i sisteme. Često su lakše nego što mislite na prvu.

I veliko hvala lonekoreancu što mi je ostvario snove

Ako vas zanima kako se aplikacija razvija, pridružite se našoj mailing listi. Mali tim i ja radit ćemo na stvaranju pune verzije kako bismo pomogli ljudima koji su švorc, putuju ili imaju malu djecu da imaju pristup izvrsnoj prijenosnoj gitari gdje god se nalazili.

Zaista bismo voljeli pomoć, posebno grafičkih dizajnera, gitarista i kodera kako bismo sve isprobali i isprobali.

Uživajte (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ * * *: *ヽ (◕ ヮ ヽ ヽ)