Air - True Mobile Air Guitar (Prototype): 7 βήματα (με εικόνες)

2024 Συγγραφέας: John Day | [email protected]. Τελευταία τροποποίηση: 2024-01-30 08:31

ΕΝΤΑΞΕΙ λοιπον, Αυτό θα είναι ένα πολύ σύντομο οδηγό για το πρώτο μέρος του να πλησιάσω επιτέλους σε ένα παιδικό μου όνειρο.

Όταν ήμουν νεαρό αγόρι, έβλεπα πάντα τους αγαπημένους μου καλλιτέχνες και συγκροτήματα να παίζουν άψογα την κιθάρα.

Καθώς μεγάλωνα, ήμουν αρκετά ευγνώμων που έμαθα πώς να παίζω κιθάρα, ακόμη και να παίζω κάποιους που ανήκουν σε άλλους, αλλά ακόμα δεν έχω τη δική μου:(Έτσι αποφάσισα να καθίσω τελικά και να φτιάξω ένα που να λειτουργεί πλήρως στο τηλέφωνο, να χρησιμοποιεί όραση στον υπολογιστή και να αφήνει ανθρώπους σαν εμένα που θέλουν κιθάρα, αλλά μπορεί να ταξιδεύουν, να είναι σπασμένοι ή πολύ νέοι για να πάρουν ακόμα!

Μπορείτε να βρείτε την πρωτότυπη εφαρμογή σε αυτόν τον ιστότοπο

Για να δείτε πώς να παίζετε, μεταβείτε στο Βήμα "Τέλειωσε".

* Φροντίστε να το χρησιμοποιήσετε στο τηλέφωνό σας και γυρίστε την οθόνη πλάγια σε οριζόντια λειτουργία *

Απολαμβάνω!

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

Προμήθειες:

1. Έξυπνο τηλέφωνο

2. Επιτραπέζιος υπολογιστής ή φορητός υπολογιστής (Για προγραμματισμό)

Βήμα 1: Ιστορικό και Σημείωση για τον Κώδικα

Αυτό το έργο είναι σε μεγάλο βαθμό ένα κωδικοποιημένο έργο που αποσκοπεί στο να εκτελείται πλήρως στο τηλέφωνο.

Κατά την ολοκλήρωση αυτού του έργου, δοκίμασα διάφορες άλλες εφαρμογές και αναζήτησα άλλες συσκευές που κυκλοφορούν σήμερα στην αγορά, όπως η κιθάρα AirJamz ή Kurv, φορητές κιθάρες ή ακόμη και η εφαρμογή Real Guitar στο play store.

Τα προβλήματα που διαπίστωσα ότι λείπουν σε πολλά από αυτά ήταν:

1. Ορισμένες χρειάζονταν εξωτερικές συσκευές

2. Σχεδόν όλες οι εφαρμογές δεν σας επέτρεψαν να παίξετε πραγματικές χορδές ή μουσική και ήταν απλώς προσομοιωτές σανίδων

3. Οι εξωτερικές συσκευές ήταν πολύ ακριβές και πολλοί κιθαρίστες συνέστησαν να αγοράσετε μια πραγματική κιθάρα

Αυτά απεικονίζονται στις συνοδευτικές εικόνες.

Και έτσι η εφαρμογή Air πρέπει να λύσει αυτά τα προβλήματα ενώ μπορεί να λειτουργεί πλήρως στο τηλέφωνο. Πιστεύω ότι αυτό είναι δυνατό γιατί το 2020 έχουμε πολύ καλύτερη τεχνολογία προγράμματος περιήγησης για κινητά και πολλές βελτιώσεις στην όραση του υπολογιστή που μπορούν να μας επιτρέψουν να κάνουμε θαύματα με μία μόνο κάμερα RGB.

Έτσι, προχώρησα να κάνω μερικά σκίτσα για το πώς θα ήταν και πώς θα λειτουργούσε πριν ξεκινήσω πλήρως.

Επίσης, έβγαλα τα ορόσημά μου για κωδικοποίηση, οπότε σε αυτό το διδακτικό, αντί να σας κουράσω με τον κώδικα, θα σας καθοδηγήσω στη διαδικασία σχεδιασμού και θα επισυνάψω τον σχολιασμένο κώδικα στο τέλος για να διαβάσετε και να δείτε αν χρειάζεστε.

Ολόκληρος ο κώδικας μπορεί να βρεθεί στη διεύθυνση https://github.com/msimbao/air και συνιστώ να δομήσετε τα αρχεία κώδικα σας παρόμοια με αυτό.

Σημειώστε επίσης ότι για να τρέξει η εφαρμογή, πρέπει να φιλοξενηθεί. Μέχρι τώρα το βρήκα μόνο για να λειτουργεί όταν φιλοξενείται στο github.:)

