Aplikasi Kodály Hand Sign Recognition Berbasis React: Perbedaan antara revisi

Revisi terkini sejak 4 November 2025 22.56

Aplikasi Kodály Hand Sign Recognition merupakan sebuah perangkat lunak interaktif berbasis 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

Arsitektur Aplikasi

Aplikasi ini dibangun dengan paradigma komponen pada 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

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 Kodály, dan jumlah jari atau bentuk tertentu untuk memainkan akor. Algoritma deteksi memanfaatkan model 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 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, sistem dapat diperluas untuk mendukung lebih banyak instrumen dan metode pembelajaran musik interaktif.

Pranala Menarik

Projek lainnya

E-Learning : Sekolahkan.com
Undangan Digital : Walimah.web.id
Diklat Online : TesPPPK.com
Rebrand Produk Digital : RebrandWebID
Perpustakaan Digital : Pustaka Berbudi
AI Pembuat Buku : BookCraft
Soneur : Soneur.xyz

@@ Baris 52: / Baris 52: @@
 * Perpustakaan Digital : [https://pustaka.inibudi.or.id Pustaka Berbudi]
 * AI Pembuat Buku : [https://bookcraft.xyz BookCraft]
+* Soneur : [https://www.soneur.xyz Soneur.xyz]