Агаар - Жинхэнэ гар утасны гитар (прототип): 7 алхам (зурагтай)

2024 Зохиолч: John Day | [email protected]. Хамгийн сүүлд өөрчлөгдсөн: 2024-01-30 11:00

За яахав, Энэ бол миний бага насны мөрөөдөлдөө ойртох эхний хэсгийн тухай үнэхээр богино зааварчилгаа байх болно.

Би бага байхдаа дуртай уран бүтээлчид, хамтлагуудынхаа гитарыг гайхалтай тоглож байхыг үргэлж хардаг байсан.

Би өсч том болсон хойноо гитар тоглож сурч, бусдын эзэмшдэг заримыг тоглож сурсандаа талархаж байсан ч өөрийн гэсэн тоглоомтой болоогүй л байна:(Тиймээс би эцэст нь суугаад утсаараа бүрэн ажилладаг, компьютерийн алсын харааг ашигладаг, над шиг гитар хүсдэг, гэхдээ аялж яваа, эвдэрсэн эсвэл хэтэрхий залуу байгаа хүмүүст гитар авахыг зөвшөөрдөг!

Прототип програмыг энэ вэбсайтаас олж болно

Хэрхэн тоглохыг харахын тулд "Чи дууслаа" алхам руу орно уу.

* Үүнийг утсан дээрээ заавал ашиглаж, дэлгэцийг хажуу тийш нь ландшафтын горимд шилжүүлээрэй *

Зугаацаарай!

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

Хангамж:

1. Ухаалаг утас

2. Ширээний компьютер эсвэл зөөврийн компьютер (Програмчлалын хувьд)

Алхам 1: Кодын үндсэн мэдээлэл ба тэмдэглэл

Энэхүү төсөл нь ихэнхдээ утсан дээр ажиллуулах зорилготой кодчилсон төсөл юм.

Энэхүү төслийг хэрэгжүүлэхийн тулд би өөр бусад програмуудыг туршиж үзээд одоогоор зах зээл дээр байгаа AirJamz эсвэл Kurv гитар, зөөврийн гитар эсвэл тоглоомын дэлгүүр дээрх Real гитарын програм гэх мэт бусад төхөөрөмжийг хайж үзсэн.

Тэдний олонх нь надад дутагдаж байсан асуудлууд нь:

1. Зарим шаардлагатай гадаад төхөөрөмжүүд

2. Бараг бүх аппликейшн нь танд жинхэнэ хөвч, хөгжим тоглохыг зөвшөөрөөгүй бөгөөд зүгээр л сандал симулятор байсан

3. Гадны төхөөрөмжүүд нь маш үнэтэй байсан бөгөөд олон гитарчин жинхэнэ гитар худалдаж авахыг санал болгов

Эдгээрийг дагалдах зурган дээр дүрсэлсэн болно.

Тиймээс Air аппликейшн нь эдгээр асуудлыг шийдэх ёстой бөгөөд утсаараа ажиллах боломжтой болно. Энэ нь боломжтой гэж би үзэж байна, учир нь 2020 онд гар утасны хөтөчийн технологи илүү сайжирч, компьютерын алсын хараа сайжирсан нь бидэнд нэг RGB камераар гайхамшгийг бүтээх боломжийг олгоно.

Тиймээс би бүрэн эхлэхээс өмнө энэ нь хэрхэн харагдах, хэрхэн ажиллах талаар зарим тоймыг хийлээ.

Би бас кодлох үе шатуудаа гаргаж өгсөн тул зааварчилгаа өгөхдөө кодоор уйтгарлахын оронд би дизайныхаа явцыг дамжуулж, тайлбарыг нь хавсаргаж, шаардлагатай бол уншиж, харах болно.

Кодыг бүхэлд нь https://github.com/msimbao/air дээрээс олж авах боломжтой бөгөөд үүнтэй төстэй кодын файлуудыг бүтээхийг зөвлөж байна.

Мөн апп ажиллуулахын тулд түүнийг байршуулах шаардлагатайг анхаарна уу. Би үүнийг одоогоор github дээр байршуулах үед л ажиллуулахыг олж мэдсэн.:)

Алхам 2: Хүчтэй үйлдэл

Кодлох анхны чухал үе шат бол гадны захгүйгээр дижитал хэлбэрээр хуулбарлах аргыг олох явдал байв. Миний нэн даруй бодож байсан зүйл бол утасныхаа урд талын RGB камерыг ашиглах явдал байв.

