แอร์ - กีต้าร์โปร่ง True Mobile (ต้นแบบ): 7 สเต็ป (มีรูปภาพ)

2024 ผู้เขียน: John Day | [email protected]. แก้ไขล่าสุด: 2024-01-30 13:02

เอาล่ะ

นี่จะเป็นคำแนะนำสั้น ๆ เกี่ยวกับส่วนแรกของการเข้าใกล้ความฝันในวัยเด็กของฉันในที่สุด

เมื่อฉันยังเป็นเด็ก ฉันมักจะดูศิลปินและวงดนตรีที่ฉันชอบเล่นกีตาร์อย่างไร้ที่ติ

เมื่อฉันโตขึ้น ฉันรู้สึกขอบคุณมากที่ได้เรียนรู้วิธีเล่นกีตาร์และแม้แต่เล่นกีตาร์ของคนอื่น แต่ก็ยังไม่มีของตัวเอง:(ดังนั้นฉันจึงตัดสินใจนั่งลงและทำกีตาร์ที่ใช้งานได้อย่างสมบูรณ์บนโทรศัพท์ ใช้คอมพิวเตอร์วิทัศน์และให้คนอย่างฉันที่ต้องการกีตาร์ แต่อาจจะกำลังเดินทาง ยากจน หรือเด็กเกินไปที่จะได้มันมาซักตัว!

คุณสามารถค้นหาแอปต้นแบบได้ที่เว็บไซต์นี้

หากต้องการดูวิธีการเล่น ให้ไปที่ขั้นตอน "เสร็จสิ้น"

* อย่าลืมใช้โทรศัพท์และหมุนหน้าจอไปด้านข้างเป็นโหมดแนวนอน *

สนุก!

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

เสบียง:

1. สมาร์ทโฟน

2. คอมพิวเตอร์ตั้งโต๊ะหรือโน้ตบุ๊ก (สำหรับการเขียนโปรแกรม)

ขั้นตอนที่ 1: ความเป็นมาและหมายเหตุเกี่ยวกับรหัส

โปรเจ็กต์นี้ส่วนใหญ่เป็นโปรเจ็กต์โค้ดที่มุ่งเป้าไปที่การทำงานทั้งหมดบนโทรศัพท์

ในการทำโปรเจ็กต์นี้ ฉันได้ลองใช้แอพอื่น ๆ และค้นหาอุปกรณ์อื่น ๆ ในตลาดในปัจจุบัน เช่น กีตาร์ AirJamz หรือ Kurv กีตาร์แบบพกพา หรือแม้แต่แอพ Real Guitar บน play store

ปัญหาที่ฉันพบว่าขาดในหลายๆ ปัญหาคือ:

1. อุปกรณ์ภายนอกบางอย่างที่จำเป็น

2. แอพเกือบทั้งหมดไม่อนุญาตให้คุณเล่นคอร์ดหรือเพลงจริง ๆ และเป็นเพียงการจำลองกระดานไม่สบายใจ

3. อุปกรณ์ภายนอกค่อนข้างแพง และนักกีตาร์หลายคนแนะนำให้ซื้อกีตาร์ของจริงเลย

เหล่านี้เป็นภาพในภาพที่แนบมา

ดังนั้นแอป Air จึงต้องแก้ปัญหาเหล่านี้ในขณะที่ทำงานบนโทรศัพท์ได้ทั้งหมด ฉันเชื่อว่าสิ่งนี้เป็นไปได้เพราะในปี 2020 เรามีเทคโนโลยีเบราว์เซอร์บนมือถือที่ดีกว่ามาก และการปรับปรุงหลายอย่างในการมองเห็นด้วยคอมพิวเตอร์ ที่ทำให้เราสามารถทำสิ่งมหัศจรรย์ด้วยกล้อง RGB เพียงตัวเดียว

ดังนั้นฉันจึงทำสเก็ตช์ว่ามันจะมีลักษณะอย่างไรและจะทำงานอย่างไรก่อนที่จะเริ่มต้นอย่างสมบูรณ์

ฉันยังดึงหลักสำคัญของฉันในการเขียนโค้ดออกมาด้วย ดังนั้นในคำแนะนำนี้ แทนที่จะทำให้คุณเบื่อกับโค้ด ฉันจะพาคุณผ่านขั้นตอนการออกแบบของฉันและแนบโค้ดที่มีคำอธิบายประกอบในตอนท้ายเพื่อให้คุณอ่านและดูหากต้องการ

รหัสทั้งหมดสามารถพบได้ที่ https://github.com/msimbao/air และฉันขอแนะนำให้จัดโครงสร้างไฟล์รหัสของคุณในลักษณะนี้

โปรดทราบด้วยว่าแอปจะทำงานได้ ต้องโฮสต์แอปนั้นด้วย จนถึงตอนนี้ฉันพบว่ามันทำงานเมื่อโฮสต์บน github เท่านั้น:)

