Air - True Mobile Air Guitar (Prototype) : 7 étapes (avec photos)

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:05

Bon alors, Ce sera une très courte instructable sur la première partie de se rapprocher enfin d'un de mes rêves d'enfance.

Quand j'étais un jeune garçon, je regardais toujours mes artistes et groupes préférés jouer de la guitare impeccablement.

En grandissant, j'étais assez reconnaissant d'apprendre à jouer de la guitare et même d'en jouer certaines appartenant à d'autres, mais je n'ai toujours pas la mienne:(J'ai donc décidé de m'asseoir enfin et d'en créer une qui fonctionne entièrement au téléphone, utilise la vision par ordinateur et permet aux gens comme moi qui veulent une guitare mais qui voyagent, sont fauchés ou trop jeunes pour en avoir une !

Vous pouvez trouver le prototype d'application sur ce site Web

Pour voir comment jouer, allez à l'étape « Vous avez terminé ».

* Assurez-vous de l'utiliser sur votre téléphone et tournez l'écran sur le côté en mode paysage *

Prendre plaisir!

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

Fournitures:

1. Téléphone intelligent

2. Ordinateur de bureau ou ordinateur portable (pour la programmation)

Étape 1: Contexte et note sur le code

Ce projet est en grande partie un projet codé visant à fonctionner entièrement au téléphone.

En élaborant ce projet, j'ai essayé diverses autres applications et recherché d'autres appareils actuellement sur le marché comme la guitare AirJamz ou Kurv, des guitares portables ou même l'application Real Guitar sur le Play Store.

Les problèmes que j'ai trouvés manquant dans beaucoup d'entre eux étaient:

1. Certains périphériques externes nécessaires

2. Presque toutes les applications ne vous permettaient pas vraiment de jouer de vrais accords ou de la musique et n'étaient que des simulateurs de manchettes.

3. Les appareils externes étaient assez chers et de nombreux guitaristes ont recommandé d'acheter une vraie guitare

Ceux-ci sont illustrés dans les images d'accompagnement.

Et donc l'application Air doit résoudre ces problèmes tout en étant entièrement capable de fonctionner sur le téléphone. Je pense que cela est possible car en 2020, nous avons une technologie de navigateur mobile bien meilleure et de nombreuses améliorations dans la vision par ordinateur qui peuvent nous permettre de faire des merveilles avec une seule caméra RVB.

J'ai donc commencé à faire quelques croquis de ce à quoi cela ressemblerait et comment cela fonctionnerait avant de commencer complètement.

J'ai également dessiné mes jalons de codage, donc dans cette instructable, au lieu de vous ennuyer avec du code, je vais vous guider tout au long de mon processus de conception et joindre le code annoté à la fin pour que vous puissiez le lire et le regarder si vous en avez besoin.

Le code complet se trouve sur https://github.com/msimbao/air et je vous recommande de structurer vos fichiers de code de la même manière.

Notez également que pour que l'application fonctionne, elle doit être hébergée. Jusqu'à présent, je ne l'ai trouvé que lorsqu'il est hébergé sur github.:)

Étape 2: Action de grattage

Le premier jalon majeur du codage consistait à trouver un moyen de reproduire un strum numériquement sans aucune périphérie externe. Ma pensée immédiate était d'utiliser la caméra frontale RVB de mon téléphone.

Ma pensée était que si une personne a un accord qu'elle veut jouer, alors quand elle passe sa main devant sa caméra, un son sera joué.

Après avoir compris cela, j'avais alors besoin d'un bon langage de programmation qui pourrait être utilisé pour bien s'interfacer avec la caméra RVB.

J'ai opté pour Javascript parce que je pouvais créer une application multiplateforme avec React Native ou autre chose ou simplement héberger la guitare sur un site Web et elle pourrait être disponible pour tout le monde.

J'ai ensuite trouvé différentes façons de comprendre comment faire glisser la main pour déclencher une action qui pourrait être un son d'accord, mais il y avait plusieurs façons de le faire.

L'apprentissage automatique a très bien fonctionné lorsque j'ai essayé les services d'IBM et formé environ 3000 images sur une semaine pour la reconnaissance de balayage ainsi que la reconnaissance d'accords. J'ai aussi essayé handtrack.js de victordibia. Malheureusement, ils étaient tous les deux incroyablement lents sur les téléphones portables.

Je suis ensuite tombé sur la détection de mouvement et une implémentation par le lonekorean sur diffcam.com. J'ai appris qu'il est possible d'utiliser la webcam pour enregistrer deux images distinctes, puis calculer la différence entre les images et attribuer un score à la différence. Si ce score dépasse un certain seuil, j'exécute alors une action.

