Air - True Mobile Air Guitar (Prototyp) - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:15

Also gut, Dies wird eine wirklich kurze Anleitung über den ersten Teil sein, um einem Kindheitstraum von mir endlich näher zu kommen.

Als ich ein kleiner Junge war, habe ich immer meinen Lieblingskünstlern und -bands zugesehen, wie sie makellos Gitarre spielten.

Als ich aufwuchs, war ich dankbar genug, um zu lernen, wie man eine Gitarre spielt und sogar einige spielt, die anderen gehören, aber immer noch keine eigene habe:(Also beschloss ich, mich endlich hinzusetzen und eine zu machen, die komplett auf dem Telefon läuft, Computer Vision nutzt und Leute wie mich zulässt, die eine Gitarre wollen, aber vielleicht reisen, pleite oder zu jung sind, um noch eine zu bekommen!

Sie finden die Prototyp-App auf dieser Website

Um zu sehen, wie man spielt, gehen Sie zum Schritt "Sie sind fertig".

* Verwenden Sie es unbedingt auf Ihrem Telefon und drehen Sie den Bildschirm seitlich in den Querformatmodus *

Genießen!

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

Lieferungen:

1. Smartphone

2. Desktop-Computer oder Laptop (zum Programmieren)

Schritt 1: Hintergrund und Hinweis zum Code

Dieses Projekt ist größtenteils ein codiertes Projekt, das darauf abzielt, vollständig auf dem Telefon zu laufen.

Bei diesem Projekt habe ich verschiedene andere Apps ausprobiert und nach anderen derzeit auf dem Markt befindlichen Geräten wie der AirJamz- oder Kurv-Gitarre, tragbaren Gitarren oder sogar der Real Guitar-App im Play Store gesucht.

Die Probleme, die ich in vielen von ihnen vermisste, waren:

1. Einige benötigte externe Geräte

2. Fast alle Apps ließen Sie nicht wirklich Akkorde oder Musik spielen und waren nur Griffbrettsimulatoren

3. Externe Geräte waren ziemlich teuer und viele Gitarristen empfahlen, nur eine echte Gitarre zu kaufen

Diese sind in den beigefügten Bildern abgebildet.

Und so muss die Air-App diese Probleme lösen und gleichzeitig vollständig auf dem Telefon laufen können. Ich glaube, dass dies möglich ist, weil wir 2020 eine weitaus bessere mobile Browsertechnologie und viele Verbesserungen in der Computer Vision haben, die es uns ermöglichen, mit einer einzigen RGB-Kamera Wunder zu vollbringen.

Also machte ich einige Skizzen, wie es aussehen würde und wie es funktionieren würde, bevor ich richtig loslegte.

Ich habe auch meine Codierungsmeilensteine herausgezogen, so dass ich Sie in diesem anweisbaren, anstatt Sie mit Code zu langweilen, durch meinen Designprozess führen und den kommentierten Code am Ende anhängen werde, damit Sie ihn lesen und bei Bedarf ansehen können.

Den gesamten Code finden Sie unter https://github.com/msimbao/air und ich empfehle, Ihre Codedateien ähnlich zu strukturieren.

Beachten Sie auch, dass die App gehostet werden muss, damit sie ausgeführt werden kann. Ich habe bisher nur festgestellt, dass es läuft, wenn es auf github gehostet wird.:)

Schritt 2: Strumming-Aktion

Der erste große Meilenstein bei der Codierung war die Suche nach einem Weg, um einen Strum digital ohne externe Peripherie zu replizieren. Mein unmittelbarer Gedanke war, die RGB-Frontkamera meines Telefons zu verwenden.

Mein Gedanke war, dass, wenn eine Person einen Akkord hat, den sie spielen möchte, ein Ton abgespielt wird, wenn sie ihre Hand vor ihrer Kamera streicht.

Nachdem ich das herausgefunden hatte, brauchte ich dann eine gute Programmiersprache, die sich gut mit der RGB-Kamera verbinden ließ.