Миний бодлоор хэрэв хүн тоглохыг хүсч буй аккордтой бол камерынхаа өмнө гараа шударвал дуу гарах болно.

Үүнийг олж мэдсэний дараа надад RGB камертай сайн харилцах сайн програмчлалын хэл хэрэгтэй байсан.

Би React Native эсвэл өөр ямар нэгэн зүйл ашиглан платформ ашиглан хөндлөн платформ хийх эсвэл зүгээр л гитарыг вэбсайт дээр байрлуулах боломжтой байсан тул хүн бүрт ашиглах боломжтой байсан тул би Javascript-ийг сонгосон.

Дараа нь би гараар шудрах, аккордын дуу тоглож болох үйлдлийг өдөөх арга замыг олж мэдсэн боловч үүнийг хийх олон арга байсан.

IBM -ийн үйлчилгээг туршиж үзээд долоо хоногт 3000 орчим дүрсийг шударч таних, хөвч таних чиглэлээр сургахад машин сурах нь маш сайн ажилласан. Би бас handtrack.js -ийг Vikordibia ашиглан туршиж үзсэн. Харамсалтай нь тэд хоёулаа гар утсандаа итгэмээргүй удаан байсан.

Дараа нь би diffcam.com дээрх хөдөлгөөнийг илрүүлэх, ганцаарчилсан хэлний хэрэгжилтийг олж харав. Вэбкамыг ашиглан хоёр тусдаа фрэйм бичиж, дараа нь фрэймийн ялгааг тооцоолж, ялгааг оноо өгөх боломжтой гэдгийг би мэдсэн. Хэрэв энэ оноо тодорхой босгыг давсан бол би үйлдэл хийнэ.

Ганц бие хүн дифференциал камерынхаа хөдөлгүүрийг би хий гитар дээр ашиглахаар шийдсэн бөгөөд энэ нь надад хөдөлгөөний оноог авахад маш сайн ажилласан!

Машины сургалтын загварыг сургах оролдлогын зургууд, мөн миний сурсан diffcam.com -ийн жишээг хавсаргав.

Тэмдэглэл: Энэхүү одоогийн загвар дээр страмминг дахин дахин давтагддаг бөгөөд үүнийг зогсоохын тулд тоглохыг хүсч буй хөвчөө доош нь дараарай. Энэ бол бидний засч залруулах гэж найдаж буй алдаа юм.

Бүтэн страмын кодыг энд хавсаргасан script.js файлд байгаа бөгөөд lonekorean -ийн diffcam хөдөлгүүр энд байна.

Алхам 3: Аккорд таних

Дараагийн кодлох үе шат бол хөвч таних ажиллагааг шууд дамжуулах арга замыг олох явдал байв.

Би хэрэглэгчийг хөвчний жинхэнэ хэлбэрийг хуулбарлаж, гараа сайн байрлуулж, өөр өөр хөвч тоглоход нь туслахыг хүсч байсан.

Сүүлийн алхам шиг би хөвч таних зорилгоор Machine learning -ийг туршиж үзсэн боловч гар утсанд маш удаан байсан.

Дараа нь би жинхэнэ гитар програмаас утасны дэлгэц дээр самбар байрлуулж, хөвч хэлбэрийг бий болгохын тулд ямар нэгэн зүйл сурч мэдсэн юм.

Дараа нь би javascript дээр олон мэдрэгчтэй харилцан үйлчлэлийг хэрхэн зөвшөөрөх талаар сурах ёстой байсан бөгөөд Mozilla-ийн docs-аас гайхалтай заавар, жишээ олсон.

Мэдрэгчтэй харилцан үйлчлэл нь ялангуяа Javascript дээр төвөгтэй байж болох ч бид тодорхой div -үүдийг үүсгэж, өөр өөр мэдрэгчтэй үйл явдлуудыг зохицуулах функцуудыг тодорхойлох боломжтой гэсэн санаа юм.

1. touchStart: Хуруугаараа дэлгэцэнд хүрэхэд

2. touchEnd: Хуруугаа орхиход

3. touchMove: Хуруугаа дэлгэцэн дээр хэвээр байгаа боловч байрлалаа өөрчлөх үед

Дараа нь бид янз бүрийн мэдрэгчтэй үйл явдал, хослолуудад хариу үйлдэл үзүүлэх өөрийн элементүүдийг тодорхойлохын тулд эдгээр функцуудыг тойрч ажилладаг.

