Air - True Mobile Air Guitar (prototyp): 7 kroków (ze zdjęciami)

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:26

Dobrze, więc, To będzie naprawdę krótka instrukcja o pierwszej części, jak wreszcie zbliżyć się do mojego dziecięcego marzenia.

Kiedy byłem małym chłopcem, zawsze obserwowałem moich ulubionych artystów i zespoły grające nieskazitelnie na gitarze.

Gdy dorosłam, byłam na tyle wdzięczna, że nauczyłam się grać na gitarze, a nawet grać na niektórych należących do innych, ale wciąż nie mam własnego:(Postanowiłem więc w końcu usiąść i stworzyć taki, który działa całkowicie na telefonie, korzysta z wizji komputerowej i pozwala ludziom takim jak ja, którzy chcą gitary, ale mogą podróżować, zepsuć się lub są zbyt młodzi, aby ją zdobyć!

Prototypową aplikację znajdziesz na tej stronie

Aby zobaczyć, jak grać, przejdź do kroku „Gotowe”.

* Upewnij się, że używasz go na telefonie i obróć ekran bokiem do trybu poziomego *

Cieszyć się!

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

Kieszonkowe dzieci:

1. Inteligentny telefon

2. Komputer stacjonarny lub laptop (do programowania)

Krok 1: Tło i uwaga na temat kodu

Ten projekt jest w dużej mierze zakodowanym projektem, którego celem jest uruchomienie wyłącznie przez telefon.

Wymyślając ten projekt, wypróbowałem różne inne aplikacje i sprawdziłem inne urządzenia dostępne obecnie na rynku, takie jak gitara AirJamz lub Kurv, gitary przenośne, a nawet aplikację Real Guitar w sklepie z zabawkami.

Problemy, których brakowało mi w wielu z nich, to:

1. Niektóre potrzebne urządzenia zewnętrzne

2. Prawie wszystkie aplikacje tak naprawdę nie pozwalały grać rzeczywistych akordów lub muzyki i były tylko symulatorami progów

3. Urządzenia zewnętrzne były dość drogie i wielu gitarzystów polecało po prostu kupno prawdziwej gitary

Są one przedstawione na załączonych obrazach.

Tak więc aplikacja Air musi rozwiązać te problemy, jednocześnie będąc w stanie działać na telefonie. Wierzę, że jest to możliwe, ponieważ w 2020 roku mamy znacznie lepszą technologię przeglądarek mobilnych i wiele ulepszeń w zakresie widzenia komputerowego, które pozwalają nam zdziałać cuda za pomocą jednej kamery RGB.

Więc zacząłem robić kilka szkiców tego, jak to będzie wyglądać i jak będzie funkcjonować, zanim w pełni się zacznę.

Narysowałem również moje kamienie milowe kodowania, więc w tej instrukcji, zamiast zanudzać cię kodem, przeprowadzę cię przez proces projektowania i dołączę kod z adnotacjami na końcu, abyś mógł przeczytać i obejrzeć, jeśli potrzebujesz.

Cały kod można znaleźć na https://github.com/msimbao/air i polecam strukturyzację plików kodu podobną do tej.

Pamiętaj też, że aby aplikacja działała, musi być hostowana. Do tej pory odkryłem, że działa tylko wtedy, gdy jest hostowany na github.:)

Krok 2: Akcja bicia

Pierwszym ważnym krokiem milowym w zakresie kodowania było znalezienie sposobu na cyfrową replikację brzęczyka bez żadnych zewnętrznych peryferii. Moją natychmiastową myślą było użycie przedniej kamery RGB mojego telefonu.

Pomyślałem, że jeśli ktoś ma akord, który chce zagrać, to kiedy przesunie ręką przed kamerą, zostanie odtworzony dźwięk.

Po zrozumieniu tego potrzebowałem dobrego języka programowania, który mógłby być używany do dobrego interfejsu z kamerą RGB.

Zdecydowałem się na Javascript, ponieważ mogłem stworzyć wieloplatformową aplikację z React Native lub czymś innym, albo po prostu hostować gitarę na stronie internetowej i mogłaby być dostępna dla wszystkich.

Następnie znalazłem różne sposoby, aby dowiedzieć się, jak przesunąć ręką, aby wywołać akcję, która może być odtwarzanym dźwiękiem akordu, ale było na to wiele sposobów.

Uczenie maszynowe działało bardzo dobrze, gdy wypróbowałem usługi IBM i przeszkoliłem około 3000 obrazów w ciągu tygodnia do rozpoznawania machnięć, a także rozpoznawania akordów. Próbowałem też handtrack.js autorstwa victordibii. Niestety oba były niewiarygodnie wolne na telefonach komórkowych.

Następnie natknąłem się na wykrywanie ruchu i implementację przez lonekorejczyka na diffcam.com. Dowiedziałem się, że za pomocą kamery internetowej można nagrać dwie oddzielne klatki, a następnie obliczyć różnicę między klatkami i przyznać tej różnicy punktację. Jeśli ten wynik przekroczy pewien próg, wykonuję akcję.

