Aplikasi Kodály Hand Sign Recognition Berbasis React - Riwayat revisi

Budi: /* Projek lainnya */

2025-11-07T23:39:09Z

Projek lainnya

← Revisi sebelumnya		Revisi per 7 November 2025 23.39
Baris 53:		Baris 53:
	* AI Pembuat Buku : [https://bookcraft.xyz BookCraft]		* AI Pembuat Buku : [https://bookcraft.xyz BookCraft]
	* Soneur : [https://www.soneur.xyz Soneur.xyz]		* Soneur : [https://www.soneur.xyz Soneur.xyz]
			* [[KamusKita English - Bahasa Indonesia\|KamusKita - Kamus untuk Kindle]]

Budi: /* Projek lainnya */

2025-11-04T22:56:37Z

Projek lainnya

← Revisi sebelumnya		Revisi per 4 November 2025 22.56
Baris 52:		Baris 52:
	* Perpustakaan Digital : [https://pustaka.inibudi.or.id Pustaka Berbudi]		* Perpustakaan Digital : [https://pustaka.inibudi.or.id Pustaka Berbudi]
	* AI Pembuat Buku : [https://bookcraft.xyz BookCraft]		* AI Pembuat Buku : [https://bookcraft.xyz BookCraft]
			* Soneur : [https://www.soneur.xyz Soneur.xyz]

Budi: /* Demo Aplikasi */

2025-11-04T22:35:36Z

Demo Aplikasi

← Revisi sebelumnya		Revisi per 4 November 2025 22.35
Baris 3:		Baris 3:

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

	== Arsitektur Aplikasi ==		== Arsitektur Aplikasi ==

Budi pada 4 November 2025 22.35

2025-11-04T22:35:00Z

← Revisi sebelumnya		Revisi per 4 November 2025 22.35
Baris 1:		Baris 1:
	[[Berkas:AI untuk Belajar Angklung.png\|al=AI untuk Belajar Angklung\|jmpl\|AI untuk Belajar Angklung]]		[[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.		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 ==		== Arsitektur Aplikasi ==

Budi pada 4 November 2025 22.19

2025-11-04T22:19:25Z

← Revisi sebelumnya		Revisi per 4 November 2025 22.19
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.		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.

Baris 5:		Baris 6:

	== Teknologi Deteksi Tangan ==		== 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 ==		== 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 ==		== Panel Kontrol dan Antarmuka Pengguna ==
Baris 33:		Baris 35:
	== Potensi Pengembangan ==		== 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.		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]

Budi: /* Prinsip Metode Kodály */

2025-11-04T22:05:13Z

Prinsip Metode Kodály

← Revisi sebelumnya		Revisi per 4 November 2025 22.05
Baris 5:		Baris 5:

	== Teknologi Deteksi Tangan ==		== 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 [[~~Metode Kodály~~\|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.		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.

	== Integrasi YouTube ==		== Integrasi YouTube ==
Baris 23:		Baris 23:

	== Prinsip Metode Kodály ==		== Prinsip Metode Kodály ==
	Metode [[~~Metode Kodály~~\|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.		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 ==		== Pemetaan Akor Berdasarkan Gestur ==

Budi: Batch created by Azure OpenAI

2025-11-04T22:03:07Z

Batch created by Azure OpenAI

Halaman baru

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.

== 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 ==
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 [[Metode Kodály|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.

== 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.

== 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 [[Metode Kodály|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.