Hava - Əsl Mobil Hava Gitara (Prototip): 7 Addım (Şəkillərlə)

2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:42

Tamam, Bu, nəhayət uşaqlıq arzuma yaxınlaşmağın ilk hissəsi haqqında həqiqətən qısa bir təlimat olacaq.

Kiçik bir oğlan ikən həmişə sevdiyim sənətçilərin və qrupların qüsursuz gitara çalmasını seyr edirdim.

Böyüdükcə gitara çalmağı və hətta başqalarına məxsus olanları çalmağı öyrəndiyimə görə minnətdar idim, amma hələ də öz musiqim yoxdur:(Nəhayət oturub telefonda işləyən, kompüter görmə qabiliyyətindən istifadə edən və mənim kimi gitara istəyən, amma səyahət edə bilən, sınmış və ya hələ gənc olmaq istəyən insanlara imkan verən birini düzəltmək qərarına gəldim!

Prototip tətbiqini bu saytda tapa bilərsiniz

Necə oynayacağınızı görmək üçün "Bitti" Adımına keçin.

* Telefonunuzda istifadə etdiyinizə və ekranı yan tərəfə çevirdiyinizə əmin olun *

Zövq alın!

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

Təchizat:

1. Ağıllı Telefon

2. Masaüstü Kompüter və ya Laptop (Proqramlaşdırma Üçün)

Addım 1: Kod haqqında məlumat və qeyd

Bu Layihə, əsasən telefonda işləməyə yönəlmiş kodlu bir layihədir.

Bu layihəni hazırlayarkən, müxtəlif tətbiqləri sınadım və hazırda satışda olan AirJamz və ya Kurv gitara, portativ gitaralar və ya hətta oyun mağazasındakı Real Gitara tətbiqi kimi digər cihazlara baxdım.

Bir çoxunda çatışmadığım problemlər:

1. Bəzi lazımlı xarici qurğular

2. Demək olar ki, bütün tətbiqlər həqiqi ton və ya musiqi çalmağa imkan vermədi və sadəcə lövhə simulyatorları idi

3. Xarici Cihazlar olduqca bahalı idi və bir çox gitarist yalnız bir gitar almağı məsləhət görürdü

Bunlar müşayiət olunan şəkillərdə təsvir edilmişdir.

Və buna görə də Air tətbiqi bu problemləri həll etməli və tamamilə telefonda işləyə bilər. Bunun mümkün olduğuna inanıram, çünki 2020 -ci ildə daha yaxşı bir mobil brauzer texnologiyasına və tək bir RGB kamera ilə möcüzələr yaratmağımıza imkan verən kompüter görmə qabiliyyətində bir çox inkişafa sahibik.

Beləliklə, tam olaraq başlamazdan əvvəl necə görünəcəyini və necə işləyəcəyinə dair bəzi eskizlər etməyə başladım.

Mən də kodlaşdırma mərhələlərimi bu qədər təlimatlandırdım ki, sizi koddan bezdirmək əvəzinə, dizayn prosesimdən keçəcəyəm və lazım olduqda oxuyub baxmağınız üçün izahlı kodu sonuna əlavə edəcəyəm.

Bütün kodu https://github.com/msimbao/air saytında tapa bilərsiniz və buna bənzər kod sənədlərinizi qurmağı məsləhət görürəm.

Tətbiqin işləməsi üçün ev sahibliyi etməsi lazım olduğunu da unutmayın. İndiyə qədər yalnız github -da yerləşdirildikdə işlədiyini gördüm.:)

Addım 2: Gücləndirici Fəaliyyət

İlk böyük kodlaşdırma mərhələsi, hər hansı bir xarici periferiya olmadan bir rəqəmi rəqəmsal olaraq təkrarlamaq üçün bir yol tapmaq idi. Dərhal düşündüyüm telefonun RGB ön kamerasını istifadə etmək idi.

Düşündüm ki, bir insanın ifa etmək istədiyi bir akkord varsa, əlini kamera qarşısında çalanda bir səs çalınacaq.

Bunu başa düşdükdən sonra RGB kamera ilə yaxşı əlaqə qurmaq üçün istifadə edilə bilən yaxşı bir proqramlaşdırma dilinə ehtiyacım var idi.