ขั้นตอนที่ 2: การดำเนินการดีด

หลักสำคัญประการแรกในการเข้ารหัสคือการหาวิธีจำลองการดีดแบบดิจิทัลโดยไม่มีขอบภายนอก ความคิดทันทีของฉันคือการใช้กล้องด้านหน้า RGB ของโทรศัพท์ของฉัน

ความคิดของฉันคือถ้าคนมีคอร์ดที่ต้องการเล่น เมื่อพวกเขาปัดมือไปหน้ากล้อง จะมีเสียงเล่น

หลังจากหาคำตอบได้แล้ว ฉันก็ต้องการภาษาการเขียนโปรแกรมที่ดีที่สามารถใช้เพื่อเชื่อมต่อกับกล้อง RGB ได้ดี

ฉันเลือกใช้ Javascript เพราะฉันสามารถสร้างแอปข้ามแพลตฟอร์มด้วย React Native หรืออย่างอื่น หรือสามารถโฮสต์กีตาร์บนเว็บไซต์และสามารถใช้ได้สำหรับทุกคน

จากนั้นฉันก็พบวิธีต่างๆ ในการค้นหาวิธีการปัดมือเพื่อกระตุ้นการกระทำที่อาจเป็นเสียงคอร์ดที่กำลังเล่นอยู่ แต่มีหลายวิธีในการทำเช่นนี้

แมชชีนเลิร์นนิงทำงานได้ดีมากเมื่อฉันลองใช้บริการของ IBM และฝึกฝนรูปภาพประมาณ 3,000 ภาพในหนึ่งสัปดาห์เพื่อการจดจำการปัดและการรู้จำคอร์ด ฉันยังลองใช้ handtrack.js โดย victordibia น่าเสียดายที่พวกเขาทั้งคู่ทำงานช้าอย่างไม่น่าเชื่อบนโทรศัพท์มือถือ

จากนั้นฉันก็สะดุดกับการตรวจจับการเคลื่อนไหวและการใช้งานโดยคนโดดเดี่ยวที่ diffcam.com ฉันได้เรียนรู้ว่าสามารถใช้เว็บแคมเพื่อบันทึกเฟรมสองเฟรมแยกจากกัน จากนั้นจึงคำนวณความแตกต่างระหว่างเฟรมและให้คะแนนความแตกต่าง หากคะแนนนั้นเกินเกณฑ์ที่กำหนด ฉันจะดำเนินการใดๆ

คนเกาหลีคนเดียวยังสร้างเครื่องยนต์สำหรับ diff cam ของเขาซึ่งฉันตัดสินใจใช้กับกีตาร์ Air และมันทำงานได้อย่างสมบูรณ์แบบเพื่อให้ฉันได้คะแนนการเคลื่อนไหว!

แนบเป็นรูปภาพของความพยายามในการฝึกโมเดลการเรียนรู้ด้วยเครื่องและตัวอย่าง diffcam.com ที่ฉันได้เรียนรู้

หมายเหตุ: ในโปรโตไทป์ปัจจุบันนี้ การ strumming ซ้ำแล้วซ้ำเล่า เพื่อหยุดมัน เพียงแค่กดคอร์ดที่คุณต้องการเล่นต่อไป นี่เป็นข้อบกพร่องที่เราหวังว่าจะแก้ไขต่อไป

รหัสสำหรับ strum แบบเต็มมีอยู่ในไฟล์ script.js ที่แนบมาที่นี่ และเครื่องมือ diffcam โดย lonekorean อยู่ที่นี่

ขั้นตอนที่ 3: การรับรู้คอร์ด

ขั้นต่อไปของการเข้ารหัสคือการหาวิธีจัดการกับการจดจำคอร์ดแบบสด