Ich habe mich für Javascript entschieden, weil ich mit React Native oder etwas anderem eine plattformübergreifende App erstellen oder die Gitarre einfach auf einer Website hosten könnte und sie für jeden verfügbar sein könnte.

Ich habe dann verschiedene Wege gefunden, um herauszufinden, wie man die Handbewegung dazu bringt, eine Aktion auszulösen, die ein Akkordklang sein könnte, aber es gab viele Möglichkeiten, dies zu tun.

Maschinelles Lernen hat super funktioniert, als ich die IBM-Dienste ausprobierte und über eine Woche etwa 3000 Bilder für die Wischerkennung sowie die Akkorderkennung trainierte. Ich habe auch handtrack.js von victordibia ausprobiert. Leider waren beide unglaublich langsam auf Handys.

Dann bin ich bei diffcam.com über die Bewegungserkennung und eine Implementierung des Lonekoreaners gestolpert. Ich habe gelernt, dass es möglich ist, mit der Webcam zwei separate Frames aufzunehmen und dann die Differenz zwischen den Frames zu berechnen und der Differenz eine Bewertung zu geben. Wenn diese Punktzahl einen bestimmten Schwellenwert überschreitet, führe ich eine Aktion aus.

Der Einzelgänger hat auch eine Engine für seine Diff-Cam gebaut, die ich für die Air-Gitarre verwendet habe, und sie hat perfekt funktioniert, um mir den Motion-Score zu besorgen!

Im Anhang sind Bilder von Versuchen, Machine-Learning-Modelle zu trainieren, sowie das diffcam.com-Beispiel, aus dem ich gelernt habe.

Hinweis: In diesem aktuellen Prototyp wiederholt sich das Strumming immer und immer wieder, um es zu stoppen, halten Sie einfach den Akkord, den Sie als nächstes spielen möchten. Dies ist ein Fehler, den wir hoffentlich in Zukunft beheben können.

Der Code für den vollständigen Strum ist in der hier angehängten Datei script.js zu finden und die Diffcam-Engine von lonekorean ist hier.

Schritt 3: Akkorderkennung

Der nächste Coding-Meilenstein war dann, einen Weg zu finden, die Akkorderkennung live zu handhaben.

Ich wollte, dass ein Benutzer in der Lage ist, tatsächliche Akkordformen zu replizieren und so eine gute Handplatzierung zu üben und ihm auch beim Üben verschiedener Akkorde zu helfen.

Wie im letzten Schritt habe ich maschinelles Lernen für die Akkorderkennung ausprobiert, aber auf Mobiltelefonen war es sehr langsam.

Ich habe dann etwas von der Real Guitar App gelernt, dass es möglich sein könnte, ein Griffbrett auf dem Telefonbildschirm zu platzieren und den Bildschirm zum Generieren von Akkordformen zu verwenden.

Ich musste dann lernen, wie man Multi-Touch-Interaktion in Javascript erlaubt und fand ein tolles Tutorial und Beispiel aus Mozillas Dokumentation

Berührungsinteraktionen können besonders in Javascript schwierig sein, aber die Idee ist, dass wir bestimmte Divs erstellen und dann Funktionen definieren können, um verschiedene Berührungsereignisse zu verarbeiten:

1. touchStart: Wenn ein Finger den Bildschirm berührt

2. touchEnd: Wenn der Finger geht

3. touchMove: Wenn der Finger noch auf dem Bildschirm ist, aber seine Position ändert

Wir arbeiten dann um diese Funktionen herum, um unsere eigenen Elemente zu definieren, die auf verschiedene Berührungsereignisse und Kombinationen reagieren.

In unserem Fall entwerfen wir ein Griffbrett mit CSS und teilen dann mit Javascript der App mit, dass beim Zusammendrücken bestimmter Divs ein Akkord erkannt werden soll.

Wir können dann ein Audioobjekt definieren, an das wir den Akkord übergeben, und dieses Audio dann abspielen, wenn ein Swipe-Ereignis auftritt.