Βήμα 2: Strumming Action

Το πρώτο σημαντικό ορόσημο κωδικοποίησης ήταν να βρούμε έναν τρόπο να αναπαράγουμε ψηφιακά ένα στέλεχος χωρίς εξωτερική περιφέρεια. Η άμεση σκέψη μου ήταν να χρησιμοποιήσω την μπροστινή κάμερα RGB του τηλεφώνου μου.

Η σκέψη μου ήταν ότι εάν ένα άτομο έχει μια χορδή που θέλει να παίξει, τότε όταν σκουπίζει το χέρι του μπροστά από την κάμερα του, θα ακούγεται ένας ήχος.

Αφού το κατάλαβα, χρειάστηκα μια καλή γλώσσα προγραμματισμού που θα μπορούσε να χρησιμοποιηθεί για καλή διασύνδεση με την κάμερα RGB.

Συμφωνώ με το Javascript επειδή θα μπορούσα να κάνω μια εφαρμογή πολλαπλών πλατφορμών με το React Native ή κάτι άλλο ή θα μπορούσα απλώς να φιλοξενήσω την κιθάρα σε έναν ιστότοπο και θα μπορούσε να είναι διαθέσιμη για όλους.

Στη συνέχεια βρήκα διαφορετικούς τρόπους για να καταλάβω πώς να κάνω το χτύπημα του χεριού να ενεργοποιήσει μια ενέργεια που θα μπορούσε να είναι ένας ήχος συγχορδίας, αλλά υπήρχαν πολλοί τρόποι για να γίνει αυτό.

Η μηχανική μάθηση λειτούργησε πολύ καλά όταν δοκίμασα τις υπηρεσίες της IBM και εκπαίδευσα περίπου 3000 εικόνες την εβδομάδα για αναγνώριση σάρωσης καθώς και αναγνώριση χορδών. Δοκίμασα επίσης handtrack.js by victordibia. Δυστυχώς και οι δύο ήταν απίστευτα αργές στα κινητά τηλέφωνα.

Στη συνέχεια έπεσα πάνω σε ανίχνευση κίνησης και μια εφαρμογή από τον μοναχικό στο diffcam.com. Έμαθα ότι είναι δυνατό να χρησιμοποιήσω την κάμερα web για να καταγράψω δύο ξεχωριστά καρέ και στη συνέχεια να υπολογίσω τη διαφορά μεταξύ των πλαισίων και να δώσω βαθμολογία στη διαφορά. Εάν η βαθμολογία αυτή υπερβεί ένα συγκεκριμένο όριο, τότε εκτελώ μια ενέργεια.

Ο μοναχικός επίσης έφτιαξε έναν κινητήρα για την κάμερα διαφοράς του που αποφάσισα να χρησιμοποιήσω για την κιθάρα Air και λειτούργησε τέλεια για να μου δώσει το σκορ κίνησης!

Επισυνάπτονται εικόνες από προσπάθειες κατάρτισης μοντέλων μηχανικής μάθησης καθώς και το παράδειγμα diffcam.com από το οποίο έμαθα.

Σημείωση: Σε αυτό το τρέχον πρωτότυπο, το strumming επαναλαμβάνεται ξανά και ξανά, για να το σταματήσετε, κρατήστε απλώς τη χορδή που θέλετε να παίξετε παρακάτω. Αυτό είναι ένα σφάλμα που ελπίζουμε να διορθώσουμε.

Ο κώδικας για το πλήρες strum βρίσκεται στο αρχείο script.js που επισυνάπτεται εδώ και η μηχανή diffcam by lonekorean είναι εδώ.

Βήμα 3: Αναγνώριση χορδών

Το επόμενο ορόσημο κωδικοποίησης ήταν τότε να βρούμε έναν τρόπο να χειριστούμε ζωντανά την αναγνώριση χορδών.

Wantedθελα ένας χρήστης να μπορεί να αναπαράγει τα πραγματικά σχήματα χορδών και έτσι να εξασκηθεί στην καλή τοποθέτηση των χεριών και επίσης να τους βοηθήσει να εξασκήσουν διαφορετικές χορδές.

