Air - True Mobile Air Guitar (prototip): 7 pași (cu imagini)

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

Bine, Acesta va fi un scurt instructiv despre prima parte a apropierii în cele din urmă de un vis al meu din copilărie.

Când eram tânăr, mă uitam mereu la artiștii și trupele mele preferate cântând la chitară imaculat.

Pe măsură ce am crescut, am fost suficient de recunoscător pentru a învăța cum să cânt la chitară și chiar să cânt unele deținute de alții, dar încă nu am al meu:(Așa că am decis să mă așez în cele din urmă și să fac una care rulează complet pe telefon, utilizează viziunea computerizată și permite oamenilor ca mine care doresc o chitară, dar care ar putea călători, au rupt sau sunt prea tineri pentru a obține încă una!

Puteți găsi aplicația prototip pe acest site web

Pentru a vedea cum să jucați, accesați pasul „Ești gata”.

* Asigurați-vă că îl utilizați pe telefon și că rotiți ecranul lateral în modul peisaj *

Bucurați-vă!

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

Provizii:

1. Telefon inteligent

2. Computer desktop sau laptop (pentru programare)

Pasul 1: fundal și notă privind codul

Acest proiect este în mare parte un proiect codificat care vizează să ruleze în întregime pe telefon.

Când am venit cu acest proiect, am încercat diverse alte aplicații și am căutat alte dispozitive aflate în prezent pe piață, cum ar fi chitara AirJamz sau Kurv, chitare portabile sau chiar aplicația Real Guitar din magazinul de jocuri.

Problemele pe care le-am găsit lipsite de multe dintre ele au fost:

1. Unele au nevoie de dispozitive externe

2. Aproape toate aplicațiile nu v-au permis să cântați cu adevărat acorduri sau muzică și au fost doar simulatoare de bord

3. Dispozitivele externe erau destul de ieftine și mulți chitariști au recomandat doar să cumpere o chitară reală

Acestea sunt prezentate în imaginile însoțitoare.

Astfel, aplicația Air trebuie să rezolve aceste probleme, putând rula în totalitate pe telefon. Cred că acest lucru este posibil, deoarece în 2020 avem o tehnologie de browser mobilă mult mai bună și o mulțime de îmbunătățiri în viziunea computerizată, care ne pot permite să facem minuni cu o singură cameră RGB.

Așa că am continuat să fac câteva schițe despre cum ar arăta și cum ar funcționa înainte de a începe pe deplin.

De asemenea, mi-am extras etapele de codare, așa că, în acest instructiv, în loc să vă plictisesc cu codul, vă voi trece prin procesul meu de proiectare și voi atașa codul adnotat la sfârșit pentru a putea citi și analiza dacă aveți nevoie.

Întregul cod poate fi găsit la https://github.com/msimbao/air și vă recomand să vă structurați fișierele de cod similar cu acesta.

De asemenea, rețineți că pentru ca aplicația să ruleze, trebuie găzduită. Până acum am găsit-o să ruleze doar când era găzduit pe github.:)

Pasul 2: Acționare strânsă

Prima etapă majoră de codificare a fost aceea de a găsi o modalitate de a reproduce digital un strum fără nicio periferie externă. Gândul meu imediat a fost să folosesc camera frontală RGB a telefonului meu.

Gândul meu a fost că, dacă o persoană are o coardă pe care vrea să o cânte, atunci când își glisează mâna în fața camerei, va fi redat un sunet.

După ce am aflat asta, am avut nevoie apoi de un limbaj de programare bun, care să poată fi folosit pentru a interacționa bine cu camera RGB.

M-am stabilit pentru Javascript pentru că aș putea crea o aplicație multiplataforma cu React Native sau altceva sau aș putea găzdui chitara pe un site web și ar putea fi disponibilă pentru toată lumea.

Apoi am găsit diferite modalități de a afla cum să obțin mâna pentru a declanșa o acțiune care ar putea fi un sunet de acord, dar au existat multe modalități de a face acest lucru.

Învățarea automată a funcționat foarte bine când am încercat serviciile IBM și am instruit aproximativ 3000 de imagini într-o săptămână pentru recunoașterea glisării, precum și recunoașterea acordurilor. Am încercat și handtrack.js de victordibia. Din păcate, amândoi au fost incredibil de încet pe telefoanele mobile.

Apoi am dat peste detectarea mișcării și o implementare de lonekorean la diffcam.com. Am aflat că este posibil să folosesc camera web pentru a înregistra două cadre separate și apoi să calculăm diferența dintre cadre și să acordăm diferenței un scor. Dacă acel scor depășește un anumit prag, atunci execut o acțiune.