Um verschiedene Akkordkombinationen zu definieren, habe ich das Griffbrett mit diesem Bild erstellt und dann einfach jede spezielle Position als Div festgelegt, die ich berühren und mit anderen kombinieren kann.

Der Code zum Definieren der Akkordfolge befindet sich hier und der Griffbrett-Controller befindet sich im beigefügten Code.

Schritt 4: Akkordklänge finden

Da unser System nun so eingestellt ist, dass es erkennt, benötigen wir einige echte Akkordklänge.

Zum Glück kommt mir freesound.com immer zu Hilfe, wenn ich Hörproben benötige. Ich habe einfach nach Akkorden gesucht und eine erstaunliche Packung Dur-Akkorde von Danglada gefunden.

Ich habe sie dann heruntergeladen und mit Audacity bearbeitet, um sicherzustellen, dass der Ton sofort begann und nicht die kurze Pause am Anfang der meisten von ihnen, als sie aufgenommen wurden.

Um sie mit Audacity zu schneiden, habe ich sie einfach in die App gezogen und dann den gewünschten Teil des Sounds ausgewählt (den gesamten wellenförmigen Teil und keine der flachen Linienabschnitte, die keinen Sound haben). Ich gehe dann zur Registerkarte Bearbeiten> Spezial entfernen> Audio zuschneiden. Dann bin ich auf die Registerkarte Tracks> Tracks ausrichten> Start to Zero gekommen. Ich gehe dann auf Datei, dann Exportieren > Exportieren als WAV.

Ich exportiere als WAV, weil ich es in Javascript-Audioprojekten einfacher gefunden habe.

Ich habe dann glitch.com verwendet, um diese Dateien zu hosten, weil sie ein erstaunliches Content Delivery Network haben, das für verschiedene Projekte verwendet werden kann, die Sie haben. Eine andere Option könnte sein, Firebase zu verwenden, die mein Goto für verschiedene Projekte ist, die möglicherweise mehr Informationen zum Speichern haben, wie die Makerspace-Inventar-App für den Makerspace meiner Hochschule.

Sie müssen die Assets einfach per Drag & Drop in das Projektverzeichnis ziehen und dann finden Sie einen Link, wenn Sie auf den Asset-Ordner klicken und auf das gewünschte Asset klicken. Glitch erstellt dann eine eindeutige CDN-URL für Ihr Asset. Hier ist zum Beispiel der Link zum A-Dur-Akkord-Sound.

Ich kann dann alle diese Akkorde in einer getChord-Funktion miteinander verknüpfen, die sucht, wenn eine bestimmte Kombination von Bundpositionen gedrückt wurde, und dann einen geeigneten Akkord zuweisen, den die App spielen soll, wenn ein Hand-Swipe-Ereignis auftritt.

Schritt 5: Fertigstellen und Hosten der gesamten App

Es gibt viele Möglichkeiten zum Hosten.

Ehrlich gesagt ist das Beste, was ich gefunden habe, einfach Github zu verwenden. Dies liegt daran, dass Sie, wenn Sie eine App gut programmiert haben, Ihr gesamtes Back-End von einer Datenbank oder einem Firestore von Firebase bedienen lassen oder sogar ein CDN von glitch.com und anderen Orten zum Speichern von Assets verwenden können.

Um das Projekt auf github zu hosten, müssen Sie lediglich ein github-Konto eröffnen und ein neues Repository erstellen. Um die Einrichtung zu erleichtern, fügen Sie nach Eingabe Ihres Projektnamens immer eine Lizenz hinzu (ich bin kein Experte, aber ich habe festgestellt, dass es mein Leben einfacher macht). Ich verwende immer nur eine öffentliche Lizenz wie die GNU.

Sobald das Repository eingerichtet ist, können wir unsere Dateien einfach per Drag & Drop in das Repository ziehen und unten auf die grüne Commit-Schaltfläche klicken.