Манай тохиолдолд бид CSS ашиглан, дараа нь Javascript ашиглан дэлгэцийн самбар зохион бүтээдэг бөгөөд тодорхой div -ийг дарахад хөвч таних ёстой гэдгийг апп -д хэлээрэй.

Дараа нь бид хөвч дамжуулах аудио объектыг тодорхойлж, шудрах үйл явдал тохиолдоход уг аудиог тоглуулж болно.

Аккордын өөр өөр хослолыг тодорхойлохын тулд би энэ зургийг ашиглан самбарыг хийж, дараа нь тусгай байрлал бүрийг дивэйр болгож, бусадтай нэгтгэж болно.

Хөвчийн явцыг тодорхойлох кодыг эндээс, хавтасны хянагчийг хавсаргасан кодоос олж болно.

Алхам 4: Аккордын дууг хайж олох

Одоо манай системийг танихаар тохируулсан тул бидэнд жинхэнэ хөвчний дуу хэрэгтэй байна.

Аз болоход freesound.com надад аудио дээж хэрэгтэй үед үргэлж надад тусалдаг. Би зүгээр л хөвч хайсан бөгөөд danglada -ийн гайхалтай том хөвчнүүдийн гайхалтай багцыг олсон.

Дараа нь би тэдгээрийг татаж аваад аудит хийх замаар засварлаж, дуу бичлэг хийж байх үед ихэнх нь богино хугацаанд зогсохоос илүүтэйгээр дуу нь шууд эхэлсэн эсэхийг шалгаарай.

Зоригтой байдлыг ашиглан клип хийхийн тулд би тэдгээрийг апп руу чирээд хүссэн дууныхаа хэсгийг сонгосон (долгионтой хэсэг, дуугүй хавтгай шугамын хэсгүүдийн аль нь ч биш). Би дараа нь Edit tab> Special Remove> Trim Audio руу очно уу. Дараа нь би Tracks tab> Tracks Align> Start to Zero руу орлоо. Би дараа нь файл руу очиж, дараа нь Экспорт> WAV хэлбэрээр экспортлох.

Би Javascript аудио төслүүдэд ажиллахад илүү хялбар болсон тул WAV хэлбэрээр экспорт хийдэг.

Дараа нь би glitch.com -ийг ашигласан бөгөөд эдгээр файлууд нь танд байгаа өөр өөр төслүүдэд ашиглах боломжтой гайхалтай контент дамжуулах сүлжээтэй байдаг. Өөр нэг сонголт бол өөр өөр төслүүдэд зориулагдсан firebase -ийг ашиглах явдал байж болох юм.

Та зүгээр л хөрөнгийг төслийн лавлах руу чирж хаях хэрэгтэй бөгөөд дараа нь та хөрөнгийн хавтас дээр дарж, авахыг хүссэн хөрөнгөө дарахад линкийг олох боломжтой болно. Глитч дараа нь таны хөрөнгийн өвөрмөц CDN url үйлдвэрлэх болно. Жишээлбэл, A major Chord дууны холбоос энд байна.

Дараа нь би эдгээр бүх хөвчүүдийг getChord функцэд холбож өгч болох бөгөөд энэ нь тодорхой байрлалын хослолыг дарах үед хайх бөгөөд дараа нь гараар шударах үйл явдал тохиолдоход апп -д тоглуулах зохих хөвчийг оноож өгч болно.

Алхам 5: Бүх програмыг дуусгах, байршуулах

Хостинг хийх олон арга бий.

Үнэнийг хэлэхэд миний олж мэдсэн хамгийн сайн зүйл бол зүгээр л github ашиглах явдал юм. Учир нь хэрэв та програмыг сайн програмчилсан бол арын хэсгийг нь мэдээллийн бааз эсвэл галын баазаас галын сангаар хангах, эсвэл glitch.com болон эд хөрөнгийг хадгалах бусад газруудын CDN -ийг ашиглах боломжтой болно.

Github дээр төслийг зохион байгуулахын тулд та github данс нээж, шинэ репозитор хийх хэрэгтэй. Дараа нь тохиргоог хялбарчлахын тулд төслийнхөө нэрийг оруулсныхаа дараа үргэлж лиценз нэмж оруулахаа мартуузай (би мэргэжилтэн биш боловч энэ нь миний амьдралыг хөнгөвчилдөг болохыг олж мэдсэн). Би үргэлж GNU шиг нийтийн лиценз ашигладаг.

Репозиторыг тохируулсны дараа бид файлуудаа репозитор руу чирж, доод талд байгаа ногоон үүрэг гүйцэтгэх товчийг дарна уу.