Javascript-ə qərar verdim, çünki React Native və ya başqa bir şey ilə platformalararası bir tətbiq edə bilərdim və ya gitarı bir veb saytında yerləşdirə bilərdim və hər kəs üçün əlçatan ola bilərdi.

Daha sonra əl çalmanın bir akkord səsi ola biləcək bir hərəkəti necə tetikleyeceğini anlamaq üçün fərqli yollar tapdım, amma bunun bir çox yolu var idi.

IBM -in xidmətlərini sınadığımda və bir həftə ərzində çalmak tanınması və akkord tanınması üçün 3000 -ə yaxın şəkil öyrətdiyim zaman maşın öyrənmə çox yaxşı işləyirdi. Mən də victordibia tərəfindən handtrack.js sınamışam. Təəssüf ki, ikisi də cib telefonlarında inanılmaz dərəcədə yavaş idi.

Daha sonra diffcam.com -da hərəkətin aşkarlanması və lonekor tərəfindən həyata keçirilməsində rast gəldim. Öyrəndim ki, veb kameradan istifadə edərək iki ayrı çərçivə yaza bilərsiniz, sonra çərçivələr arasındakı fərqi hesablaya və fərqi hesaba verə bilərsiniz. Bu bal müəyyən bir həddi keçərsə, bir hərəkət edərəm.

Lonekorean, hava gitarası üçün istifadə etməyi qərara aldığım diff kamerası üçün bir mühərrik hazırladı və mənə hərəkət hesabını əldə etmək üçün mükəmməl işləyirdi!

Maşın öyrənmə modellərini öyrətmək cəhdlərinin şəkilləri və öyrəndiyim diffcam.com nümunəsi əlavə olunur.

Qeyd: Bu hazırkı prototipdə, tıxaclar dəfələrlə təkrarlanır, bunun qarşısını almaq üçün sadəcə oynamaq istədiyiniz akkoru aşağıya doğru saxlayın. Bu, düzəltməyi ümid etdiyimiz bir səhvdir.

Tam strumun kodu burada əlavə edilmiş script.js faylında və lonekorean tərəfindən diffcam mühərriki burada.

Addım 3: Akkord Tanıma

Növbəti kodlaşdırma mərhələsi, akkordun tanınmasını canlı idarə etmək üçün bir yol tapmaq idi.

İstifadəçinin həqiqi akkord şəkillərini təkrarlaya bilməsini və buna görə də əllərin yaxşı yerləşdirilməsini tətbiq etməsini və fərqli akkordlar tətbiq etməsinə kömək etməsini istədim.

Son addımda olduğu kimi, akkord tanınması üçün Machine Learning -i sınadım, amma cib telefonlarında çox yavaş idi.

Daha sonra Real Guitar tətbiqindən bir şey öyrəndim ki, akkord şəkilləri yaratmaq üçün ekrandan istifadə edərək telefon ekranında bir lövhə yerləşdirə bilərsiniz.

Sonra JavaScript-də çox toxunuşlu qarşılıqlı əlaqəyə icazə verməyi öyrənməli oldum və Mozilla'nın sənədlərindən zəhmli bir dərs və nümunə tapdım

Toxunma əlaqələri xüsusilə Javascript -də çətin ola bilər, amma fikir budur ki, müəyyən divs yarada və sonra fərqli toxunma hadisələrini idarə etmək üçün funksiyaları təyin edə bilərik:

1. touchStart: Bir barmaq ekrana toxunduqda

2. touch End: barmaq ayrıldıqda

3. touchMove: Barmaq hələ də ekranda olsa da, mövqeyi dəyişəndə

Daha sonra fərqli toxunma hadisələrinə və birləşmələrinə cavab verən öz elementlərimizi təyin etmək üçün bu funksiyalar üzərində işləyirik.

Bizim vəziyyətimizdə, CSS -dən istifadə edərək və sonra Javascriptdən istifadə edərək lövhə hazırlayırıq, tətbiqə bildiririk ki, müəyyən div -lər bir -birinə basıldıqda bir akkord tanınmalıdır.