Wir gehen dann zur Registerkarte Einstellungen mit dem Zahnradsymbol ganz rechts auf der Repository-Seite unter den Stern- und Watch-Schaltflächen. Scrollen Sie in den Einstellungen nach unten, bis Sie das Feld Github Pages sehen. Ändern Sie die Quelle in den Master-Zweig und wählen Sie ein Thema aus, wenn Sie möchten. Sie können lernen, wie man Themes verwendet, indem Sie sie googeln (ich benutze sie nie, weil ich oft meine eigenen CSS- und Theme-Ideen mitbringe).

Wenn die Seite fertig ist, erhalten Sie eine grüne Markierung und ein Häkchen, die Ihnen mitteilen, dass Ihre Site veröffentlicht wurde und aufgerufen werden kann.

Schritt 6: Fertig

Sie können jetzt eine fantastische Jam-Session bequem über Ihre eigenen Kopfhörer, Ihr Schlafzimmer oder im Zug genießen. Fügen Sie weitere Akkorde hinzu, wenn Sie möchten, und spielen Sie sogar mit den Gitarrenbundpositionen herum.

Eine kurze Anmerkung zur Bewegungserkennung

1. Der Schwellenwert für ein Streichen einer Gitarre kann in der Datei script.js angepasst werden. Stellen Sie jedoch sicher, dass der Hintergrund, den Ihr Telefon sieht, relativ ruhig ist, wenn Sie die App verwenden.

2. Im Zug ist es beispielsweise besser, sich hinzusetzen, die Kopfhörer aufzusetzen und das Telefon nach innen zu drehen, damit die Telefonkamera die meiste Zeit nur Ihre Handbewegungen sehen kann, wenn sich Fahrgäste um Sie herum bewegen.

3. Die Hand, die das Telefon umklammert, muss abhängig von Ihrer Schwelle relativ ruhig sein. Ich denke, ich werde einige Tests mit einem hohen Schwellenwert durchführen und die Grenzen in Zukunft aktualisieren, um genauer zu sein.

Spielen:

Laden Sie die App in Ihren Webbrowser und neigen Sie sie dann ins Querformat.

Wenn Sie dann Ihre Hand schwingen, wird ein Akkord gespielt, der jedoch so lange gespielt wird, bis Sie die F-Taste in der unteren rechten Ecke berühren.

Alternativ können Sie den Ton stoppen, indem Sie eine Akkordkombination erstellen.

Wenn Sie eine Akkordkombination erstellen, stoppt der aktuelle Klang und ein neuer Akkordklang wird ausgewählt.

Schritt 7: Gelernte und letzte Worte

Ich habe es wirklich geliebt, an diesem Projekt zu arbeiten, auch wenn es lange gedauert hat, einen Prototyp zu erstellen und die App zu produzieren, während ich an anderen Projekten und Hausaufgaben arbeitete. Ich habe unterwegs auch ein paar tolle Sachen gelernt;

1. Achten Sie beim Design digitaler Produkte immer darauf, Ihre Prototypen so schnell wie möglich zu erstellen, da Ihre ersten Annahmen falsch sind und Sie sie schnell durchgehen müssen, um zum Ende zu gelangen.

2. Vermeiden Sie es, so viel Geld wie möglich für ein Projekt auszugeben. Verwenden Sie immer wieder, was immer Sie können, und beginnen Sie immer mit einfachen Dingen, die Sie zur Hand haben.

3. Haben Sie keine Angst, neue Sprachen, Frameworks und Systeme zu lernen. Sie sind oft einfacher als man zunächst denkt.

Und ein riesiges Dankeschön an den lonekoreaner, der meine Träume wahr gemacht hat

Wenn Sie daran interessiert sind, wie sich die App entwickelt, können Sie sich unserer Mailingliste eintragen. Ein kleines Team und ich werden daran arbeiten, eine Vollversion zu erstellen, um Leuten zu helfen, die pleite sind, reisen oder kleine Kinder haben, wo immer sie sind, Zugang zu einer großartigen tragbaren Gitarre zu haben.

Wir würden uns sehr über Hilfe, insbesondere von Grafikdesignern, Gitarristen und Programmierern, freuen, um alles zu testen und auszuarbeiten.

Viel Spaß (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ･: *ヽ(◕ヮ◕ヽ)