Air - True Mobile Air Guitar (Prototipe): 7 Langkah (dengan Gambar)

2024 Pengarang: John Day | [email protected]. Terakhir diubah: 2024-01-30 09:53

Oke jadi, Ini akan menjadi instruksi yang sangat singkat tentang bagian pertama dari akhirnya semakin dekat dengan impian masa kecil saya.

Ketika saya masih kecil, saya selalu melihat artis dan band favorit saya bermain gitar dengan rapi.

Ketika saya tumbuh dewasa, saya cukup bersyukur untuk belajar bermain gitar dan bahkan memainkan beberapa milik orang lain, tetapi masih belum memiliki milik saya:(Jadi saya memutuskan untuk akhirnya duduk dan membuat satu yang berjalan sepenuhnya di telepon, menggunakan visi komputer dan memungkinkan orang-orang seperti saya yang menginginkan gitar tetapi mungkin bepergian, bangkrut atau terlalu muda untuk mendapatkannya!

Anda dapat menemukan aplikasi prototipe di situs web ini

Untuk melihat cara bermain, buka Langkah "Selesai".

* Pastikan untuk menggunakannya di ponsel Anda dan putar layar ke samping ke mode lansekap *

Menikmati!

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

Perlengkapan:

1. Ponsel Pintar

2. Komputer Desktop atau Laptop (Untuk Pemrograman)

Langkah 1: Latar Belakang dan Catatan tentang Kode

Proyek ini sebagian besar merupakan proyek berkode yang ditujukan untuk berjalan sepenuhnya di telepon.

Dalam membuat proyek ini, saya mencoba berbagai aplikasi lain dan mencari perangkat lain yang saat ini ada di pasaran seperti gitar AirJamz atau Kurv, gitar portabel atau bahkan aplikasi Real Guitar di play store.

Masalah yang saya temukan kurang di banyak dari mereka adalah:

1. Beberapa perangkat eksternal yang dibutuhkan

2. Hampir semua aplikasi tidak benar-benar memungkinkan Anda memainkan akord atau musik yang sebenarnya dan hanya simulator papan fret

3. Perangkat Eksternal cukup mahal dan banyak gitaris merekomendasikan hanya membeli gitar yang sebenarnya

Ini digambarkan dalam gambar terlampir.

Jadi aplikasi Air harus menyelesaikan masalah ini sambil sepenuhnya dapat berjalan di telepon. Saya percaya ini mungkin karena pada tahun 2020 kami memiliki teknologi browser seluler yang jauh lebih baik dan banyak peningkatan dalam visi komputer yang memungkinkan kami melakukan keajaiban dengan satu kamera RGB.

Jadi saya melanjutkan untuk membuat beberapa sketsa seperti apa tampilannya dan bagaimana fungsinya sebelum memulai sepenuhnya.

Saya juga menggambar tonggak pengkodean saya sehingga dalam instruksi ini, alih-alih membuat Anda bosan dengan kode, saya akan membawa Anda melalui proses desain saya dan melampirkan kode beranotasi di bagian akhir untuk Anda baca dan lihat jika Anda perlu.

Seluruh kode dapat ditemukan di https://github.com/msimbao/air dan saya sarankan menyusun file kode Anda mirip dengan ini.

Perhatikan juga bahwa agar aplikasi berjalan, itu perlu di-host. Sejauh ini saya hanya menemukannya berjalan ketika di-host di github.:)

Langkah 2: Aksi Memetik

Tonggak pengkodean besar pertama, adalah menemukan cara untuk mereplikasi strum secara digital tanpa periferal eksternal. Pikiran langsung saya adalah menggunakan kamera depan RGB dari ponsel saya.

Pikiran saya adalah bahwa jika seseorang memiliki akord yang ingin mereka mainkan, maka ketika mereka menggesekkan tangan mereka di depan kamera mereka, sebuah suara akan dimainkan.

Setelah mengetahuinya, saya kemudian membutuhkan bahasa pemrograman yang baik yang dapat digunakan untuk berinteraksi dengan baik dengan kamera RGB.

Saya memilih Javascript karena saya bisa membuat aplikasi lintas platform dengan React Native atau yang lainnya atau hanya bisa meng-host gitar di situs web dan itu bisa tersedia untuk semua orang.

Saya kemudian menemukan berbagai cara untuk mengetahui cara mendapatkan sapuan tangan untuk memicu tindakan yang bisa berupa permainan suara akord tetapi ada banyak cara untuk melakukan ini.

Pembelajaran mesin bekerja sangat baik ketika saya mencoba layanan IBM dan melatih sekitar 3000 gambar selama seminggu untuk pengenalan gesek serta pengenalan akord. Saya juga mencoba handtrack.js oleh victordibia. Sayangnya mereka berdua sangat lambat di ponsel.

Saya kemudian menemukan deteksi gerakan dan implementasi oleh lonekorean di diffcam.com. Saya belajar bahwa adalah mungkin untuk menggunakan webcam untuk merekam dua frame terpisah dan kemudian menghitung perbedaan antara frame dan memberikan perbedaan skor. Jika skor itu melebihi ambang batas tertentu, saya kemudian melakukan tindakan.