Lonekorejczyk zrobił również silnik do swojej krzywki różnicowej, którego postanowiłem użyć do gitary Air i działał idealnie, aby uzyskać wynik ruchu!

Załączam zdjęcia prób uczenia modeli uczenia maszynowego oraz przykład z diffcam.com, z którego się nauczyłem.

Uwaga: W obecnym prototypie brzdąkanie powtarza się w kółko, aby je zatrzymać, po prostu przytrzymaj akord, który chcesz zagrać dalej. Jest to błąd, który mamy nadzieję naprawić.

Kod pełnego strumienia znajduje się w załączonym pliku script.js, a silnik diffcam autorstwa lonekorean jest tutaj.

Krok 3: Rozpoznawanie akordów

Następnym kamieniem milowym w kodowaniu było znalezienie sposobu na radzenie sobie z rozpoznawaniem akordów na żywo.

Chciałem, aby użytkownik był w stanie odtworzyć rzeczywiste kształty akordów, a tym samym ćwiczyć dobre układanie rąk, a także pomagać im ćwiczyć różne akordy.

Podobnie jak w ostatnim kroku, wypróbowałem uczenie maszynowe do rozpoznawania akordów, ale na telefonach komórkowych działało bardzo wolno.

Potem dowiedziałem się czegoś z aplikacji Real Guitar, że możliwe jest umieszczenie podstrunnicy na ekranie telefonu, używając ekranu do generowania kształtów akordów.

Następnie musiałem nauczyć się zezwalać na interakcję wielodotykową w javascript i znalazłem niesamowity samouczek i przykład z dokumentów Mozilli

Interakcje dotykowe mogą być trudne, szczególnie w JavaScript, ale chodzi o to, że możemy utworzyć określone elementy div, a następnie zdefiniować funkcje do obsługi różnych zdarzeń dotykowych:

1. touchStart: gdy palec dotyka ekranu

2. touchEnd: gdy palec odchodzi

3. touchMove: gdy palec jest nadal na ekranie, ale zmienia pozycję

Następnie pracujemy nad tymi funkcjami, aby zdefiniować własne elementy, które reagują na różne zdarzenia dotykowe i kombinacje.

W naszym przypadku projektujemy progi za pomocą CSS, a następnie za pomocą JavaScript, mówimy aplikacji, że gdy określone div zostaną naciśnięte razem, akord powinien zostać rozpoznany.

Następnie możemy zdefiniować obiekt audio, do którego przekażemy akord, a następnie odtworzyć ten dźwięk, gdy wystąpi zdarzenie machnięcia.

Aby zdefiniować różne kombinacje akordów, stworzyłem podstrunnicę, używając tego obrazu, a następnie po prostu ustawiłem każdą specjalną pozycję jako div, którą mogłem dotykać i łączyć z innymi.

Kod do zdefiniowania progresji akordów znajduje się tutaj, a kontroler gryfu znajduje się w załączonym kodzie.

Krok 4: Znajdowanie dźwięków akordów

Teraz, gdy nasz system jest ustawiony na rozpoznawanie, potrzebujemy rzeczywistych dźwięków akordów.

Na szczęście freesound.com zawsze przychodzi mi z pomocą, gdy potrzebuję próbek audio. Po prostu szukałem akordów i znalazłem niesamowitą paczkę durowych akordów danglady.

Następnie pobrałem je i edytowałem za pomocą zuchwałości, aby upewnić się, że dźwięk zaczyna się natychmiast, a nie krótkiej pauzy na początku większości z nich, gdy były nagrywane.

Aby przyciąć je za pomocą audacity, po prostu przeciągnąłem je do aplikacji, a następnie wybrałem część dźwięku, którą chcę (całą falistą część i żaden z płaskich odcinków linii, które nie mają dźwięku). Następnie przechodzę do zakładki Edycja > Usuń specjalnie > Przytnij dźwięk. Następnie dotarłem do zakładki Ścieżki> Wyrównaj ścieżki> Zacznij od zera. Następnie przechodzę do pliku, a następnie Eksportuj > Eksportuj jako WAV.

Eksportuję jako WAV, ponieważ łatwiej mi się z tym uporać w projektach audio JavaScript.

Następnie użyłem glitch.com do hostowania tych plików, ponieważ mają niesamowitą sieć dostarczania treści, którą można wykorzystać do różnych projektów, które masz. Inną opcją może być użycie firebase, która jest moim celem dla różnych projektów, które mogą mieć więcej informacji do przechowywania, takich jak aplikacja makerspace do inwentaryzacji dla obszaru makerspace mojej uczelni.

Wystarczy przeciągnąć i upuścić zasoby do katalogu projektu, a następnie można znaleźć łącze po kliknięciu folderu zasobów i kliknięciu zasobu, który chcesz uzyskać. Glitch utworzy wtedy unikalny adres URL CDN dla Twojego zasobu. Na przykład, oto link do brzmienia A-dur Chord.