Όπως και στο τελευταίο βήμα, δοκίμασα την εκμάθηση μηχανών για αναγνώριση χορδών, αλλά ήταν πολύ αργή στα κινητά τηλέφωνα.

Στη συνέχεια έμαθα κάτι από την εφαρμογή Real Guitar που μπορεί να είναι δυνατό να τοποθετήσετε ένα fretboard στην οθόνη του τηλεφώνου χρησιμοποιώντας την οθόνη για να δημιουργήσετε σχήματα συγχορδιών.

Στη συνέχεια έπρεπε να μάθω πώς να επιτρέπω την αλληλεπίδραση πολλαπλής αφής στο javascript και βρήκα ένα φοβερό σεμινάριο και παράδειγμα από τα έγγραφα της Mozilla

Οι αλληλεπιδράσεις αφής μπορεί να είναι δύσκολες ειδικά στο Javascript, αλλά η ιδέα είναι ότι μπορούμε να δημιουργήσουμε ορισμένα div και στη συνέχεια να ορίσουμε συναρτήσεις για τον χειρισμό διαφορετικών συμβάντων αφής:

1. touchStart: Όταν ένα δάχτυλο αγγίζει την οθόνη

2. touchEnd: Όταν φύγει το δάχτυλο

3. touchMove: Όταν το δάχτυλο είναι ακόμα στην οθόνη αλλά αλλάζει θέση

Στη συνέχεια, δουλεύουμε γύρω από αυτές τις λειτουργίες για να ορίσουμε τα δικά μας στοιχεία που ανταποκρίνονται σε διαφορετικά συμβάντα αφής και συνδυασμούς.

Στην περίπτωσή μας, σχεδιάζουμε έναν πίνακα fret χρησιμοποιώντας CSS και στη συνέχεια χρησιμοποιώντας Javascript, πείτε στην εφαρμογή ότι όταν πιέζονται ορισμένα div, πρέπει να αναγνωριστεί μια χορδή.

Στη συνέχεια, μπορούμε να ορίσουμε ένα αντικείμενο ήχου στο οποίο θα περάσουμε τη χορδή και στη συνέχεια να αναπαράγουμε αυτόν τον ήχο όταν συμβεί ένα συμβάν σάρωσης.

Για να ορίσω διαφορετικούς συνδυασμούς χορδών, έφτιαξα την πλακέτα φρεζαρίσματος χρησιμοποιώντας αυτήν την εικόνα και έπειτα απλώς έθεσα κάθε ειδική θέση ως ένα div που θα μπορούσα να αγγίξω και να συνδυάσω με άλλα.

Ο κώδικας για τον καθορισμό της προόδου χορδών βρίσκεται εδώ και ο ελεγκτής fretboard βρίσκεται στον συνημμένο κώδικα.

Βήμα 4: Εύρεση ήχων χορδών

Τώρα που το σύστημά μας έχει οριστεί να αναγνωρίζει, χρειαζόμαστε μερικούς πραγματικούς ήχους χορδών.

Ευτυχώς, το freesound.com πάντα με βοηθά όταν χρειάζομαι δείγματα ήχου. Απλώς έψαξα για συγχορδίες και βρήκα ένα εκπληκτικό πακέτο μεγάλων χορδών από το danglada.

Στη συνέχεια, τα κατέβασα και τα επεξεργάστηκα με θράσος για να βεβαιωθώ ότι ο ήχος ξεκίνησε αμέσως και όχι η σύντομη παύση στην αρχή των περισσότερων από αυτά κατά την εγγραφή τους.

Για να τα κόψω χρησιμοποιώντας το θράσος, απλά τα έσυρα στην εφαρμογή και μετά επέλεξα το τμήμα του ήχου που θέλω (ολόκληρο το κυματιστό μέρος και κανένα από τα τμήματα της επίπεδης γραμμής που δεν έχουν ήχο). Στη συνέχεια μεταβαίνω στην καρτέλα Επεξεργασία> Κατάργηση ειδικού> Περικοπή ήχου. Στη συνέχεια, πήγα στην καρτέλα cksχνη> Στοίχιση κομματιών> Έναρξη στο μηδέν. Στη συνέχεια, πηγαίνω στο αρχείο και μετά Εξαγωγή> Εξαγωγή ως WAV.

Εξάγω ως WAV επειδή το βρήκα πιο εύκολο να ασχοληθώ με ηχητικά έργα Javascript.

