Proyek 29 Artikel ⏱️ Estimasi Waktu Baca: 6 menit

Proyek Menyenangkan: Membangun Aplikasi Papan Ketik Piano Virtual Interaktif

Halo Sobat Jurnal Coding yang berjiwa seni! Selama ini kita mungkin berpikir bahwa dunia pemrograman hanyalah berkisar tentang mengolah data teks, melakukan perhitungan angka matematika, menyusun formulir, atau mengurus masalah transaksi keuangan. Pemikiran kaku seperti itu sering kali membuat otak kita terasa sangat lelah dan butuh penyegaran.

Faktanya, menulis kode itu sangat erat kaitannya dengan seni dan kreativitas! Hari ini, kita akan meletakkan sejenak angka-angka yang membosankan tersebut, dan kita akan meracik sebuah proyek yang bisa menghasilkan nada dan melodi. Ya, kita akan mengubah tombol-tombol pada keyboard laptop atau komputer kesayanganmu menjadi sebuah Papan Ketik Piano Virtual yang interaktif dan bisa dimainkan layaknya alat musik sungguhan!

Proyek pembuatan piano virtual ini bukan sekadar main-main. Di balik keseruannya, proyek ini adalah menu latihan paling sempurna untuk mengasah tiga keahlian tingkat dewa dalam JavaScript: Membaca tekanan tombol pada keyboard fisik pengguna (Keydown Events), memutar objek suara multimedia secara tumpang tindih (Audio Playback), dan menyinkronkan animasi tampilan layar (DOM Manipulation) agar bergerak seirama dengan tombol yang ditekan.

Konsep Logika Piano Digital

Bagaimana caranya sebuah layar website bisa berubah menjadi piano? Konsepnya sangat sederhana dan sangat masuk akal jika kita menggunakan logika sebab-akibat.

Pertama, kita akan merancang kotak-kotak putih dan hitam menggunakan HTML dan CSS agar terlihat persis seperti tuts piano sungguhan. Kedua, kita akan meminjam rekaman suara nada piano asli (seperti nada Do, Re, Mi) berformat mp3 yang banyak tersedia gratis di internet. Ketiga, kita akan menugaskan JavaScript sebagai sang dirigen orkestra. JavaScript akan bertugas mendengarkan dengan saksama tombol huruf apa yang ditekan oleh pengguna di laptop mereka. Jika pengguna menekan tombol huruf A, JavaScript akan memutar suara nada Do, dan sekaligus memberikan efek bayangan ditekan pada tuts putih di layar.

Langkah 1: Merakit Tuts Piano (HTML & CSS)

Mari kita mulai pembangunan instrumen kita. Silakan buka area kerja Text Editor andalanmu dan siapkan kerangka dasar HTML berikut ini. Kita akan menggunakan atribut khusus bernama data-key untuk menghubungkan tuts di layar dengan huruf pada keyboard komputermu.



<div class="piano-container">


  <div class="tuts putih" data-key="A">A</div>


  <div class="tuts hitam" data-key="W">W</div>


  <div class="tuts putih" data-key="S">S</div>


  <div class="tuts hitam" data-key="E">E</div>


  <div class="tuts putih" data-key="D">D</div>


</div>





<audio data-key="A" src="https://contoh.com/nada-c.mp3"></audio>


<audio data-key="W" src="https://contoh.com/nada-c-sharp.mp3"></audio>


<audio data-key="S" src="https://contoh.com/nada-d.mp3"></audio>


<audio data-key="E" src="https://contoh.com/nada-d-sharp.mp3"></audio>


<audio data-key="D" src="https://contoh.com/nada-e.mp3"></audio>

Catatan penting: Tautan file audio mp3 di atas hanyalah contoh penempatan. Di dunia nyata, kamu harus mencari file suara piano singkat dari situs penyedia aset gratis dan menempelkan tautan aslinya di dalam atribut src tersebut.

Sekarang, mari kita berikan riasan wajah pada piano kita menggunakan CSS agar tidak terlihat kaku. Kita akan membuat tuts putih memanjang ke bawah, dan tuts hitam melayang di sela-sela tuts putih.



.piano-container {


  display: flex;


  justify-content: center;


  position: relative;


  margin-top: 50px;


}





