Air - True Mobile Air Guitar (prototype): 7 trin (med billeder)

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:25

Okay så, Dette vil være en virkelig kort instruktion om den første del af endelig at komme tættere på min barndomsdrøm.

Da jeg var en ung dreng, så jeg altid mine yndlingsartister og bands spille guitar perfekt.

Da jeg voksede op, var jeg taknemmelig nok til at lære at spille guitar og endda spille nogle ejet af andre, men har stadig ikke min egen:(Så jeg besluttede mig for endelig at sætte mig ned og lave en, der kører helt på telefonen, bruger computersyn og lader folk som mig, der gerne vil have en guitar, men måske rejser, er i stykker eller for unge til at få en endnu!

Du kan finde prototype -appen på dette websted

For at se, hvordan man spiller, skal du gå til trinet "Du er færdig".

* Sørg for at bruge den på din telefon og drej skærmen sidelæns til liggende tilstand *

God fornøjelse!

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

Tilbehør:

1. Smart telefon

2. Stationær computer eller bærbar computer (til programmering)

Trin 1: Baggrund og note om kode

Dette projekt er stort set et kodet projekt, der sigter mod at køre helt på telefonen.

Da jeg kom med dette projekt, prøvede jeg forskellige andre apps og kiggede på andre enheder, der i øjeblikket er på markedet, f.eks. AirJamz- eller Kurv -guitaren, bærbare guitarer eller endda Real Guitar -appen i playbutikken.

De problemer, jeg fandt manglende i mange af dem, var:

1. Nogle nødvendige eksterne enheder

2. Næsten alle apps lod dig ikke rigtig spille egentlige akkorder eller musik og var bare båndbrætssimulatorer

3. Eksterne enheder var smukke, og mange guitarister anbefalede bare at købe en egentlig guitar

Disse er afbilledet i de medfølgende billeder.

Og så er Air -appen nødt til at løse disse problemer, mens den helt kan køre på telefonen. Jeg tror, at dette er muligt, fordi vi i 2020 har langt bedre mobilbrowser -teknologi og mange forbedringer i computersyn, der kan give os mulighed for at gøre underværker med et enkelt RGB -kamera.

Så jeg fortsatte med at lave nogle skitser af, hvordan det ville se ud, og hvordan det ville fungere, før jeg kom i gang.

Jeg tegnede også mine kodende milepæle, så i denne instruktive, i stedet for at kede dig med kode, tager jeg dig igennem min designproces og vedhæfter den kommenterede kode i slutningen, så du kan læse og se på, hvis du har brug for det.

Hele koden kan findes på https://github.com/msimbao/air, og jeg anbefaler at strukturere dine kodefiler, der ligner denne.

Bemærk også, at for at appen skal køre, skal den hostes. Jeg har indtil nu kun fundet det til at køre, når det blev hostet på github.:)

Trin 2: Strumming Action

Den første store kodende milepæl var at finde en måde at replikere et strum digitalt uden nogen ekstern periferi. Min umiddelbare tanke var at bruge RGB -kameraet på min telefon foran.

Min tanke var, at hvis en person har en akkord, de vil spille, så vil der blive spillet en lyd, når de stryger hånden foran kameraet.

Efter at have fundet ud af det, havde jeg så brug for et godt programmeringssprog, der kunne bruges til at kommunikere godt med RGB -kameraet.

Jeg nøjedes med Javascript, fordi jeg kunne lave en cross-platform app med React Native eller noget andet eller bare kunne være vært for guitaren på et websted, og den kunne være tilgængelig for alle.

Jeg fandt derefter forskellige måder at finde ud af, hvordan jeg får hånden til at udløse en handling, der kan være en akkordlyd, men der var mange måder at gøre dette på.

Maskinindlæring fungerede super godt, da jeg prøvede IBMs tjenester og uddannede omkring 3000 billeder i løbet af en uge til strygegenkendelse samt akkordgenkendelse. Jeg prøvede også handtrack.js af victordibia. Desværre var de begge utroligt langsomme på mobiltelefoner.

Jeg faldt derefter over bevægelsesdetektering og en implementering af lonekorean på diffcam.com. Jeg lærte, at det er muligt at bruge webcam til at optage to separate rammer og derefter beregne forskellen mellem rammerne og give forskellen en score. Hvis denne score overstiger en bestemt tærskel, udfører jeg derefter en handling.