Στη συνέχεια χρησιμοποίησα το glitch.com για να φιλοξενήσω αυτά τα αρχεία επειδή έχουν ένα καταπληκτικό δίκτυο παράδοσης περιεχομένου που μπορεί να χρησιμοποιηθεί για διαφορετικά έργα που έχετε. Μια άλλη επιλογή θα μπορούσε να είναι η χρήση firebase που είναι η γνώση μου για διαφορετικά έργα που ενδέχεται να έχουν περισσότερες πληροφορίες για αποθήκευση, όπως η εφαρμογή απογραφής makerspace για τον κατασκευαστικό χώρο του κολλεγίου μου.

Απλώς πρέπει να μεταφέρετε και να αποθέσετε τα στοιχεία στον κατάλογο έργου και, στη συνέχεια, μπορείτε να βρείτε έναν σύνδεσμο όταν κάνετε κλικ στο φάκελο στοιχείων και κάνετε κλικ στο στοιχείο που θέλετε να λάβετε. Στη συνέχεια, το Glitch θα δημιουργήσει ένα μοναδικό url CDN για το στοιχείο σας. Για παράδειγμα, εδώ είναι ο σύνδεσμος με τον ήχο A major Chord.

Στη συνέχεια, μπορώ να συνδέσω όλες αυτές τις συγχορδίες μαζί σε μια λειτουργία getChord που θα αναζητήσει όταν έχει πατηθεί ένας συγκεκριμένος συνδυασμός θέσεων fret και στη συνέχεια να εκχωρήσω μια κατάλληλη χορδή για να παίξει η εφαρμογή όταν συμβεί ένα συμβάν σάρωσης χεριών.

Βήμα 5: Ολοκλήρωση και φιλοξενία ολόκληρης της εφαρμογής

Υπάρχουν πολλοί τρόποι για τη φιλοξενία.

Ειλικρινά, το καλύτερο που έχω βρει είναι να χρησιμοποιώ github. Αυτό συμβαίνει επειδή αν έχετε προγραμματίσει καλά μια εφαρμογή, μπορείτε να κάνετε ολόκληρο το back end σας να εξυπηρετείται από μια βάση δεδομένων ή ένα πυροσβεστικό κατάστημα από το firebase ή ακόμα και να χρησιμοποιήσετε ένα CDN από το glitch.com και άλλα μέρη για να αποθηκεύσετε περιουσιακά στοιχεία.

Για να φιλοξενήσετε το έργο στο github, το μόνο που έχετε να κάνετε είναι να ανοίξετε έναν λογαριασμό github, να δημιουργήσετε ένα νέο αποθετήριο. Στη συνέχεια, για να διευκολύνετε τη ρύθμιση, αφού βάλετε το όνομα του έργου σας, φροντίστε πάντα να προσθέτετε μια άδεια (δεν είμαι ειδικός, αλλά διαπίστωσα ότι κάνει τη ζωή μου ευκολότερη). Χρησιμοποιώ πάντα μια δημόσια άδεια όπως το GNU.

Μόλις ρυθμιστεί το αποθετήριο, μπορούμε απλώς να σύρουμε και να ρίξουμε τα αρχεία μας στο αποθετήριο και να κάνουμε κλικ στο πράσινο κουμπί δέσμευσης στο κάτω μέρος.

Στη συνέχεια, μεταβαίνουμε στην καρτέλα Ρυθμίσεις με το εικονίδιο με το γρανάζι στην άκρη δεξιά της σελίδας αποθετηρίου κάτω από τα κουμπιά αστεριού και παρακολούθησης. Μόλις μπείτε στις ρυθμίσεις, μετακινηθείτε προς τα κάτω μέχρι να δείτε το πλαίσιο Σελίδες Github. Αλλάξτε την πηγή σε κύριο κλάδο και επιλέξτε ένα θέμα αν θέλετε. Μπορείτε να μάθετε πώς να χρησιμοποιείτε τα θέματα στο googling τους (δεν τα χρησιμοποιώ ποτέ γιατί φέρνω συχνά τις δικές μου ιδέες CSS και θεμάτων).

Όταν η σελίδα είναι έτοιμη, θα λάβετε μια πράσινη επισήμανση και θα σημειώσετε ότι ο ιστότοπός σας είναι δημοσιευμένος και μπορείτε να έχετε πρόσβαση.

Βήμα 6: Έγινε