ฉันต้องการให้ผู้ใช้สามารถจำลองรูปร่างคอร์ดจริงได้ ดังนั้นฝึกการจัดวางมือที่ดีและช่วยให้พวกเขาฝึกคอร์ดต่างๆ

เช่นเดียวกับขั้นตอนที่แล้ว ฉันลองใช้การเรียนรู้ด้วยเครื่องเพื่อจดจำคอร์ด แต่บนโทรศัพท์มือถือช้ามาก

จากนั้นฉันก็ได้เรียนรู้บางอย่างจากแอป Real Guitar ที่อาจเป็นไปได้ที่จะวาง fretboard บนหน้าจอโทรศัพท์โดยใช้หน้าจอเพื่อสร้างรูปร่างคอร์ด

ฉันต้องเรียนรู้วิธีอนุญาตการโต้ตอบแบบมัลติทัชในจาวาสคริปต์ และพบบทช่วยสอนและตัวอย่างที่ยอดเยี่ยมจากเอกสารของ Mozilla

การโต้ตอบด้วยการแตะอาจทำได้ยากโดยเฉพาะใน Javascript แต่แนวคิดก็คือ เราสามารถสร้าง div บางตัวแล้วกำหนดฟังก์ชันเพื่อจัดการกับเหตุการณ์การสัมผัสต่างๆ ได้:

1. touchStart: เมื่อนิ้วแตะหน้าจอ

2. touchEnd: เมื่อนิ้วออก

3. touchMove: เมื่อนิ้วยังคงอยู่บนหน้าจอแต่เปลี่ยนตำแหน่ง

จากนั้นเราจะแก้ไขฟังก์ชันเหล่านั้นเพื่อกำหนดองค์ประกอบของเราเองที่ตอบสนองต่อเหตุการณ์การสัมผัสและชุดค่าผสมต่างๆ

ในกรณีของเรา เราออกแบบ fret board โดยใช้ CSS จากนั้นใช้ Javascript บอกแอปว่าเมื่อกด div บางตัวเข้าด้วยกัน คอร์ดควรเป็นที่รู้จัก

จากนั้นเราสามารถกำหนดออบเจกต์เสียงที่เราจะส่งคอร์ดไปให้แล้วเล่นเสียงนั้นเมื่อเกิดเหตุการณ์การปัดขึ้น

ในการกำหนดชุดคอร์ดที่แตกต่างกัน ฉันสร้างเฟรตบอร์ดโดยใช้ภาพนี้ แล้วตั้งค่าตำแหน่งพิเศษแต่ละตำแหน่งให้เป็น div ที่ฉันสามารถสัมผัสและรวมเข้ากับคนอื่นๆ ได้

พบรหัสสำหรับกำหนดความก้าวหน้าของคอร์ดได้ที่นี่ และพบตัวควบคุม fretboard ในโค้ดที่แนบมา

ขั้นตอนที่ 4: ค้นหาคอร์ดเสียง

ตอนนี้ระบบของเราได้รับการตั้งค่าให้รู้จักแล้ว เราต้องการเสียงคอร์ดที่แท้จริง

โชคดีที่ freesound.com เข้ามาช่วยเหลือฉันเสมอเมื่อฉันต้องการตัวอย่างเสียง ฉันเพียงแค่ค้นหาคอร์ดและพบคอร์ดหลักที่น่าทึ่งโดย danglada

จากนั้นฉันดาวน์โหลดและแก้ไขโดยใช้ความกล้าเพื่อให้แน่ใจว่าเสียงเริ่มต้นทันที แทนที่จะหยุดชั่วคราวสั้นๆ ในช่วงเริ่มต้นของเสียงส่วนใหญ่ขณะบันทึกเสียง

ในการคลิปโดยใช้ความกล้า ฉันเพียงแค่ลากมันเข้าไปในแอพแล้วเลือกส่วนของเสียงที่ฉันต้องการ (ส่วนที่เป็นคลื่นทั้งหมดและไม่มีส่วนเส้นแบนที่ไม่มีเสียง) จากนั้นไปที่แท็บ แก้ไข > ลบแบบพิเศษ > ตัดแต่งเสียง จากนั้นฉันก็ไปที่แท็บ Tracks > Align Tracks > Start to Zero จากนั้นไปที่ไฟล์ ตามด้วย ส่งออก > ส่งออกเป็น WAV

