Air - Echte mobiele luchtgitaar (prototype) - Ajarnpa

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:14

Oke dus, Dit zal een heel korte instructie zijn over het eerste deel van eindelijk dichter bij een kinderdroom van mij komen.

Toen ik een kleine jongen was, keek ik altijd naar mijn favoriete artiesten en bands die onberispelijk gitaar speelden.

Toen ik opgroeide, was ik dankbaar genoeg om gitaar te leren spelen en zelfs sommige van anderen te spelen, maar ik heb nog steeds geen eigen gitaar:(Dus besloot ik er eindelijk eens voor te gaan zitten en er een te maken die volledig op de telefoon draait, computervisie gebruikt en mensen zoals ik die een gitaar willen, maar misschien op reis, kapot of te jong om er een te kopen, laat!

U vindt de prototype-app op deze website

Ga naar de stap "Je bent klaar" om te zien hoe je moet spelen.

* Zorg ervoor dat je het op je telefoon gebruikt en draai het scherm zijwaarts naar de liggende modus *

Genieten van!

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

Benodigdheden:

1. Slimme telefoon

2. Desktopcomputer of laptop (voor programmering)

Stap 1: Achtergrond en opmerking over code

Dit project is grotendeels een gecodeerd project dat volledig op de telefoon moet worden uitgevoerd.

Bij het bedenken van dit project heb ik verschillende andere apps geprobeerd en andere apparaten opgezocht die momenteel op de markt zijn, zoals de AirJamz- of Kurv-gitaar, draagbare gitaren of zelfs de Real Guitar-app in de Play Store.

De problemen die ik bij veel van hen miste, waren:

1. Sommige externe apparaten nodig

2. Bijna alle apps lieten je niet echt akkoorden of muziek spelen en waren gewoon fretboard-simulators

3. Externe apparaten waren behoorlijk prijzig en veel gitaristen raadden aan om gewoon een echte gitaar te kopen

Deze zijn afgebeeld in de bijgevoegde afbeeldingen.

En dus moet de Air-app deze problemen oplossen terwijl hij volledig op de telefoon kan worden uitgevoerd. Ik geloof dat dit mogelijk is omdat we in 2020 veel betere mobiele browsertechnologie hebben en veel verbeteringen in computervisie waardoor we wonderen kunnen doen met een enkele RGB-camera.

Dus ging ik verder met het maken van enkele schetsen van hoe het eruit zou zien en hoe het zou functioneren voordat ik volledig aan de slag ging.

Ik heb ook mijn coderingsmijlpalen uitgetekend, dus in deze instructable, in plaats van je te vervelen met code, zal ik je door mijn ontwerpproces leiden en de geannoteerde code aan het einde bijvoegen zodat je deze kunt lezen en bekijken als je dat nodig hebt.

De volledige code is te vinden op https://github.com/msimbao/air en ik raad aan om uw codebestanden op dezelfde manier te structureren.

Houd er ook rekening mee dat om de app te laten werken, deze moet worden gehost. Ik heb tot nu toe alleen gevonden dat het werd uitgevoerd wanneer het op github werd gehost.:)

Stap 2: Tokkelactie

De eerste belangrijke coderingsmijlpaal was het vinden van een manier om een tokkel digitaal te repliceren zonder enige externe periferie. Mijn eerste gedachte was om de RGB-camera aan de voorkant van mijn telefoon te gebruiken.

Mijn gedachte was dat als een persoon een akkoord heeft dat ze willen spelen, er een geluid zal worden gespeeld wanneer ze met hun hand voor hun camera vegen.

Nadat ik dat had uitgezocht, had ik een goede programmeertaal nodig die kon worden gebruikt om goed te communiceren met de RGB-camera.

Ik koos voor Javascript omdat ik een platformonafhankelijke app kon maken met React Native of iets anders of de gitaar gewoon op een website kon hosten en het voor iedereen beschikbaar zou kunnen zijn.

Ik vond toen verschillende manieren om erachter te komen hoe de handbeweging een actie kan activeren die een akkoordgeluid zou kunnen zijn, maar er waren veel manieren om dit te doen.

Machine learning werkte super goed toen ik de services van IBM probeerde en in een week ongeveer 3000 afbeeldingen trainde voor swipe-herkenning en akkoordherkenning. Ik heb ook handtrack.js van victordibia geprobeerd. Helaas waren ze allebei ongelooflijk traag op mobiele telefoons.

Toen stuitte ik op bewegingsdetectie en een implementatie door de lonekorean op diffcam.com. Ik heb geleerd dat het mogelijk is om de webcam te gebruiken om twee afzonderlijke frames op te nemen en vervolgens het verschil tussen de frames te berekenen en het verschil een score te geven. Als die score een bepaalde drempel overschrijdt, voer ik vervolgens een actie uit.