Le solitaire a également fabriqué un moteur pour sa caméra différentielle que j'ai décidé d'utiliser pour la guitare Air et cela a parfaitement fonctionné pour m'obtenir le score de mouvement !

Vous trouverez ci-joint des photos de tentatives de formation de modèles d'apprentissage automatique ainsi que l'exemple de diffcam.com dont j'ai appris.

Remarque: dans ce prototype actuel, le grattage se répète encore et encore, pour l'arrêter, maintenez simplement l'accord que vous souhaitez jouer ensuite. C'est un bug que nous espérons corriger à l'avenir.

Le code pour le strum complet se trouve dans le fichier script.js joint ici et le moteur de diffcam de lonekorean est ici.

Étape 3: Reconnaissance d'accords

La prochaine étape du codage était alors de trouver un moyen de gérer la reconnaissance d'accords en direct.

Je voulais qu'un utilisateur puisse reproduire des formes d'accords réelles et ainsi pratiquer un bon placement des mains et les aider également à pratiquer différents accords.

Comme lors de la dernière étape, j'ai essayé l'apprentissage automatique pour la reconnaissance d'accords, mais c'était très lent sur les téléphones mobiles.

J'ai ensuite appris quelque chose de l'application Real Guitar qu'il serait possible de placer un manche sur l'écran du téléphone et d'utiliser l'écran pour générer des formes d'accords.

J'ai ensuite dû apprendre à autoriser l'interaction multi-touch en javascript et j'ai trouvé un tutoriel et un exemple impressionnants à partir de la documentation de Mozilla

Les interactions tactiles peuvent être délicates, en particulier en Javascript, mais l'idée est que nous pouvons créer certains div puis définir des fonctions pour gérer différents événements tactiles:

1. touchStart: lorsqu'un doigt touche l'écran

2. touchEnd: quand le doigt s'en va

3. touchMove: lorsque le doigt est toujours sur l'écran mais change de position

Nous travaillons ensuite autour de ces fonctions pour définir nos propres éléments qui répondent à différents événements et combinaisons tactiles.

Dans notre cas, nous concevons un manche de guitare en utilisant CSS, puis en utilisant Javascript, nous disons à l'application que lorsque certains div sont pressés ensemble, un accord doit être reconnu.

Nous pouvons ensuite définir un objet audio auquel nous passerons l'accord, puis jouer cet audio lorsqu'un événement de balayage se produit.

Pour définir différentes combinaisons d'accords, j'ai créé le manche en utilisant cette image, puis j'ai simplement défini chaque position spéciale comme un div que je pouvais toucher et combiner avec d'autres.

Le code pour définir la progression des accords se trouve ici et le contrôleur de manche se trouve dans le code joint.

Étape 4: Recherche de sons d'accords

Maintenant que notre système est configuré pour reconnaître, nous avons besoin de sons d'accords réels.

Heureusement, freesound.com vient toujours à mon secours lorsque j'ai besoin d'échantillons audio. J'ai simplement cherché des accords et trouvé un incroyable pack d'accords majeurs par danglada.

Je les ai ensuite téléchargés et édités en utilisant audacity pour m'assurer que le son démarre immédiatement plutôt que la courte pause au début de la plupart d'entre eux lors de leur enregistrement.