.tuts {


  border: 1px solid #333;


  border-radius: 0 0 5px 5px;


  display: flex;


  align-items: flex-end;


  justify-content: center;


  padding-bottom: 20px;


  font-weight: bold;


  cursor: pointer;


  transition: all 0.1s ease;


}





.tuts.putih {


  width: 60px;


  height: 200px;


  background: white;


  color: #333;


  z-index: 1;


}





.tuts.hitam {


  width: 40px;


  height: 120px;


  background: #111;


  color: white;


  margin-left: -20px;


  margin-right: -20px;


  z-index: 2;


}





.tuts.ditekan {


  transform: translateY(5px);


  box-shadow: 0 2px 10px rgba(0,255,255,0.5);


  background: #e0e0e0;


}

Perhatikan kelas khusus bernama tuts.ditekan di baris paling bawah. Kelas ini adalah senjata rahasia kita. Secara bawaan, kelas ini tidak menempel pada elemen apa pun. Namun, nanti kita akan menggunakan JavaScript untuk menyuntikkan kelas ini secara kilat saat tombol keyboard dipukul, sehingga tuts di layar akan terlihat amblas ke bawah bagaikan ditekan oleh jari hantu!

Langkah 3: Menghubungkan Melodi (JavaScript)

Inilah saatnya kita memberikan nyawa pada piano bisu kita. Kita akan memasang sensor telinga ke seluruh bagian jendela peramban (browser) untuk mendeteksi kejadian tombol yang ditekan (keydown). Silakan pahami logika sakti di bawah ini.



window.addEventListener("keydown", function(event) {


  const hurufTombol = event.key.toUpperCase();





  const suara = document.querySelector(`audio[data-key="${hurufTombol}"]`);


  const tutsLayar = document.querySelector(`.tuts[data-key="${hurufTombol}"]`);





  if (!suara) return; // Jika tombol yang ditekan salah, abaikan saja





  suara.currentTime = 0; // Kembalikan rekaman ke detik ke-0 agar bisa diputar cepat berulang kali


  suara.play(); // Putar suaranya!





  tutsLayar.classList.add("ditekan"); // Berikan efek visual amblas ke bawah


});





window.addEventListener("keyup", function(event) {


  const hurufTombol = event.key.toUpperCase();


  const tutsLayar = document.querySelector(`.tuts[data-key="${hurufTombol}"]`);





  if (!tutsLayar) return;





  tutsLayar.classList.remove("ditekan"); // Hapus efek amblas saat jari diangkat


});

Kecerdasan utama dari kode di atas terletak pada baris suara.currentTime = 0. Tanpa baris ini, jika kamu menekan tombol huruf A secara bertubi-tubi dengan cepat, komputer akan menunggu rekaman nada Do selesai terlebih dahulu sebelum bisa memutarnya lagi. Tentu itu akan sangat merusak irama musikmu. Dengan memaksa durasi rekaman kembali ke titik nol setiap kali tombol dipukul, kita bisa memainkan nada dengan kecepatan tempo yang sangat tinggi layaknya pianis profesional!

Selain mendengarkan kejadian keydown (saat tombol ditekan ke bawah), kita juga harus mendengarkan kejadian keyup (saat jari diangkat dari tombol). Kejadian ini kita gunakan untuk menghapus kelas ditekan, sehingga tuts piano di layar kembali naik ke posisi semula bagaikan memiliki pegas. Ini adalah nilai interaksi psikologis (User Experience) yang sangat berharga.

Jadilah Maestro Digital!

Kini kamu telah memiliki instrumen musik yang hidup sepenuhnya di dalam perangkat peramban web kamu. Bayangkan perasaan bangga yang akan menyelimutimu saat memamerkan karya interaktif ini ke teman-teman atau mencantumkannya di dalam CV portofolio lamaran kerja kamu. Siapa pun manajer perekrutan (HRD) yang mewawancaraimu pasti akan tersenyum melihat aplikasi yang kreatif ini.

Jangan ragu untuk mengembangkannya lebih jauh! Kamu bisa menambahkan fitur untuk merekam irama yang ditekan, atau mengubah jenis instrumennya menjadi suara gitar listrik atau bahkan suara kucing yang mengeong. Batasannya hanyalah imajinasi kamu. Selamat merangkai kode dan selamat bermusik, Maestro!