Дараа нь бид одны доор байрлах репозиторын хуудасны баруун талд байрлах арааны дүрс бүхий Тохиргоо таб руу очоод үзэх товчлуурыг дарна уу. Тохиргоонд орсны дараа Github Pages хайрцгийг харах хүртэл доош гүйлгэнэ үү. Эх сурвалжийг үндсэн салбар болгон өөрчилж, хэрэв хүсвэл сэдвийг сонгоно уу. Сэдвүүдийг googling хийснээр хэрхэн ашиглах талаар сурч болно (би өөрөө CSS болон сэдвийнхээ санааг байнга авчирдаг тул би хэзээ ч ашигладаггүй).

Хуудас бэлэн болмогц та ногоон өнгөөр тодрох бөгөөд таны сайт хэвлэгдсэн бөгөөд хандаж болохыг мэдэгдэнэ.

Алхам 6: Дууссан

Та одоо чихэвч, унтлагын өрөө эсвэл галт тэрэг дээр ая тухтай саатал авах боломжтой. Хэрэв та дуртай бол гитар нэмж тоглох боломжтой.

Хөдөлгөөн илрүүлэх талаархи хурдан тэмдэглэл

1. Гитар цохих босгыг скрипт.js файлд тохируулж болно, гэхдээ програмыг ашиглаж байх үед таны утасны харж буй дэвсгэр харьцангуй хэвээр байгаа эсэхийг шалгаарай.

2. Жишээлбэл, галт тэргэнд суугаад чихэвчээ зүүгээд утсаа дотогшоо эргүүлсэн нь дээр, хэрвээ зорчигчид таны эргэн тойронд хөдөлж байгаа бол утасны камер ихэнхдээ гар чинь хөдөлж байгааг л харах болно.

3. Утсаа атгах гар нь таны босго хэмжээнээс хамаарч харьцангуй хөдөлгөөнгүй байх шаардлагатай. Би өндөр босго бүхий зарим туршилтуудыг явуулж, илүү нарийвчлалтай байхын тулд хязгаарыг шинэчлэх болно гэж бодож байна.

Тоглох:

Вэб хөтөч дээрээ програмыг ачаалж, дараа нь ландшафтын горимд шилжүүлнэ үү.

Дараа нь та гараа савлахад хөвч тоглодог боловч баруун доод буланд байгаа F товчлуурыг дарах хүртэл тоглох болно.

Эсвэл та хөвчний хослол хийж дууг зогсоож болно.

Та хөвчний хослол хийх үед одоогийн дуу зогсох бөгөөд дараа нь шинэ хөвч дуу сонгогдоно.

Алхам 7: Сурсан зүйл ба эцсийн үгс

Бусад төсөл, гэрийн ажил дээр ажиллаж байхдаа програмыг бүтээх, үйлдвэрлэхэд удаан хугацаа шаардагдсан ч гэсэн би энэ төсөл дээр ажиллах үнэхээр дуртай байсан. Би замдаа хэд хэдэн гайхалтай зүйлийг сурсан;

1. Дижитал бүтээгдэхүүн зохион бүтээхдээ өөрийн анхны загварууд буруу байх тул та загваруудаа аль болох хурдан гаргахаа мартуузай.

2. Төсөлд мөнгө зарцуулахаас аль болох зайлсхий. Үргэлж чадах бүхнээ дахин ашиглаж, гартаа байгаа энгийн зүйлээс эхэл.

3. Шинэ хэл, хүрээ, систем сурахаас бүү ай. Тэд ихэвчлэн таны бодож байснаас хамаагүй хялбар байдаг.

Мөн миний мөрөөдлийг биелүүлсэн ганцаардсан хүнд маш их баярлалаа

Хэрэв та програм хэрхэн хөгжихийг сонирхож байвал манай имэйлийн жагсаалтад нэгдэж болно. Жижиг баг бид хоёр эвдэрсэн, аялах эсвэл бага насны хүүхдүүдэд хаана ч байсан гайхалтай зөөврийн гитар авах боломжийг олгохын тулд бүрэн хувилбар гаргахаар ажиллах болно.

График дизайнер, гитар тоглогч, кодлогч нараас бүх зүйлийг туршиж үзэхэд туслах нь бидэнд үнэхээр таалагдах болно.

Зугаацаарай (ﾉ ◕ ヮ ◕) ﾉ *: ･ ﾟ ✧ ･: *ヽ (◕ ヮ ◕ ヽ)