Daha sonra akkordun keçəcəyi bir səs obyekti təyin edə bilərik və sonra sürüşmə hadisəsi baş verdikdə həmin səsi səsləndirə bilərik.

Fərqli akkord birləşmələrini təyin etmək üçün bu görüntünü istifadə edərək lövhəni düzəltdim və sonra hər bir xüsusi mövqeyi başqalarına toxuna biləcəyim və birləşdirə biləcəyim bir div olaraq təyin etdim.

Akkordun irəliləyişini təyin etmək üçün kod burada və lövhə nəzarətçisi əlavə edilmiş kodda tapılmışdır.

Addım 4: Akkord Səslərini Tapın

İndi sistemimizi tanımaq üçün qurulduğundan, bəzi həqiqi akkord səslərinə ehtiyacımız var.

Şükürlər olsun ki, freesound.com həmişə səs nümunələrinə ehtiyac duyduğum zaman köməyimə gəlir. Sadəcə akkordlar axtardım və danglada tərəfindən inanılmaz böyük akkordlar paketi tapdım.

Daha sonra onları yüklədim və cəsarətlə redaktə etdim ki, səs yazılarkən əksəriyyətinin başında qısa fasilə deyil, dərhal başlamış olsun.

Onları cəsarətlə kəsmək üçün sadəcə tətbiqə sürüklədim, sonra istədiyim səsin hissəsini seçdim (bütün dalğalı hissə və səssiz düz xətt hissələrinin heç biri). Daha sonra Düzenle sekmesine keçin> Xüsusi Sil> Səsi kəsin. Sonra Parçalar sekmesine girdim> Parçaları Hizalayın> Sıfıra Başlayın. Sonra fayla gedin, sonra İxrac et> WAV olaraq ixrac et.

WAV olaraq ixrac edirəm, çünki Javascript audio layihələrində işləmək daha asan oldu.

Daha sonra bu faylları yerləşdirmək üçün glitch.com -dan istifadə etdim, çünki onlarda fərqli layihələr üçün istifadə oluna biləcək inanılmaz bir məzmun çatdırılma şəbəkəsi var. Başqa bir seçim, kollecimin makerspace üçün makerspace inventar tətbiqi kimi daha çox məlumat əldə edə biləcək fərqli layihələr üçün mənim ehtiyacım olan firebase istifadə etmək ola bilər.

Sadəcə varlıqları layihə kataloquna sürükləyib buraxmalısınız və sonra aktiv qovluğuna tıkladığınızda və əldə etmək istədiyiniz aktivə tıkladığınızda bir link tapa bilərsiniz. Glitch sonra aktiviniz üçün unikal bir CDN url istehsal edəcək. Məsələn, burada əsas akkord səsinin bağlantısı var.

Daha sonra bütün bu akkordları müəyyən bir çaxnaşma mövqeyi kombinasiyasına basıldıqda axtarılan və sonra əllə sürüşmə hadisəsi baş verdikdə tətbiq üçün uyğun bir akkord təyin edən bir getChord funksiyasında birləşdirə bilərəm.

Addım 5: Bütün Tətbiqi bitirmək və yerləşdirmək

Hostingə getməyin bir çox yolu var.

Düzünü desəm, tapdığım ən yaxşısı sadəcə github istifadə etməkdir. Bunun səbəbi, bir proqramı yaxşı proqramlaşdırmısınızsa, bütün arxa ucunuzu bir verilənlər bazası və ya firebase -dən yanğınsöndürmə mağazası ilə təmin etməyi və ya hətta aktivləri saxlamaq üçün glitch.com və digər yerlərdən bir CDN istifadə edə bilərsiniz.

Layihəni github -da keçirmək üçün bir github hesabı açmaq, yeni bir depo etmək kifayətdir. Daha sonra qurulmasını asanlaşdırmaq üçün, layihə adınızı qoyduqdan sonra həmişə bir lisenziya əlavə etdiyinizə əmin olun (mütəxəssis deyiləm, amma həyatımı asanlaşdırdığını gördüm). Həmişə GNU kimi ictimai bir lisenziyadan istifadə edirəm.

Depo qurulduqdan sonra sənədlərimizi depoya sürükləyib ata bilərik və altındakı yaşıl öhdəlik düyməsini vura bilərik.