Lonekoreaneren lavede også en motor til sit diffkamera, som jeg besluttede at bruge til Air -guitaren, og det fungerede perfekt for at få mig motion score!

Vedhæftet er billeder af forsøg på træning af maskinlæringsmodeller samt diffcam.com -eksemplet, jeg lærte af.

Bemærk: I denne nuværende prototype gentager slummende lidt igen og igen, for at stoppe det skal du blot holde den akkord, du vil spille, nede. Dette er en fejl, som vi håber at rette op på.

Koden for hele strum findes i script.js -filen vedhæftet her, og diffcam -motoren fra lonekorean er her.

Trin 3: Akkordgenkendelse

Den næste kodende milepæl var derefter at finde en måde at håndtere akkordgenkendelse live på.

Jeg ville have en bruger til at kunne kopiere de faktiske akkordformer og så øve god håndplacering og også hjælpe dem med at øve forskellige akkorder.

Som i det sidste trin prøvede jeg Machine learning til akkordgenkendelse, men det var meget langsomt på mobiltelefoner.

Jeg lærte derefter noget fra Real Guitar -appen, at det måske var muligt at placere et gribebræt på telefonens skærm ved hjælp af skærmen til at generere akkordformer.

Jeg måtte derefter lære at tillade multi-touch-interaktion i javascript og fandt en fantastisk tutorial og et eksempel fra Mozillas dokumenter

Berøringsinteraktioner kan være vanskelige især i Javascript, men tanken er, at vi kan oprette bestemte divs og derefter definere funktioner til at håndtere forskellige berøringshændelser:

1. touchStart: Når en finger rører ved skærmen

2. touchEnd: Når fingeren forlader

3. touchMove: Når fingeren stadig er på skærmen, men ændrer position

Vi arbejder derefter omkring disse funktioner for at definere vores egne elementer, der reagerer på forskellige berøringshændelser og kombinationer.

I vores tilfælde designer vi et gribebræt ved hjælp af CSS og derefter ved hjælp af Javascript, fortæller appen, at når visse div'er presses sammen, skal en akkord genkendes.

Vi kan derefter definere et lydobjekt, som vi vil videregive akkorden til og derefter afspille lyden, når der opstår en strygning.

For at definere forskellige akkordkombinationer lavede jeg gribebrættet ved hjælp af dette billede og derefter satte jeg hver specialposition til at være en div, som jeg kunne røre og kombinere med andre.

Koden til at definere akkordprogression findes her, og gribebrættets controller findes i den vedhæftede kode.

Trin 4: Find akkordlyde

Nu hvor vores system er indstillet til at genkende, har vi brug for nogle egentlige akkordlyde.

Heldigvis kommer freesound.com altid til undsætning, når jeg har brug for lydprøver. Jeg søgte simpelthen efter akkorder og fandt en fantastisk pakke med store akkorder af danglada.

Jeg downloadede dem derefter og redigerede dem ved hjælp af frækhed for at sikre, at lyden startede med det samme frem for den korte pause i starten af de fleste af dem, da de blev optaget.

For at klippe dem ved hjælp af dristighed trak jeg dem simpelthen ind i appen og valgte derefter den del af lyden, jeg vil have (hele den bølgede del og ingen af de flade liniesektioner, der ikke har nogen lyd). Jeg går derefter til fanen Rediger> Fjern speciel> Beskær lyd. Derefter kom jeg til fanen Spor> Juster spor> Start til nul. Jeg går derefter til fil, derefter Eksporter> Eksporter som WAV.

Jeg eksporterer som WAV, fordi jeg har fundet det lettere at håndtere i Javascript -lydprojekter.

Jeg brugte derefter glitch.com til at være vært for disse filer, fordi de har et fantastisk indholdsleveringsnetværk, der kan bruges til forskellige projekter, du har. En anden mulighed kunne være at bruge firebase, som er min vej til forskellige projekter, der måske har flere oplysninger at gemme som makerspace -lagerapp til mit college's makerspace.

Du skal simpelthen trække og slippe aktiverne til projektmappen, og så kan du finde et link, når du klikker på aktivmappen og klikker på det aktiv, du vil have. Glitch producerer derefter en unik CDN -url til dit aktiv. For eksempel er her linket til A -dur akkordlyden.