ฉันส่งออกเป็น WAV เพราะพบว่ามันง่ายกว่าที่จะจัดการกับโปรเจ็กต์เสียง Javascript

จากนั้นฉันก็ใช้ glitch.com เพื่อโฮสต์ไฟล์เหล่านี้ เพราะมีเครือข่ายการจัดส่งเนื้อหาที่น่าทึ่ง ซึ่งสามารถใช้สำหรับโปรเจ็กต์ต่างๆ ที่คุณมี อีกทางเลือกหนึ่งคือการใช้ firebase ซึ่งเป็น goto ของฉันสำหรับโปรเจ็กต์ต่างๆ ที่อาจมีข้อมูลเพิ่มเติมในการจัดเก็บ เช่น แอปสินค้าคงคลังของ makerspace สำหรับพื้นที่ผู้ผลิตในวิทยาลัยของฉัน

คุณเพียงแค่ลากและวางเนื้อหาไปยังไดเร็กทอรีโครงการ จากนั้นคุณจะพบลิงก์เมื่อคุณคลิกโฟลเดอร์เนื้อหาและคลิกเนื้อหาที่คุณต้องการรับ Glitch จะสร้าง URL CDN ที่ไม่ซ้ำกันสำหรับเนื้อหาของคุณ ตัวอย่างเช่น นี่คือลิงค์ไปยังเสียง A major Chord

จากนั้นฉันสามารถเชื่อมโยงคอร์ดเหล่านี้เข้าด้วยกันในฟังก์ชัน getChord ที่จะค้นหาเมื่อมีการกดรวมกันของตำแหน่งที่ทำให้ไม่สบายใจ จากนั้นกำหนดคอร์ดที่เหมาะสมสำหรับแอปที่จะเล่นเมื่อเกิดเหตุการณ์การปัดด้วยมือ

ขั้นตอนที่ 5: เสร็จสิ้นและโฮสต์แอพทั้งหมด

มีหลายวิธีในการโฮสต์

จริงๆ แล้วสิ่งที่ดีที่สุดที่ฉันพบคือการใช้ github เนื่องจากหากคุณตั้งโปรแกรมแอปไว้อย่างดี คุณสามารถทำให้ฐานข้อมูลหรือ firestore ใช้งานได้จากฐานข้อมูลหรือ firebase หรือแม้แต่ใช้ CDN จาก glitch.com และที่อื่นๆ เพื่อจัดเก็บเนื้อหา

ในการโฮสต์โครงการบน GitHub สิ่งที่คุณต้องทำคือเปิดบัญชี GitHub สร้างที่เก็บใหม่ จากนั้นเพื่อให้ตั้งค่าได้ง่ายขึ้น หลังจากที่คุณใส่ชื่อโครงการแล้ว อย่าลืมเพิ่มใบอนุญาตเสมอ (ฉันไม่ใช่ผู้เชี่ยวชาญ แต่ฉันพบว่ามันทำให้ชีวิตของฉันง่ายขึ้น) ฉันมักจะใช้ใบอนุญาตสาธารณะเช่น GNU

เมื่อตั้งค่าที่เก็บแล้ว เราสามารถลากและวางไฟล์ของเราลงในที่เก็บแล้วคลิกปุ่มคอมมิตสีเขียวที่ด้านล่าง

จากนั้นไปที่แท็บการตั้งค่าด้วยไอคอนรูปเฟืองที่ด้านขวาสุดของหน้าพื้นที่เก็บข้อมูลใต้ปุ่มรูปดาวและนาฬิกา เมื่ออยู่ในการตั้งค่า ให้เลื่อนลงมาจนกว่าคุณจะเห็นกล่อง Github Pages เปลี่ยน Source เป็น master branch และเลือกธีมหากต้องการ คุณสามารถเรียนรู้วิธีใช้ธีมโดยค้นหาจากกูเกิล (ฉันไม่เคยใช้เลยเพราะฉันมักจะนำแนวคิด CSS และธีมมาเอง)

เมื่อหน้าพร้อม คุณจะได้รับไฮไลต์สีเขียวและทำเครื่องหมายเพื่อแจ้งว่าไซต์ของคุณได้รับการเผยแพร่และสามารถเข้าถึงได้

ขั้นตอนที่ 6: เสร็จสิ้น