Lonekorean juga membuat mesin untuk diff cam-nya yang saya putuskan untuk digunakan untuk gitar Air dan itu bekerja dengan sempurna untuk memberi saya skor gerakan!

Terlampir adalah gambar upaya melatih model pembelajaran mesin serta contoh diffcam.com yang saya pelajari.

Catatan: Dalam prototipe saat ini, memetik agak berulang-ulang, untuk menghentikannya, cukup tahan akord yang ingin Anda mainkan selanjutnya. Ini adalah bug yang kami harap dapat diperbaiki ke depan.

Kode untuk strum lengkap ditemukan di file script.js terlampir di sini dan mesin diffcam oleh lonekorean ada di sini.

Langkah 3: Pengenalan Akor

Tonggak pengkodean berikutnya adalah menemukan cara untuk menangani pengenalan akord secara langsung.

Saya ingin pengguna dapat mereplikasi bentuk akord yang sebenarnya dan berlatih penempatan tangan yang baik dan juga membantu mereka berlatih akord yang berbeda.

Seperti pada langkah terakhir, saya mencoba Machine learning untuk pengenalan akor, tetapi sangat lambat di ponsel.

Saya kemudian belajar sesuatu dari aplikasi Gitar Nyata bahwa mungkin untuk menempatkan fretboard di layar ponsel menggunakan layar untuk menghasilkan bentuk akord.

Saya kemudian harus belajar bagaimana mengizinkan interaksi multi-sentuh dalam javascript dan menemukan tutorial dan contoh yang luar biasa dari dokumen Mozilla

Interaksi sentuh bisa menjadi rumit terutama di Javascript tetapi idenya adalah kita dapat membuat div tertentu dan kemudian mendefinisikan fungsi untuk menangani berbagai peristiwa sentuh:

1. touchStart: Saat jari menyentuh layar

2. sentuh Akhiri: Saat jari pergi

3. sentuhMove: Saat jari masih berada di layar tetapi berubah posisi

Kami kemudian bekerja di sekitar fungsi-fungsi tersebut untuk menentukan elemen kami sendiri yang merespons berbagai peristiwa dan kombinasi sentuhan.

Dalam kasus kami, kami mendesain papan fret menggunakan CSS dan kemudian menggunakan Javascript, memberi tahu aplikasi bahwa ketika div tertentu ditekan bersama, akord harus dikenali.

Kami kemudian dapat menentukan objek audio yang akan kami berikan akordnya dan kemudian memutar audio itu saat peristiwa gesekan terjadi.

Untuk menentukan kombinasi akord yang berbeda, saya membuat papan fret menggunakan gambar ini dan kemudian mengatur setiap posisi khusus menjadi div yang dapat saya sentuh dan gabungkan dengan yang lain.

Kode untuk menentukan progresi akord ditemukan di sini dan pengontrol fretboard ditemukan dalam kode terlampir.

Langkah 4: Menemukan Suara Akor

Sekarang sistem kami diatur untuk mengenali, kami membutuhkan beberapa suara akord yang sebenarnya.

Untungnya, freesound.com selalu datang untuk menyelamatkan saya ketika saya membutuhkan sampel audio. Saya hanya mencari akord dan menemukan kumpulan akord mayor yang menakjubkan dari danglada.

Saya kemudian mengunduhnya dan mengeditnya menggunakan audacity untuk memastikan bahwa suaranya segera dimulai daripada jeda singkat di awal sebagian besar dari mereka ketika sedang direkam.

Untuk memotongnya menggunakan audacity, saya cukup menyeretnya ke dalam aplikasi lalu memilih bagian suara yang saya inginkan (seluruh bagian bergelombang dan tidak ada bagian garis datar yang tidak memiliki suara). Saya kemudian pergi ke tab Edit > Hapus Spesial > Potong Audio. Lalu saya masuk ke tab Tracks > Align Tracks > Start to Zero. Saya kemudian pergi ke file, lalu Ekspor> Ekspor sebagai WAV.

Saya mengekspor sebagai WAV karena saya merasa lebih mudah untuk menangani proyek audio Javascript.

Saya kemudian menggunakan glitch.com untuk meng-host file-file ini karena mereka memiliki jaringan pengiriman konten yang luar biasa yang dapat digunakan untuk berbagai proyek yang Anda miliki. Pilihan lain adalah menggunakan firebase yang merupakan goto saya untuk berbagai proyek yang mungkin memiliki lebih banyak informasi untuk disimpan seperti aplikasi inventaris makerspace untuk makerspace perguruan tinggi saya.

Anda hanya perlu menarik dan melepaskan aset ke direktori proyek dan kemudian Anda dapat menemukan tautan saat Anda mengklik folder aset dan mengklik aset yang ingin Anda dapatkan. Glitch kemudian akan menghasilkan url CDN unik untuk aset Anda. Misalnya, inilah tautan ke suara A Major Chord.