Jeg kan derefter knytte alle disse akkorder sammen i en getChord -funktion, der vil lede efter, når der er blevet trykket på en bestemt kombination af båndpositioner, og derefter tildele en passende akkord, som appen kan afspille, når der opstår en håndsvep -begivenhed.

Trin 5: Afslutning og vært for hele appen

Der er mange måder at gå til hosting på.

Helt ærligt det bedste, jeg har fundet, er simpelthen at bruge github. Dette skyldes, at hvis du har programmeret en app godt, kan du få hele din back end betjent af en database eller firestore fra firebase eller endda bruge et CDN fra glitch.com og andre steder at gemme aktiver i.

For at være vært for projektet på github er alt du skal gøre at åbne en github -konto, oprette et nyt lager. For derefter at gøre det lettere at konfigurere, efter at du har angivet dit projektnavn, skal du altid sørge for at tilføje en licens (jeg er ikke ekspert, men jeg har fundet ud af, at det gør mit liv lettere). Jeg bruger altid bare en offentlig licens som GNU.

Når depotet er konfigureret, kan vi bare trække og slippe vores filer til depotet og klikke på den grønne commit -knap i bunden.

Vi går derefter til fanen Indstillinger med tandhjulsikonet yderst til højre på opbevaringssiden under stjerne- og urknapperne. Når du er i indstillingerne, skal du rulle ned, indtil du ser boksen Github Pages. Skift kilde til hovedgren og vælg et tema, hvis du vil. Du kan lære at bruge temaer ved at google dem (jeg bruger dem aldrig, fordi jeg ofte medbringer min egen CSS og temaidéer).

Når siden er klar, får du en grøn markering og et flueben, der fortæller dig, at dit websted er offentliggjort og kan tilgås.

Trin 6: Udført

Du kan nu nyde en fantastisk jam -session i komfort med dine egne hovedtelefoner, soveværelse eller i toget. Tilføj nogle flere akkorder, hvis du vil, og endda lege med guitarfret -positionerne.

En hurtig bemærkning om bevægelsesdetektering

1. Tærsklen for et guitarstrumming swipe kan justeres i script.js -filen, men sørg for, at når du bruger appen, er baggrunden, som din telefon ser, relativt stille.

2. For eksempel i toget er det bedre at sætte sig ned og sætte dine hovedtelefoner på og dreje din telefon indad, så hvis passagerer bevæger sig omkring dig, kan telefonens kamera kun se din hånd bevæge sig det meste af tiden.

3. Hånden, der holder i telefonen, skal være relativt stille afhængig af din tærskel. Jeg tror, jeg vil køre nogle tests med en høj tærskel og opdatere grænserne fremover for at være mere specifikke.

At lege:

Indlæs appen i din webbrowser, og vipp den derefter til liggende tilstand.

Når du derefter svinger din hånd, spiller en akkord, men den fortsætter med at spille, indtil du trykker på F -tasten i nederste højre hjørne.

Alternativt kan du stoppe lyden ved at lave en akkordkombination.

Når du laver en akkordkombination, stopper den aktuelle lyd, derefter vælges en ny akkordlyd.

Trin 7: Lærte ting og sidste ord

Jeg elskede virkelig at arbejde på dette projekt, selvom det tog lang tid at prototype og få appen produceret, mens jeg arbejdede på andre projekter og hjemmearbejde. Jeg lærte også et par fantastiske ting undervejs;

1. Når du designer digitale produkter, skal du altid sørge for at lave dine prototyper så hurtigt som muligt, fordi dine første antagelser vil være forkerte, og du skal løbe over dem hurtigt for at komme til enden.

2. Undgå så meget som muligt at bruge penge på et projekt. Brug altid alt, hvad du kan, og start altid med simple ting, du har ved hånden.

3. Vær ikke bange for at lære nye sprog, rammer og systemer. De er ofte lettere, end du først tror.

Og kæmpe tak til lonekoreanen for at få mine drømme til at gå i opfyldelse

Hvis du er interesseret i, hvordan appen udvikler sig, kan du tilmelde dig vores mailingliste. Et lille team og jeg vil arbejde på at lave en fuld version til at hjælpe mennesker, der er ødelagte, på rejse eller små børn, har adgang til en fantastisk bærbar guitar, uanset hvor de er.

Vi ville virkelig elske lidt hjælp, især fra grafiske designere, guitarister og kodere til at teste og uddybe alt.

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