Μπορείτε τώρα να απολαύσετε ένα φοβερό jam session στην άνεση των δικών σας ακουστικών, του υπνοδωματίου ή στο τρένο. Προσθέστε μερικές ακόμη συγχορδίες αν σας αρέσουν και παίξτε ακόμη και με τις θέσεις φρεζαρίσματος της κιθάρας.

Μια γρήγορη σημείωση για την ανίχνευση κίνησης

1. Το όριο για ένα κτύπημα στην κιθάρα μπορεί να ρυθμιστεί στο αρχείο script.js, αλλά βεβαιωθείτε ότι όταν χρησιμοποιείτε την εφαρμογή, το φόντο που βλέπει το τηλέφωνό σας είναι σχετικά ακίνητο.

2. Για παράδειγμα, στο τρένο, είναι καλύτερα να καθίσετε και να βάλετε τα ακουστικά σας και να γυρίσετε το τηλέφωνό σας προς τα μέσα, έτσι ώστε εάν οι επιβάτες κινούνται γύρω σας, η κάμερα του τηλεφώνου να βλέπει μόνο το χέρι σας να κινείται τις περισσότερες φορές.

3. Το χέρι που πιέζει το τηλέφωνο πρέπει να είναι σχετικά ακίνητο, ανάλογα με το κατώφλι σας. Νομίζω ότι θα εκτελέσω κάποιες δοκιμές με υψηλό όριο και θα ενημερώσω τα όρια για να γίνουν πιο συγκεκριμένα.

Να παίξουμε:

Φορτώστε την εφαρμογή στο πρόγραμμα περιήγησης ιστού και, στη συνέχεια, γείρετε την σε οριζόντια λειτουργία.

Στη συνέχεια, όταν κουνάτε το χέρι σας, θα παίζει μια χορδή, ωστόσο, θα συνεχίσει να παίζει μέχρι να αγγίξετε το πλήκτρο F στην κάτω δεξιά γωνία.

Εναλλακτικά, μπορείτε να σταματήσετε τον ήχο κάνοντας έναν συνδυασμό χορδών.

Όταν κάνετε έναν συνδυασμό χορδών, ο τρέχων ήχος σταματά και στη συνέχεια επιλέγεται ένας νέος ήχος χορδών.

Βήμα 7: Μάθαμε πράγματα και τελικές λέξεις

Μου άρεσε πολύ να δουλεύω σε αυτό το έργο ακόμα κι αν χρειάστηκε πολύς χρόνος για να δημιουργήσω το πρωτότυπο και να δημιουργήσω την εφαρμογή ενώ εργαζόμουν σε άλλα έργα και εργασίες στο σπίτι. Έμαθα επίσης μερικά υπέροχα πράγματα στην πορεία.

1. Όταν σχεδιάζετε ψηφιακά προϊόντα, φροντίζετε πάντα να φτιάχνετε τα πρωτότυπα σας όσο το δυνατόν γρηγορότερα γιατί οι πρώτες σας υποθέσεις θα είναι λανθασμένες και θα πρέπει να τα ξεπεράσετε γρήγορα για να φτάσετε στο τέλος.

2. Αποφύγετε όσο μπορείτε να ξοδέψετε χρήματα για ένα έργο. Χρησιμοποιείτε πάντα ό, τι μπορείτε και ξεκινήστε πάντα με απλά πράγματα που έχετε στη διάθεσή σας.

3. Μη φοβάστε να μάθετε νέες γλώσσες, πλαίσια και συστήματα. Συχνά είναι πιο εύκολα από ό, τι νομίζετε στην αρχή.

Και τεράστια ευγνωμοσύνη στον μοναχικό που έκανε τα όνειρά μου πραγματικότητα

Εάν ενδιαφέρεστε για το πώς αναπτύσσεται η εφαρμογή, μπορείτε να εγγραφείτε στη λίστα αλληλογραφίας μας. Μια μικρή ομάδα και εγώ θα δουλέψουμε για να φτιάξουμε μια πλήρη έκδοση για να βοηθήσουμε τους ανθρώπους που είναι σπασμένοι, ταξιδεύουν ή μικρά παιδιά να έχουν πρόσβαση σε μια φοβερή φορητή κιθάρα όπου κι αν βρίσκονται.

Θα θέλαμε πραγματικά κάποια βοήθεια ειδικά από γραφίστες, κιθαρίστες και κωδικοποιητές για να δοκιμάσουμε και να σαρκώσουμε τα πάντα.

Απολαύστε (ﾉ ◕ ヮ ◕) ﾉ *: ･ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)