Belajar Membuat Piano Berbasis Web #1

Buatlah tag html seperti biasa kalian membuat sebuah website, seperti ini
```
<html>  
</html>
```
Oh iya setiap tag yang kalian buat jangan lupa untuk menutupnya

Di dalam tag html buatlah tag head dan tag body

<html>  
      <head>  
      </head>  
      <body>  
      </body>  
 </html>

Di dalam tag head buatlah tag title untuk memberikan judul pada website yang akan dibuat. disini saya berikan contoh dengan judul "Programmer Wati | Belajar membuat piano berbasis web".
```
 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano berbasis web</title>  
      </head>  
      <body>  
      </body>  
 </html>
```

Lalu buatlah tag heading h1 dengan id "tuts" dan align center didalam tag body. Kode ini untuk memunculkan nada apa yang kalian tekan.

 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano berbasis web</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
      </body>  
 </html>

Sekarang kita buat kode utama sebuah piano. kode ini berfungsi untuk mendefinisikan setiap tuts yang ada pada piano. seperti pelajaran piano dasar, kita akan membuat tangga nada yang diawali dengan angka 1 atau nada "do". 2 dengan nada "re". 3 dengan nada "mi" dst. ini merupakan nada untuk tuts berwarna putih.

 
<html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
            <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>

Lanjutkan dengan membuat kode untuk tuts hitam
Kode html sudah kita buat, sekarang kita akan membuat kode javascript.

Buatlah tag script

 
<html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
           <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      <script>  
      </script>  
      </body>  
 </html>

Tag script merupakan awal atau pembuka dari kode javascript

Setelah membuat tag script lalu buatlah variabel tuts dengan nilai kosong. variabel tuts ini nantinya berfungsi untuk mendefinisikan setiap tombol yang kita tekan itu apa.

 
 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
           <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>  
 <script> //Javascript  
      var tuts="";  
 </script>

Buatlah fungsi on-key-down. yaitu untuk menangkap setiap tombol yang kita tekan, jadi pada saat tombol ditekan maka fungsi ini akan bekerja. Inilah fungsi utama yang dapat menjadikan keyboard komputer layaknya piano. Simple bukan?

 
 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
           <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>  
 <script> //Javascript  
      var tuts="";  
      document.onkeydown = function(e) {  
      };  
 </script>

Mari lanjutkan ke tahap selanjutnya. setiap tombol yang kita tekan maka akan menghasilkan nilai yang berbeda. nilai ini merupakan nilai standar yang diterapkan pada keyboard komputer dan dinamakan (ASCII), silahkan cari tahu tentang ASCII terlebih dahulu dan kalian akan menemukan tabel setiap huruf atau angka yang ada di dalam keyboard komputer. Misalnya, jika kita menekan huruf "Z" maka akan menghasilkan nilai "90" dan huruf "X" akan menghasilkan nilai "88". saya mengimplementasikan code ASCII untuk membuat aplikasi piano ini karena fungsi on-key-down hanya mengenal kode ASCII, bukan huruf yang kalian lihat pada keyboard. pada saat kita menekan tombol pada keyboard maka akan menghasilkan nilai atau kode ASCII, dan nilai tersebut saya tuangkan ke dalam fungsi switch case, dimana fungsi switch case ini akan membedakan atau memilah setiap nilai yang muncul. Baiklah saya anggap kalian sudah mengerti apa itu code ASCII dan fungsi switch case.

Mari kita buat fungsi switch case nya.

 
 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div>  
           <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>  
 <script> //Javascript  
      var tuts="";  
      document.onkeydown = function(e) {  
        switch (e.keyCode) {  
           }  
      };  
 </script>

E.keycode adalah value dari code ascii yang akan di pisah pisah ke setiap case.

Ini dia kode yang akan menghasilkan suara piano. Sebenarnya kode ini merupakan tag audio di HTML yang pasti kalian sudah tau. Tetapi saya membuat nya otomatis dan tidak perlu menekan tombol play untuk memainkannya. Karena setiap tombol keyboard ditekan kode ini akan diterapkan ke setiap div id yang sudah ditentukan (div id ini yang sudah kita buat tadi untuk tuts putih dan tuts hitam). Saya juga menyembunyikan tampilan audio dengan menambahkan style dengan visibility hidden. Saya berikan contoh apabila kalian menekan huruf "Z" pada keyboard komputer maka akan menghasilkan nilai "90". tag audio ini dengan atribut src atau source yaitu mengambil file audio yang sudah kita extract tadi, bisa kalian lihat setiap case diberikan file audio yang berbeda, ini menandakan bahwa nada nya berbeda, case 90 bernada “do” sedangkan case 88 bernada “re”. Oke kita lanjutkan lagi dengan case berikutnya.

 
 document.getElementById('1').innerHTML='<audio controls autoplay src="audio/1.ogg" style=visibility:hidden;></audio>';

setelah ditambahkan kode diatas sehingga menjadi seperti ini

 
 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
            <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>  
 <script> //Javascript  
      var tuts="";  
      document.onkeydown = function(e) {  
        switch (e.keyCode) {  
           //Untuk Tuts Putih  
           case 90: //code ascii tombol z di keyboard komputer  
                document.getElementById('1').innerHTML='<audio controls autoplay src="audio/1.ogg" style=visibility:hidden;></audio>';  
                break;  
           }  
      };  
 </script>

Saya akan membuat variable tuts bernilai satu, variable tuts ini diberikan nilai dengan angka satu menandakan bahwa tombol yang ditekan yaitu nada 1 atau "do". Dan nantinya diterapkan pada heading h1 dengan id tuts. Jadi seperti ini

 
 <html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
           <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>  
 <script> //Javascript  
      var tuts="";  
      document.onkeydown = function(e) {  
        switch (e.keyCode) {  
           //Untuk Tuts Putih  
           case 90: //code ascii tombol z di keyboard komputer  
                document.getElementById('1').innerHTML='<audio controls autoplay src="audio/1.ogg" style=visibility:hidden;></audio>';  
                tuts="1";  
                break;  
           }  
      };  
 </script>