Saya kemudian dapat menautkan semua akord ini bersama-sama dalam fungsi getChord yang akan mencari saat kombinasi tertentu dari posisi fret telah ditekan dan kemudian menetapkan akor yang sesuai untuk dimainkan oleh aplikasi saat terjadi peristiwa gesekan tangan.

Langkah 5: Menyelesaikan dan Menghosting Seluruh Aplikasi

Ada banyak cara untuk pergi tentang hosting.

Sejujurnya yang terbaik yang saya temukan adalah menggunakan github. Ini karena jika Anda telah memprogram aplikasi dengan baik, Anda dapat membuat seluruh bagian belakang Anda dilayani oleh database atau firestore dari firebase atau bahkan menggunakan CDN dari glitch.com dan tempat lain untuk menyimpan aset.

Untuk meng-host proyek di github, yang harus Anda lakukan adalah membuka akun github, membuat repositori baru. Kemudian untuk memudahkan pengaturan, setelah Anda memasukkan nama proyek Anda, selalu pastikan untuk menambahkan lisensi (saya bukan ahli tetapi saya telah menemukan bahwa itu membuat hidup saya lebih mudah). Saya selalu hanya menggunakan lisensi publik seperti GNU.

Setelah repositori diatur, kita cukup drag dan drop file kita ke dalam repositori dan klik tombol komit hijau di bagian bawah.

Kami kemudian pergi ke tab Pengaturan dengan ikon roda gigi di paling kanan halaman repositori di bawah tombol bintang dan jam tangan. Setelah di pengaturan, gulir ke bawah hingga Anda melihat kotak Halaman Github. Ubah Sumber menjadi cabang utama dan pilih tema jika Anda mau. Anda dapat mempelajari cara menggunakan tema dengan googling (saya tidak pernah menggunakannya karena saya sering membawa CSS dan ide tema saya sendiri).

Ketika halaman sudah siap, Anda akan mendapatkan sorotan hijau dan centang yang memberi tahu Anda bahwa situs Anda telah diterbitkan dan dapat diakses.

Langkah 6: Selesai

Sekarang Anda dapat menikmati sesi selai yang luar biasa dalam kenyamanan headphone, kamar tidur, atau kereta Anda sendiri. Tambahkan beberapa akord lagi jika Anda suka dan bahkan bermain-main dengan posisi fret gitar.

Catatan singkat tentang Deteksi Gerakan

1. Ambang untuk gesekan memetik gitar dapat disesuaikan di file script.js tetapi pastikan bahwa saat Anda menggunakan aplikasi, latar belakang yang dilihat ponsel Anda relatif tidak bergerak.

2. Sebagai contoh, di dalam kereta, lebih baik duduk dan memakai headphone Anda dan memutar telepon Anda ke dalam sehingga jika penumpang bergerak di sekitar Anda kamera telepon hanya dapat melihat tangan Anda bergerak sebagian besar waktu.

3. Tangan yang mencengkeram telepon harus relatif diam tergantung pada ambang Anda. Saya pikir saya akan menjalankan beberapa tes dengan ambang tinggi dan memperbarui batas ke depan agar lebih spesifik.

Bermain:

Muat aplikasi di browser web Anda, lalu miringkan ke mode lanskap.

Kemudian saat Anda mengayunkan tangan, akord akan dimainkan, namun akord akan terus dimainkan hingga Anda menyentuh tombol F di sudut kanan bawah.

Atau, Anda dapat menghentikan suara dengan membuat kombinasi akor.

Saat Anda membuat kombinasi akor, suara saat ini berhenti, lalu suara akor baru dipilih.

Langkah 7: Hal yang Dipelajari dan Kata-Kata Terakhir

Saya sangat suka mengerjakan proyek ini meskipun butuh waktu lama untuk membuat prototipe dan membuat aplikasi diproduksi saat mengerjakan proyek lain dan pekerjaan rumah. Saya belajar beberapa hal luar biasa di sepanjang jalan juga;

1. Saat mendesain produk digital, selalu pastikan untuk membuat prototipe Anda secepat mungkin karena asumsi pertama Anda akan salah dan Anda harus melewatinya dengan cepat untuk mencapai akhir.

2. Hindari menghabiskan uang untuk sebuah proyek sebanyak mungkin. Selalu gunakan kembali apa pun yang Anda bisa dan selalu mulai dengan hal-hal sederhana yang Anda miliki.

3. Jangan takut untuk mempelajari bahasa, kerangka kerja, dan sistem baru. Mereka seringkali lebih mudah daripada yang Anda pikirkan pada awalnya.

Dan terima kasih banyak kepada lonekorean karena membuat impian saya menjadi kenyataan

Jika Anda tertarik dengan pengembangan aplikasi, Anda dapat bergabung dengan milis kami. Sebuah tim kecil dan saya akan bekerja untuk membuat versi lengkap untuk membantu orang-orang yang bangkrut, bepergian atau anak kecil memiliki akses ke gitar portabel yang mengagumkan di mana pun mereka berada.

Kami sangat membutuhkan bantuan terutama dari desainer grafis, pemain gitar, dan pembuat kode untuk menguji dan menyempurnakan semuanya.

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