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

← Revisi sebelumnya Revisi selanjutnya →

Revisi per 4 November 2025 22.35

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

@@ Baris 1: / Baris 1: @@
+[[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 ==
@@ Baris 5: / Baris 9: @@
 == 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 [[Hand Sign Angklung|Kodály]], dan jumlah jari atau bentuk tertentu untuk memainkan akor. Algoritma deteksi dapat memanfaatkan model pembelajaran mesin yang dilatih untuk mengenali gerakan tangan secara akurat.
+[[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 sambil berinteraksi dengan deteksi tangan.
+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 ==
@@ Baris 33: / Baris 38: @@
 == 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]