Setelah ditambahkan kode untuk semua tuts putih dan tuts hitam maka menjadi seperti ini

<html>  
      <head>  
           <title>Programmer Wati | Belajar membuat piano dengan HTML</title>  
      </head>  
      <body>  
           <center>  
                <h1 id="tuts"></h1>  
           </center>  
           <!-- Untuk Tuts Putih -->  
           <div id="1"></div>  
           <div id="2"></div>  
           <div id="3"></div>  
           <div id="4"></div>  
           <div id="5"></div>  
           <div id="6"></div>  
           <div id="7"></div>  
           <div id="8"></div> 
            <!-- Untuk Tuts Hitam -->  
           <div id="1kres"></div>  
           <div id="2kres"></div>  
           <div id="4kres"></div>  
           <div id="5kres"></div>  
           <div id="6kres"></div>  
      </body>  
 </html>  
 <script> //Javascript  
      var tuts="";  
      document.onkeydown = function(e) {  
        switch (e.keyCode) {  
           //Untuk Tuts Putih  
           case 90: //code ascii tombol z di keyboard komputer  
                document.getElementById('1').innerHTML='<audio controls autoplay src="audio/1.ogg" style=visibility:hidden;></audio>';  
                tuts="1";  
                break;  
           case 88: //code ascii tombol x di keyboard komputer  
                document.getElementById('2').innerHTML='<audio controls autoplay src="audio/2.ogg" style=visibility:hidden;></audio>';  
                tuts="2";  
                break;  
           case 67: //code ascii tombol c di keyboard komputer  
                document.getElementById('3').innerHTML='<audio controls autoplay src="audio/3.ogg" style=visibility:hidden;></audio>';  
                tuts="3";  
                break;  
           case 86: //code ascii tombol v di keyboard komputer  
                document.getElementById('4').innerHTML='<audio controls autoplay src="audio/4.ogg" style=visibility:hidden;></audio>';  
                tuts="4";  
                break;  
           case 66: //code ascii tombol b di keyboard komputer  
                document.getElementById('5').innerHTML='<audio controls autoplay src="audio/5.ogg" style=visibility:hidden;></audio>';  
                tuts="5";  
                break;  
           case 78: //code ascii tombol n di keyboard komputer  
                document.getElementById('6').innerHTML='<audio controls autoplay src="audio/6.ogg" style=visibility:hidden;></audio>';  
                tuts="6";  
                break;  
           case 77: //code ascii tombol m di keyboard komputer  
                document.getElementById('7').innerHTML='<audio controls autoplay src="audio/7.ogg" style=visibility:hidden;></audio>';  
                tuts="7";  
                break;  
           case 188: //code ascii tombol , di keyboard komputer  
                document.getElementById('8').innerHTML='<audio controls autoplay src="audio/8.ogg" style=visibility:hidden;></audio>';  
                tuts="1.";  
                break;  
           //Untuk Tuts Hitam  
           case 83: //code ascii tombol s di keyboard komputer  
                document.getElementById('1kres').innerHTML='<audio controls autoplay src="audio/1kres.ogg" style=visibility:hidden;></audio>';  
                tuts="1#";  
                break;  
           case 68: //code ascii tombol d di keyboard komputer  
                document.getElementById('2kres').innerHTML='<audio controls autoplay src="audio/2kres.ogg" style=visibility:hidden;></audio>';  
                tuts="2#";  
                break;  
           case 71: //code ascii tombol g di keyboard komputer  
                document.getElementById('4kres').innerHTML='<audio controls autoplay src="audio/4kres.ogg" style=visibility:hidden;></audio>';  
                tuts="4#";  
                break;  
           case 72: //code ascii tombol h di keyboard komputer  
                document.getElementById('5kres').innerHTML='<audio controls autoplay src="audio/5kres.ogg" style=visibility:hidden;></audio>';  
                tuts="5#";  
                break;  
           case 74: //code ascii tombol j di keyboard komputer  
                document.getElementById('6kres').innerHTML='<audio controls autoplay src="audio/6kres.ogg" style=visibility:hidden;></audio>';  
                tuts="6#";  
                break;  
           }  
           document.getElementById('tuts').innerHTML=tuts;  
      };  
 </script>

Setelah semua kode program selesai silahkan simpan dengan nama piano.html di folder yg sudah tadi kita buat. Sebagai contoh tadi saya membuatnya di folder document. Dan ingat, beri nama dengan nama piano.HTML atau kalian bisa dengan bebas memberikan nama apapun sesuai dengan keinginan kalian.
Buka file piano.html dengan browser, alangkah baiknya menggunakan browser Google Chrome, karena akan lebih ringan jika dibuka dengan browser ini.
Mari kita mainkan piano yang kita buat dengan tangan kita sendiri. Coba Anda tekan tombol Z,X,C,V,B,N,M dan koma (,). Itu adalah tuts putih. Dan untuk tuts hitam, tombol S,D,G,H,dan J.
Sudah bersuara?? Jika belum, coba cek kembali kode programnya. Barangkali ada yg salah.:D

Silahkan lihat demo nya disini :

Demo Piano Berbasis Web #1

Untuk mempermudah pemahaman, saya sudah buatkan video tutorialnya. cekidot

Silahkan tinggalkan komentar yang baik.
Sekian Tutorial membuat piano berbasis web oleh programmerwati. semoga bermanfaat :)

Programmerwati

.

Belajar Membuat Piano Berbasis Web #1

Share this