Lonekoreanul a făcut, de asemenea, un motor pentru camera lui dif pe care am decis să îl folosesc pentru chitara Air și a funcționat perfect pentru a-mi obține scorul de mișcare!

Sunt atașate imagini cu încercări de formare a modelelor de învățare automată, precum și exemplul diffcam.com din care am învățat.

Notă: În acest prototip actual, bâzâitul se repetă cam și iar, pentru a-l opri, țineți pur și simplu acordul pe care doriți să-l redați. Aceasta este o eroare pe care sperăm să o remediem.

Codul pentru strum complet este găsit în fișierul script.js atașat aici și motorul diffcam de lonekorean este aici.

Pasul 3: Recunoașterea acordurilor

Următoarea etapă de codificare a fost atunci să găsim o modalitate de a gestiona recunoașterea acordurilor live.

Am vrut ca un utilizator să poată reproduce formele actuale ale coardelor și astfel să practice o plasare bună a mâinilor și, de asemenea, să-i ajute să practice diferite coarde.

Ca și în ultimul pas, am încercat Machine learning pentru recunoașterea acordurilor, dar a fost foarte lent pe telefoanele mobile.

Apoi am învățat ceva din aplicația Real Guitar că ar putea fi posibil să așezi o tastatură pe ecranul telefonului și să folosești ecranul pentru a genera forme de acord.

Apoi a trebuit să învăț cum să permit interacțiunea multi-touch în javascript și am găsit un tutorial minunat și un exemplu din documentele Mozilla

Interacțiunile tactile pot fi dificile în special în Javascript, dar ideea este că putem crea anumite divs și apoi putem defini funcții pentru a gestiona diferite evenimente tactile:

1. atingeți Start: Când un deget atinge ecranul

2. atingeți Sfârșit: Când degetul pleacă

3. atingeți Mutare: când degetul este încă pe ecran, dar schimbă poziția

Apoi lucrăm în jurul acelor funcții pentru a ne defini propriile elemente care răspund la diferite evenimente tactice și combinații.

În cazul nostru, proiectăm o placă fret folosind CSS și apoi folosind Javascript, spunem aplicației că atunci când anumite div-uri sunt apăsate împreună, ar trebui recunoscută o coardă.

Putem apoi să definim un obiect audio căruia îi vom transmite coarda și apoi să redăm acel audio atunci când are loc un eveniment de glisare.

Pentru a defini diferite combinații de acorduri, am realizat fret board folosind această imagine și apoi am stabilit doar fiecare poziție specială pentru a fi un div pe care să-l pot atinge și combina cu alții.

Codul pentru a defini progresia acordului se găsește aici, iar controlerul tastaturii se găsește în codul atașat.

Pasul 4: Găsirea sunetelor acordurilor

Acum că sistemul nostru este setat să recunoască, avem nevoie de niște sunete de coardă reale.

Din fericire, freesound.com vine întotdeauna în ajutorul meu când am nevoie de mostre audio. Pur și simplu am căutat acorduri și am găsit un pachet uimitor de acorduri majore de către danglada.

Apoi le-am descărcat și le-am editat folosind îndrăzneala pentru a mă asigura că sunetul a început imediat, mai degrabă decât scurta pauză la începutul majorității dintre ele atunci când au fost înregistrate.

Pentru a le clipa folosind îndrăzneala, le-am târât pur și simplu în aplicație, apoi am selectat porțiunea de sunet pe care o doresc (întreaga parte ondulată și niciuna dintre secțiunile de linie plană care nu au sunet). Apoi merg la fila Editare> Eliminare specială> Decupare audio. Apoi am ajuns la fila Piste> Aliniați piste> Start la zero. Mă duc apoi la fișier, apoi Export> Export ca WAV.

Export ca WAV, deoarece am găsit mai ușor să mă ocup de proiectele audio Javascript.

Am folosit apoi glitch.com pentru a găzdui aceste fișiere, deoarece au o rețea uimitoare de livrare a conținutului care poate fi utilizată pentru diferite proiecte pe care le aveți. O altă opțiune ar putea fi utilizarea firebase, care este ideea mea pentru diferite proiecte care ar putea avea mai multe informații de stocat, cum ar fi aplicația de inventar makerspace pentru makerspace-ul colegiului meu.

Trebuie pur și simplu să glisați și să fixați activele în directorul proiectului și apoi puteți găsi un link când faceți clic pe folderul activului și faceți clic pe activul pe care doriți să îl obțineți. Glitch va produce apoi o adresă URL CDN unică pentru activul dvs. De exemplu, iată link-ul către sunetul acordului A major.