Pour les couper à l'aide d'audace, je les ai simplement fait glisser dans l'application, puis j'ai sélectionné la partie du son que je veux (toute la partie ondulée et aucune des sections de ligne plate qui n'ont pas de son). Je vais ensuite dans l'onglet Édition> Supprimer spécial> Couper l'audio. Ensuite, je suis arrivé à l'onglet Pistes> Aligner les pistes> Démarrer à zéro. Je vais ensuite dans fichier, puis Exporter > Exporter en WAV.

J'exporte au format WAV car j'ai trouvé cela plus facile à gérer dans les projets audio Javascript.

J'ai ensuite utilisé glitch.com pour héberger ces fichiers car ils disposent d'un réseau de diffusion de contenu incroyable qui peut être utilisé pour différents projets que vous avez. Une autre option pourrait être d'utiliser firebase qui est mon goto pour différents projets qui pourraient avoir plus d'informations à stocker comme l'application d'inventaire makerspace pour l'espace maker de mon collège.

Vous devez simplement faire glisser et déposer les actifs dans le répertoire du projet, puis vous pouvez trouver un lien lorsque vous cliquez sur le dossier des actifs et cliquez sur l'actif que vous souhaitez obtenir. Glitch produira ensuite une URL CDN unique pour votre actif. Par exemple, voici le lien vers le son d'accord majeur.

Je peux ensuite lier tous ces accords ensemble dans une fonction getChord qui recherchera lorsqu'une combinaison spécifique de positions de frettes a été enfoncée, puis attribuera un accord approprié à l'application à jouer lorsqu'un événement de glissement de main se produit.

Étape 5: Terminer et héberger l'intégralité de l'application

Il existe de nombreuses façons de procéder à l'hébergement.

Honnêtement, le meilleur que j'ai trouvé est simplement d'utiliser github. En effet, si vous avez bien programmé une application, vous pouvez faire en sorte que tout votre back-end soit servi par une base de données ou un magasin de feu de firebase ou même utiliser un CDN de glitch.com et d'autres endroits pour stocker des actifs.

Pour héberger le projet sur github, il vous suffit d'ouvrir un compte github, de créer un nouveau dépôt. Ensuite pour faciliter la mise en place, après avoir mis le nom de votre projet, assurez-vous toujours d'ajouter une licence (je ne suis pas un expert mais j'ai trouvé que cela me facilite la vie). J'utilise toujours juste une licence publique comme la GNU.

Une fois le référentiel configuré, nous pouvons simplement faire glisser et déposer nos fichiers dans le référentiel et cliquer sur le bouton de validation vert en bas.

Nous allons ensuite dans l'onglet Paramètres avec l'icône d'engrenage à l'extrême droite de la page du référentiel sous les boutons étoile et montre. Une fois dans les paramètres, faites défiler vers le bas jusqu'à ce que vous voyiez la zone Pages Github. Changez la source en branche principale et choisissez un thème si vous le souhaitez. Vous pouvez apprendre à utiliser les thèmes en les cherchant sur Google (je ne les utilise jamais car j'apporte souvent mes propres CSS et idées de thèmes).

Lorsque la page est prête, vous obtiendrez une surbrillance verte et une coche vous indiquant que votre site est publié et accessible.

Étape 6: Terminé

Vous pouvez maintenant profiter d'une super jam session dans le confort de vos propres écouteurs, de votre chambre ou dans le train. Ajoutez quelques accords supplémentaires si vous le souhaitez et jouez même avec les positions des frettes de la guitare.

Une note rapide sur la détection de mouvement

1. Le seuil pour un balayage de guitare peut être ajusté dans le fichier script.js, mais assurez-vous que lorsque vous utilisez l'application, l'arrière-plan que votre téléphone voit est relativement immobile.

2. Par exemple, dans le train, il est préférable de s'asseoir et de mettre vos écouteurs et de tourner votre téléphone vers l'intérieur afin que si des passagers se déplacent autour de vous, la caméra du téléphone ne puisse voir que votre main bouger la plupart du temps.

3. La main qui serre le téléphone doit être relativement immobile en fonction de votre seuil. Je pense que je vais effectuer des tests avec un seuil élevé et mettre à jour les limites à l'avenir pour être plus spécifiques.

Jouer:

Chargez l'application sur votre navigateur Web, puis inclinez-la en mode paysage.

Ensuite, lorsque vous balancez votre main, un accord jouera, cependant, il continuera à jouer jusqu'à ce que vous appuyiez sur la touche F dans le coin le plus bas à droite.

Alternativement, vous pouvez arrêter le son en créant une combinaison d'accords.

Lorsque vous créez une combinaison d'accords, le son actuel s'arrête, puis un nouveau son d'accord est sélectionné.

Étape 7: choses apprises et derniers mots

J'ai vraiment adoré travailler sur ce projet même s'il a fallu beaucoup de temps pour prototyper et produire l'application tout en travaillant sur d'autres projets et du travail à domicile. J'ai aussi appris quelques trucs géniaux en cours de route;

1. Lors de la conception de produits numériques, assurez-vous toujours de réaliser vos prototypes le plus rapidement possible car vos premières hypothèses seront fausses et vous devrez les parcourir rapidement pour arriver à la fin.

2. Évitez autant que possible de dépenser de l'argent sur un projet. Réutilisez toujours tout ce que vous pouvez et commencez toujours par des choses simples que vous avez sous la main.

3. N'ayez pas peur d'apprendre de nouveaux langages, frameworks et systèmes. Ils sont souvent plus faciles que vous ne le pensez au début.

Et un grand merci au lonekorean d'avoir réalisé mes rêves

Si vous êtes intéressé par le développement de l'application, vous pouvez rejoindre notre liste de diffusion. Une petite équipe et moi allons travailler pour créer une version complète pour aider les personnes fauchées, en voyage ou les jeunes enfants à avoir accès à une guitare portable géniale où qu'ils soient.

Nous aimerions vraiment avoir de l'aide, en particulier de la part des graphistes, des guitaristes et des codeurs pour tester et étoffer le tout.

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