Lihat sumber Aplikasi Kodály Hand Sign Recognition Berbasis React

[[Berkas:AI untuk Belajar Angklung.png|al=AI untuk Belajar Angklung|jmpl|AI untuk Belajar Angklung]]
Aplikasi '''Kodály Hand Sign Recognition''' merupakan sebuah perangkat lunak interaktif berbasis [[React (JavaScript library)|React]] yang memanfaatkan deteksi tangan untuk memainkan nada dan akor secara real-time. Sistem ini menggabungkan teknologi visi komputer, antarmuka pengguna berbasis komponen, dan integrasi media seperti [[YouTube]] untuk memberikan pengalaman pembelajaran musik yang interaktif. Implementasi aplikasi ini menggunakan berbagai ''hooks'' dan komponen khusus yang memudahkan pengendalian volume, pemilihan lagu, serta konfigurasi pemetaan akor.

== Demo Aplikasi ==
{{#ev:youtube|https://www.youtube.com/watch?v=e0z5Z-B8fPQ}}

== Arsitektur Aplikasi ==
Aplikasi ini dibangun dengan paradigma komponen pada [[React (JavaScript library)|React]], sehingga setiap bagian fungsionalitas dipecah menjadi modul terpisah. Komponen utama seperti ''WebcamView'', ''DetectionDisplay'', ''ControlPanel'', dan ''ChordMappingPanel'' berperan dalam menyediakan tampilan antarmuka dan interaksi pengguna. ''Hook'' khusus seperti ''useHandDetection'' mengatur logika deteksi tangan, termasuk inisialisasi, pengaturan volume, dan pengendalian status aktif sistem.

== Teknologi Deteksi Tangan ==
[[Berkas:Ratusan foto sebagai data pelatihan deteksi tangan.png|al=Ratusan foto sebagai data pelatihan deteksi tangan|jmpl|Ratusan foto sebagai data pelatihan deteksi tangan]]
Deteksi tangan dalam aplikasi ini memanfaatkan pustaka dan algoritma pengolahan citra yang mampu mengenali posisi dan bentuk tangan. Sistem ini menginterpretasikan posisi vertikal tangan untuk memainkan nada sesuai metode [[Hand Sign Angklung|Kodály]], dan jumlah jari atau bentuk tertentu untuk memainkan akor. Algoritma deteksi memanfaatkan model [[Machine Learning|machine learning]] yang telah dilatih untuk mengenali gerakan tangan secara akurat.

== Integrasi YouTube ==
Fitur integrasi dengan [[YouTube]] memungkinkan pengguna memutar video partitur atau lagu sebagai panduan. Pengguna dapat memilih lagu melalui komponen ''SongSelector'' atau memasukkan URL secara manual. Komponen ''YouTubePlayer'' bertugas memutar video yang dipilih, sehingga pengguna dapat mengikuti musik / video sambil berinteraksi dengan deteksi tangan.

== Panel Kontrol dan Antarmuka Pengguna ==
''ControlPanel'' menyediakan kontrol utama seperti mengaktifkan atau menonaktifkan sistem deteksi tangan, mengatur volume, menampilkan bantuan, mengaktifkan pemilihan lagu, dan mengatur kamera. Antarmuka dirancang dengan prinsip kemudahan penggunaan dan responsivitas, memanfaatkan kelas-kelas CSS untuk tata letak fleksibel dan estetika yang konsisten.

== Komponen Utama ==
# '''WebcamView''' — Menyediakan tampilan kamera dan menangkap input video untuk deteksi.
# '''DetectionDisplay''' — Menampilkan hasil deteksi tangan secara visual.
# '''ControlPanel''' — Mengatur parameter sistem dan memicu aksi pengguna.
# '''HelpModal''' — Memberikan panduan penggunaan aplikasi.
# '''ChordMappingPanel''' — Memetakan bentuk tangan ke akor musik.
# '''YouTubePlayer''' — Memutar video dari [[YouTube]].
# '''SongSelector''' — Memilih lagu yang akan diputar.

== Prinsip Metode Kodály ==
Metode [[Hand Sign Angklung|Kodály]] adalah pendekatan pembelajaran musik yang menggunakan tanda tangan (''hand signs'') untuk merepresentasikan nada-nada dalam skala diatonis. Dalam aplikasi ini, posisi tangan di ruang vertikal kamera dipetakan ke nada-nada seperti Do, Re, Mi, Fa, Sol, La, Ti, Do. Prinsip ini memudahkan pengguna untuk mengasosiasikan gerakan fisik dengan konsep nada musik.

== Pemetaan Akor Berdasarkan Gestur ==
Selain nada tunggal, aplikasi ini mendukung pemutaran akor berdasarkan bentuk tangan. Jumlah jari yang diperlihatkan, atau tanda khusus seperti ''peace sign'' atau ''rock sign'', diinterpretasikan sebagai akor tertentu (I–VII). Hal ini memungkinkan pengguna memainkan harmoni tanpa instrumen fisik, hanya dengan memanfaatkan gestur tangan.

== Pengendalian Volume dan Kamera ==
Pengaturan volume dilakukan melalui fungsi ''handleVolumeChange'' yang mengubah nilai volume di dalam ''state'' dan memanggil fungsi ''updateVolume'' dari ''hook'' deteksi tangan. Kamera dapat diaktifkan atau dinonaktifkan sesuai kebutuhan, dan saat kamera mati, aplikasi menampilkan pesan status "Camera is off".

== Potensi Pengembangan ==
Aplikasi ini memiliki potensi untuk dikembangkan lebih lanjut, seperti menambahkan fitur analisis performa, integrasi dengan pustaka musik digital, atau dukungan untuk deteksi multi-pengguna. Dengan memanfaatkan konsep [[pembelajaran mesin]] dan antarmuka berbasis [[React (JavaScript library)|React]], sistem dapat diperluas untuk mendukung lebih banyak instrumen dan metode pembelajaran musik interaktif.

== Pranala Menarik ==

* [[Hand Sign Angklung|Kodály]]
* [[Machine Learning|Pembelajaran Mesin]]

== Projek lainnya ==

* E-Learning : [https://sekolahkan.com Sekolahkan.com]
* Undangan Digital : [https://walimah.web.id Walimah.web.id]
* Diklat Online : [https://tespppk.com TesPPPK.com]
* Rebrand Produk Digital : [https://rebrand.web.id RebrandWebID]
* Perpustakaan Digital : [https://pustaka.inibudi.or.id Pustaka Berbudi]
* AI Pembuat Buku : [https://bookcraft.xyz BookCraft]