ตอนนี้คุณสามารถเพลิดเพลินกับเซสชั่นแจมที่ยอดเยี่ยมในความสะดวกสบายของหูฟัง ห้องนอนหรือบนรถไฟของคุณเอง เพิ่มคอร์ดเพิ่มเติมหากต้องการและลองเล่นตำแหน่งเฟรตกีตาร์

บันทึกย่อเกี่ยวกับการตรวจจับการเคลื่อนไหว

1. เกณฑ์สำหรับการปัดนิ้วของกีตาร์สามารถปรับได้ในไฟล์ script.js แต่ต้องแน่ใจว่าเมื่อคุณใช้แอป พื้นหลังที่โทรศัพท์ของคุณเห็นจะค่อนข้างนิ่ง

2. ตัวอย่างเช่น ในรถไฟ ควรนั่งและสวมหูฟังและเปิดโทรศัพท์เข้าด้านใน เพื่อที่ว่าหากผู้โดยสารเคลื่อนที่ไปรอบๆ ตัวคุณ กล้องโทรศัพท์จะมองเห็นได้เฉพาะมือของคุณเคลื่อนที่เกือบตลอดเวลา

3. มือที่จับโทรศัพท์จะต้องนิ่งขึ้นอยู่กับเกณฑ์ของคุณ ฉันคิดว่าฉันจะทำการทดสอบบางอย่างที่มีขีดจำกัดสูงและอัปเดตขีดจำกัดในอนาคตให้มีความเฉพาะเจาะจงมากขึ้น

เล่น:

โหลดแอปบนเว็บเบราว์เซอร์ของคุณ จากนั้นเอียงแอปเป็นโหมดแนวนอน

จากนั้นเมื่อคุณแกว่งมือ คอร์ดจะเล่น อย่างไรก็ตาม จะเล่นต่อไปจนกว่าคุณจะแตะปุ่ม F ที่มุมขวาล่าง

อีกวิธีหนึ่ง คุณสามารถหยุดเสียงโดยสร้างคอร์ดรวมกัน

เมื่อคุณสร้างคอร์ดผสม เสียงปัจจุบันจะหยุด จากนั้นเสียงคอร์ดใหม่จะถูกเลือก

ขั้นตอนที่ 7: สิ่งที่เรียนรู้และคำพูดสุดท้าย

ฉันชอบทำงานในโครงการนี้มากแม้ว่าจะใช้เวลานานในการสร้างต้นแบบและได้แอปที่ผลิตขึ้นในขณะที่ทำงานในโครงการอื่นและทำการบ้าน ฉันได้เรียนรู้สิ่งที่ยอดเยี่ยมสองสามอย่างระหว่างทางเช่นกัน

1. เมื่อออกแบบผลิตภัณฑ์ดิจิทัล ตรวจสอบให้แน่ใจเสมอว่าสร้างต้นแบบของคุณให้เร็วที่สุดเท่าที่เป็นไปได้ เพราะสมมติฐานแรกของคุณจะผิด และคุณจำเป็นต้องดำเนินการอย่างรวดเร็วเพื่อไปยังจุดสิ้นสุด

2. หลีกเลี่ยงการใช้จ่ายเงินในโครงการให้มากที่สุด นำสิ่งที่คุณทำได้มาใช้ซ้ำเสมอ และเริ่มต้นด้วยสิ่งง่ายๆ ที่คุณมีอยู่เสมอ

3. อย่ากลัวที่จะเรียนรู้ภาษา เฟรมเวิร์ก และระบบใหม่ๆ มักจะง่ายกว่าที่คุณคิดในตอนแรก

และขอบคุณมากสำหรับคนโดดเดี่ยวที่ทำให้ความฝันของฉันเป็นจริง

หากคุณสนใจในการพัฒนาแอป คุณสามารถเข้าร่วมรายชื่อผู้รับจดหมายของเรา ผมและทีมเล็กๆ จะทำงานกันเพื่อสร้างเวอร์ชันเต็มเพื่อช่วยให้ผู้ที่ยากจน เดินทาง หรือเด็กเล็กได้เข้าถึงกีตาร์พกพาที่ยอดเยี่ยมไม่ว่าจะอยู่ที่ใด

เราต้องการความช่วยเหลือเป็นพิเศษจากนักออกแบบกราฟิก นักกีตาร์ และผู้เขียนโค้ดเพื่อทดสอบและวิเคราะห์ทุกอย่าง

สนุก (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧ ·: *ヽ(◕ヮ◕ヽ)