Następnie mogę połączyć wszystkie te akordy razem w funkcji getChord, która będzie szukać po naciśnięciu określonej kombinacji pozycji progów, a następnie przypisać odpowiedni akord do gry w aplikacji, gdy wystąpi zdarzenie machnięcia ręką.

Krok 5: Kończenie i hostowanie całej aplikacji

Istnieje wiele sposobów na hosting.

Szczerze mówiąc, najlepsze, jakie znalazłem, to po prostu użycie github. Dzieje się tak, ponieważ jeśli dobrze zaprogramowałeś aplikację, możesz sprawić, by cały back-end był obsługiwany przez bazę danych lub firestore z Firebase, a nawet użyć CDN z glitch.com i innych miejsc do przechowywania zasobów.

Aby hostować projekt na github, wystarczy otworzyć konto github, stworzyć nowe repozytorium. Następnie, aby ułatwić konfigurację, po wpisaniu nazwy projektu zawsze dodaj licencję (nie jestem ekspertem, ale odkryłem, że ułatwia mi to życie). Zawsze używam licencji publicznej, takiej jak GNU.

Po skonfigurowaniu repozytorium możemy po prostu przeciągnąć i upuścić nasze pliki do repozytorium i kliknąć zielony przycisk zatwierdzenia na dole.

Następnie przechodzimy do zakładki Ustawienia z ikoną koła zębatego po prawej stronie repozytorium pod przyciskami gwiazdy i zegarka. W ustawieniach przewiń w dół, aż zobaczysz okno Github Pages. Zmień Źródło na gałąź główną i wybierz motyw, jeśli chcesz. Możesz nauczyć się korzystać z motywów, wygooglując je (nigdy ich nie używam, ponieważ często przynoszę własne pomysły na CSS i motywy).

Gdy strona będzie gotowa, pojawi się zielone podświetlenie i zaznaczenie informujące, że Twoja witryna jest opublikowana i można uzyskać do niej dostęp.

Krok 6: Gotowe

Możesz teraz cieszyć się niesamowitym jam session w zaciszu własnych słuchawek, sypialni lub w pociągu. Dodaj więcej akordów, jeśli chcesz, a nawet pobaw się pozycjami progów gitarowych.

Krótka uwaga na temat wykrywania ruchu

1. Próg dla machnięcia brzdąkaniem na gitarze można dostosować w pliku script.js, ale upewnij się, że podczas korzystania z aplikacji tło, które widzi Twój telefon, jest stosunkowo nieruchome.

2. Na przykład w pociągu lepiej usiąść i założyć słuchawki, a następnie skierować telefon do środka, tak aby pasażerowie poruszający się wokół ciebie przez większość czasu widzieli tylko twoją rękę.

3. Ręka trzymająca telefon musi być względnie nieruchoma, w zależności od progu. Myślę, że przeprowadzę kilka testów z wysokim progiem i zaktualizuję limity, aby były bardziej szczegółowe.

Grać:

Załaduj aplikację w przeglądarce internetowej, a następnie przechyl ją do trybu poziomego.

Następnie, gdy zamachniesz ręką, zagra akord, który będzie jednak odtwarzany, dopóki nie dotkniesz klawisza F w prawym dolnym rogu.

Alternatywnie możesz zatrzymać dźwięk, tworząc kombinację akordów.

Kiedy tworzysz kombinację akordów, bieżący dźwięk zatrzymuje się, a następnie wybierany jest nowy dźwięk akordu.

Krok 7: rzeczy nauczone i ostatnie słowa

Naprawdę podobała mi się praca nad tym projektem, nawet jeśli prototypowanie i produkcja aplikacji zajęło mi dużo czasu podczas pracy nad innymi projektami i prac domowych. Po drodze nauczyłem się też kilku niesamowitych rzeczy;

1. Projektując produkty cyfrowe, zawsze postaraj się wykonać prototypy tak szybko, jak to możliwe, ponieważ Twoje pierwsze założenia będą błędne i musisz je szybko przejechać, aby dotrzeć do końca.

2. Unikaj wydawania pieniędzy na projekt tak bardzo, jak to możliwe. Zawsze używaj ponownie wszystkiego, co możesz i zawsze zaczynaj od prostych rzeczy, które masz pod ręką.

3. Nie bój się uczyć nowych języków, frameworków i systemów. Często są łatwiejsze niż myślisz na początku.

I wielkie podziękowania dla samotnika za spełnienie moich marzeń

Jeśli jesteś zainteresowany rozwojem aplikacji, możesz dołączyć do naszej listy mailingowej. Mały zespół i ja będziemy pracować nad stworzeniem pełnej wersji, aby pomóc ludziom, którzy są spłukani, podróżującym lub małym dzieciom, uzyskać dostęp do niesamowitej przenośnej gitary, gdziekolwiek się znajdują.

Bardzo chcielibyśmy pomocy, szczególnie od grafików, gitarzystów i programistów, aby przetestować i dopracować wszystko.

Ciesz się (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ･: *ヽ(◕ヮ◕ヽ)