De lonekorean maakte ook een engine voor zijn diff-cam die ik besloot te gebruiken voor de Air-gitaar en het werkte perfect om me de bewegingsscore te bezorgen!

Bijgevoegd zijn foto's van pogingen om Machine learning-modellen te trainen, evenals het voorbeeld van diffcam.com waarvan ik heb geleerd.

Opmerking: in dit huidige prototype wordt het tokkelen steeds maar weer herhaald, om het te stoppen, houdt u gewoon het akkoord vast dat u hierna wilt spelen. Dit is een bug die we hopen op te lossen.

De code voor het volledige tokkelen is te vinden in het script.js-bestand dat hier is bijgevoegd en de diffcam-engine van lonekorean is hier.

Stap 3: Akkoordherkenning

De volgende coderingsmijlpaal was toen om een manier te vinden om live akkoorden te herkennen.

Ik wilde dat een gebruiker in staat zou zijn om daadwerkelijke akkoordvormen te repliceren en zo een goede handplaatsing te oefenen en hen ook te helpen verschillende akkoorden te oefenen.

Net als in de laatste stap probeerde ik Machine learning uit voor akkoordherkenning, maar het was erg traag op mobiele telefoons.

Ik heb toen iets geleerd van de Real Guitar-app dat het misschien mogelijk is om een fretboard op het telefoonscherm te plaatsen en het scherm te gebruiken om akkoordvormen te genereren.

Ik moest toen leren hoe ik multi-touch-interactie in javascript kon toestaan en vond een geweldige tutorial en voorbeeld uit Mozilla's documenten

Aanraakinteracties kunnen lastig zijn, vooral in Javascript, maar het idee is dat we bepaalde divs kunnen maken en vervolgens functies kunnen definiëren om verschillende aanraakgebeurtenissen af te handelen:

1. touchStart: wanneer een vinger het scherm aanraakt

2. touchEnd: Wanneer de vinger weggaat

3. touchMove: wanneer de vinger nog steeds op het scherm staat maar van positie verandert

Vervolgens werken we rond die functies om onze eigen elementen te definiëren die reageren op verschillende aanrakingsgebeurtenissen en combinaties.

In ons geval ontwerpen we een fretboard met behulp van CSS en vertellen dan met Javascript de app dat wanneer bepaalde div's tegen elkaar worden gedrukt, een akkoord moet worden herkend.

We kunnen dan een audio-object definiëren waaraan we het akkoord doorgeven en dat geluid afspelen wanneer er een veeggebeurtenis plaatsvindt.

Om verschillende akkoordcombinaties te definiëren, maakte ik het fretboard met behulp van deze afbeelding en stelde ik vervolgens elke speciale positie in als een div die ik kon aanraken en combineren met anderen.

De code om akkoordprogressie te definiëren is hier te vinden en de toetscontroller is te vinden in de bijgevoegde code.

Stap 4: Akkoordgeluiden vinden

Nu ons systeem is ingesteld om te herkennen, hebben we wat echte akkoordgeluiden nodig.

Gelukkig komt freesound.com me altijd te hulp als ik audiosamples nodig heb. Ik zocht gewoon naar akkoorden en vond een geweldig pakket majeurakkoorden van danglada.

Ik heb ze vervolgens gedownload en bewerkt met durf om ervoor te zorgen dat het geluid onmiddellijk begon in plaats van de korte pauze aan het begin van de meeste ervan toen ze werden opgenomen.

Om ze met durf te knippen, sleepte ik ze gewoon naar de app en selecteerde ik het deel van het geluid dat ik wilde (het hele golvende deel en geen van de vlakke lijnsecties die geen geluid hebben). Ik ga dan naar het tabblad Bewerken> Speciaal verwijderen> Audio bijsnijden. Toen kwam ik bij het tabblad Tracks> Tracks uitlijnen> Start to Zero. Ik ga dan naar bestand, dan Exporteren > Exporteren als WAV.

Ik exporteer als WAV omdat ik het gemakkelijker vind om ermee om te gaan in Javascript-audioprojecten.

Ik heb toen glitch.com gebruikt om deze bestanden te hosten omdat ze een geweldig netwerk voor inhoudslevering hebben dat kan worden gebruikt voor verschillende projecten die je hebt. Een andere optie zou kunnen zijn om firebase te gebruiken, wat mijn doel is voor verschillende projecten die mogelijk meer informatie hebben om op te slaan, zoals de makerspace-inventaris-app voor de makerspace van mijn universiteit.

U hoeft alleen de activa naar de projectmap te slepen en neer te zetten en dan kunt u een link vinden wanneer u op de activamap klikt en op de activa klikt die u wilt ophalen. Glitch zal dan een unieke CDN-url voor uw asset produceren. Hier is bijvoorbeeld de link naar het A majeur akkoordgeluid.