Daha sonra ulduzun altındakı depo səhifəsinin sağında dişli simvolu olan Ayarlar sekmesine gedirik və izləmə düymələri. Ayarlardan sonra, Github Səhifələri qutusunu görənə qədər aşağı diyirləyin. Mənbəni ana filiala dəyişdirin və istəsəniz bir mövzu seçin. Mövzuları googling edərək necə istifadə edəcəyinizi öyrənə bilərsiniz (heç istifadə etmirəm, çünki tez -tez öz CSS və mövzu fikirlərimi gətirirəm).

Səhifə hazır olduqda, yaşıl bir məqam alacaqsınız və saytınızın yayımlandığını və ona daxil ola biləcəyinizi bildirən işarəni vuracaqsınız.

Addım 6: Tamamlandı

İndi qulaqlıqlarınızın, yataq otağınızın və ya qatarın rahatlığında möhtəşəm bir cem seansından zövq ala bilərsiniz. İstəsəniz daha çox ton əlavə edin və hətta gitara çəngəl mövqeləri ilə oynayın.

Hərəkət Algılama haqqında qısa bir qeyd

1. Gitara çalma eşikləri script.js faylında tənzimlənə bilər, ancaq tətbiqdən istifadə edərkən telefonunuzun gördüyü fonun nisbətən sakit olduğuna əmin olun.

2. Məsələn, qatarda oturub qulaqcıqlarınızı taxıb telefonunuzu içəri çevirməyiniz daha yaxşıdır ki, sərnişinlər ətrafınızda hərəkət etsələr telefon kamerası yalnız çox vaxt hərəkət etdiyinizi görə bilər.

3. Telefonu tutan əlin eşiyinizdən asılı olaraq nisbətən hərəkətsiz olması lazımdır. Düşünürəm ki, yüksək bir eşiklə bəzi testlər keçirəcəyəm və daha konkret olmaq üçün irəlidəki limitləri yeniləyəcəyəm.

Oynamaq:

Tətbiqi veb brauzerinizə yükləyin, sonra mənzərə rejiminə keçirin.

Sonra əlinizi yelləyərkən bir akkord çalacaq, ancaq sağ alt küncdəki F düyməsinə toxunana qədər çalmağa davam edəcək.

Alternativ olaraq, akkord birləşməsi edərək səsi dayandıra bilərsiniz.

Bir akkord birləşməsi hazırladığınız zaman cari səs dayanır, sonra yeni bir akkord səsi seçilir.

Addım 7: Öyrənilənlər və Son Sözlər

Digər layihələr və ev işləri üzərində işləyərkən tətbiqin prototipini hazırlamaq və istehsal etmək çox uzun çəksə belə bu layihə üzərində işləməyi çox sevirdim. Yol boyu bir neçə zəhmli şey öyrəndim;

1. Rəqəmsal məhsullar tərtib edərkən, həmişə prototiplərinizi mümkün qədər tez hazırladığınızdan əmin olun, çünki ilk fərziyyələriniz səhv olacaq və sona çatmaq üçün onları sürətlə keçməlisiniz.

2. Bir layihəyə pul xərcləməkdən mümkün qədər çəkinin. Həmişə bacardığınız şeyi yenidən istifadə edin və əlinizdə olan sadə şeylərlə başlayın.

3. Yeni dillər, çərçivələr və sistemlər öyrənməkdən qorxmayın. Çox vaxt əvvəlcə düşündüyünüzdən daha asandır.

Və xəyallarımı gerçəkləşdirdiyinə görə lonekorea böyük təşəkkürlər

Tətbiqin necə inkişaf edəcəyi ilə maraqlanırsınızsa, poçt siyahımıza qoşula bilərsiniz. Kiçik bir komanda və mən dağılmış, səyahət edən və ya gənc uşaqların harada olsalar da möhtəşəm portativ gitara əldə etmələrinə kömək etmək üçün tam versiya hazırlamaq üçün çalışacağıq.

Xüsusilə qrafik dizaynerlərdən, gitaristlərdən və kodlayıcılardan hər şeyi sınamaq və həll etmək üçün kömək istəyərdik.

Zövq alın (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)