Pot apoi lega toate aceste acorduri împreună într-o funcție getChord care va căuta atunci când a fost apăsată o combinație specifică de poziții de fret și apoi pot atribui un acord adecvat pentru ca aplicația să fie redată atunci când are loc un eveniment de glisare manuală.

Pasul 5: Finalizarea și găzduirea întregii aplicații

Există multe modalități de a găzdui.

Sincer, cel mai bun lucru pe care l-am găsit este pur și simplu să folosesc github. Acest lucru se datorează faptului că, dacă ați programat bine o aplicație, puteți face ca întregul dvs. backend să fie deservit de o bază de date sau un magazin de focuri de pe firebase sau chiar să utilizați un CDN de pe glitch.com și din alte locuri pentru a stoca active.

Pentru a găzdui proiectul pe github, tot ce trebuie să faceți este să deschideți un cont github, să creați un nou depozit. Apoi, pentru a ușura configurarea, după ce ați pus numele proiectului, asigurați-vă întotdeauna că adăugați o licență (nu sunt expert, dar am constatat că îmi ușurează viața). Întotdeauna folosesc doar o licență publică precum GNU.

Odată ce depozitul este configurat, putem trage și plasa fișierele în depozit și faceți clic pe butonul verde de confirmare din partea de jos.

Apoi mergem la fila Setări cu pictograma roată din extrema dreaptă a paginii depozitului sub butoanele stea și ceas. Odată ajuns în setări, derulați în jos până când vedeți caseta Github Pages. Schimbați Sursa în ramură principală și alegeți o temă dacă doriți. Puteți învăța cum să utilizați temele googlându-le (nu le folosesc niciodată pentru că îmi aduc adesea propriile idei CSS și teme).

Când pagina este gata, veți obține o evidențiere verde și o bifă care vă spune că site-ul dvs. este publicat și poate fi accesat.

Pasul 6: Terminat

Vă puteți bucura acum de o jam session minunată în confortul propriilor căști, dormitor sau în tren. Adăugați câteva acorduri dacă doriți și chiar jucați cu pozițiile fretului de chitară.

O notă rapidă privind detectarea mișcării

1. Pragul unei glisări de chitară poate fi ajustat în fișierul script.js, dar asigurați-vă că, atunci când utilizați aplicația, fundalul pe care îl vede telefonul dvs. este relativ nemișcat.

2. De exemplu, în tren, este mai bine să vă așezați și să vă puneți căștile și să vă întoarceți telefonul spre interior, astfel încât, dacă pasagerii se mișcă în jurul vostru, camera telefonului vă poate vedea mâna mișcându-se de cele mai multe ori.

3. Mâna care strânge telefonul trebuie să fie relativ nemișcată, în funcție de pragul dvs. Cred că voi rula câteva teste cu un prag ridicat și voi actualiza limitele pentru a fi mai specifice.

Pentru a juca:

Încărcați aplicația pe browserul dvs. web, apoi înclinați-o în modul peisaj.

Apoi, atunci când vă mișcați mâna, o coardă va juca, cu toate acestea, aceasta va continua să redea până când atingeți tasta F din colțul din dreapta jos.

Alternativ, puteți opri sunetul realizând o combinație de acorduri.

Când faceți o combinație de acorduri, sunetul curent se oprește, apoi este selectat un nou sunet de acord.

Pasul 7: Lucruri învățate și cuvinte finale

Mi-a plăcut foarte mult să lucrez la acest proiect, chiar dacă a durat mult timp să fac prototip și să produc aplicația în timp ce lucram la alte proiecte și la acasă. Am învățat și câteva lucruri minunate pe parcurs;

1. Când proiectați produse digitale, asigurați-vă întotdeauna că vă faceți prototipurile cât mai repede posibil, deoarece primele dvs. presupuneri vor fi greșite și trebuie să le treceți rapid peste ele pentru a ajunge la final.

2. Evitați să cheltuiți bani pe un proiect cât mai mult posibil. Reutilizați întotdeauna orice puteți și începeți întotdeauna cu lucruri simple pe care le aveți la îndemână.

3. Nu vă fie frică să învățați noi limbi, cadre și sisteme. Ele sunt adesea mai ușoare decât crezi la început.

Și mulțumiri uriașe solitarului pentru realizarea viselor mele

Dacă vă interesează cum se dezvoltă aplicația, vă puteți alătura listei noastre de e-mail. O echipă mică și voi lucra pentru a crea o versiune completă pentru a ajuta oamenii care sunt în pauză, călători sau copii mici să aibă acces la o chitară portabilă minunată oriunde s-ar afla.

Ne-ar plăcea cu adevărat un ajutor, în special de la graficieni, chitaristi și coderi, pentru a testa și concretiza totul.

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