Ik kan dan al deze akkoorden aan elkaar koppelen in een getChord-functie die zoekt wanneer een specifieke combinatie van fretposities is ingedrukt en vervolgens een geschikt akkoord toewijst dat de app moet spelen wanneer een handveeggebeurtenis plaatsvindt.

Stap 5: Voltooien en hosten van de hele app

Er zijn veel manieren om hosting aan te pakken.

Eerlijk gezegd is het beste dat ik heb gevonden gewoon om github te gebruiken. Dit komt omdat als je een app goed hebt geprogrammeerd, je je hele back-end kunt laten bedienen door een database of firestore van firebase of zelfs een CDN van glitch.com en andere plaatsen kunt gebruiken om activa op te slaan.

Om het project op github te hosten, hoef je alleen maar een github-account te openen en een nieuwe repository aan te maken. Om het instellen te vergemakkelijken, moet u er altijd voor zorgen dat u een licentie toevoegt nadat u uw projectnaam hebt ingevoerd (ik ben geen expert, maar ik heb ontdekt dat het mijn leven gemakkelijker maakt). Ik gebruik altijd gewoon een openbare licentie zoals de GNU.

Zodra de repository is ingesteld, kunnen we onze bestanden gewoon naar de repository slepen en neerzetten en op de groene commit-knop onderaan klikken.

We gaan dan naar het tabblad Instellingen met het tandwielpictogram helemaal rechts op de repositorypagina onder de ster- en kijkknoppen. Scrol in de instellingen naar beneden totdat je het vak Github Pages ziet. Verander Source naar master branch en kies een thema als je wilt. Je kunt thema's leren gebruiken door ze te googelen (ik gebruik ze nooit omdat ik vaak mijn eigen CSS- en thema-ideeën meeneem).

Wanneer de pagina gereed is, krijgt u een groene markering en een vinkje om aan te geven dat uw site is gepubliceerd en toegankelijk is.

Stap 6: Klaar

Je kunt nu genieten van een geweldige jamsessie in het comfort van je eigen koptelefoon, slaapkamer of in de trein. Voeg wat meer akkoorden toe als je wilt en speel zelfs wat met de gitaarfretposities.

Een korte opmerking over bewegingsdetectie

1. De drempel voor het swipen van een gitaar kan worden aangepast in het script.js-bestand, maar zorg ervoor dat wanneer je de app gebruikt, de achtergrond die je telefoon ziet relatief stil is.

2. In de trein is het bijvoorbeeld beter om te gaan zitten en je koptelefoon op te zetten en je telefoon naar binnen te draaien, zodat als passagiers om je heen bewegen, de telefooncamera meestal alleen je hand kan zien bewegen.

3. De hand die de telefoon vasthoudt, moet relatief stil zijn, afhankelijk van je drempel. Ik denk dat ik wat tests met een hoge drempel zal uitvoeren en de limieten in de toekomst zal bijwerken om specifieker te zijn.

Spelen:

Laad de app in uw webbrowser en kantel deze vervolgens naar de liggende modus.

Als je dan met je hand zwaait, wordt er een akkoord gespeeld, maar het blijft spelen totdat je de F-toets in de rechterbenedenhoek aanraakt.

Als alternatief kunt u het geluid stoppen door een akkoordcombinatie te maken.

Als u een akkoordcombinatie maakt, stopt het huidige geluid en wordt er een nieuw akkoordgeluid geselecteerd.

Stap 7: geleerde dingen en laatste woorden

Ik vond het erg leuk om aan dit project te werken, ook al kostte het veel tijd om een prototype te maken en de app te laten produceren terwijl ik aan andere projecten en thuiswerk werkte. Ik heb onderweg ook een paar geweldige dingen geleerd;

1. Zorg er bij het ontwerpen van digitale producten altijd voor dat je je prototypes zo snel mogelijk maakt, want je eerste aannames zullen verkeerd zijn en je moet ze snel overlopen om bij het einde te komen.

2. Vermijd zoveel mogelijk geld aan een project uit te geven. Gebruik altijd wat je kunt en begin altijd met eenvoudige dingen die je bij de hand hebt.

3. Wees niet bang om nieuwe talen, frameworks en systemen te leren. Ze zijn vaak makkelijker dan je in eerste instantie denkt.

En enorm bedankt aan de lonekorean voor het waarmaken van mijn dromen

Als je geïnteresseerd bent in hoe de app zich ontwikkelt, kun je lid worden van onze mailinglijst. Een klein team en ik zullen werken aan een volledige versie om mensen die blut zijn, reizen of jonge kinderen te helpen toegang te krijgen tot een geweldige draagbare gitaar, waar ze ook zijn.

We zouden graag wat hulp krijgen, vooral van grafisch ontwerpers, gitaristen en programmeurs om alles te testen en uit te werken.

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