.

.

Belajar membuat piano berbasis web #2 (Programmerwati)

01.04 Add Comment
Ini merupakan tutorial membuat piano berbasis web part dua yang saya buat, bagi yang belum tahu tutorial sebelumnya bisa dipelajari disini <<Belajar Membuat Piano Berbasis Web #1>>.

Di tutorial ke 2 ini saya menjelaskan bagaimana caranya membuat tampilan piano dan bagaimana caranya membuat piano bisa disentuh oleh jari. untuk lebih jelasnya silahkan luangkan waktu Anda 10 menit saja untuk nonton video tutorial dibawah ya :)


disini saya akan memberikan source code yang sudah saya buat.

index.html

<!DOCTYPE html>
<html>
 <head>
  <title>Programmer Wati | Belajar membuat piano berbasis Web</title>
  <link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css" />
     <link rel="stylesheet" href="assets/css/style.css" type="text/css" />
 </head>
 <body>

  <div class="loader text-center">
   <span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span> Loading...
  </div>

  <div class="container home">
   <h1>Programmer Wati | Belajar membuat piano berbasis Web</h1>
   <p>Silahkan tekan tombol keyboard dimulai dari huruf z sampai ,(koma) untuk tuts putih</p>
   <p>Untuk tuts hitam silahkan tekan tombol s, d, g, h dan j</p>
   <p>Bisa juga ditekan langsung pada tuts nya</p>
   <hr>
   <br>
   
   <center>
    <h1 id="tuts"></h1>
   </center>

   <!-- User Interface Piano (Tampilan Piano) -->
   <div class="row text-center">
    <div class="col-xs-12">
     <ul class="piano list-inline">
      <li class="tuts-putih 1">1</li>
      <li class="tuts-hitam 1kres">1#</li>
      <li class="tuts-putih 2">2</li>
      <li class="tuts-hitam 2kres">2#</li>
      <li class="tuts-putih 3">3</li>
      <li class="tuts-putih 4">4</li>
      <li class="tuts-hitam 4kres">4#</li>
      <li class="tuts-putih 5">5</li>
      <li class="tuts-hitam 5kres">5#</li>
      <li class="tuts-putih 6">6</li>
      <li class="tuts-hitam 6kres">6#</li>
      <li class="tuts-putih 7">7</li>
      <li class="tuts-putih 8">1.</li>
     </ul>
    </div>
   </div>
   <!-- Akhir User Interface Piano (Tampilan Piano) -->
  </div>

  <!-- Tag Audio akan diterapkan di bagian ini -->
  <div class="hidden">
   <!-- 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>
  </div>

  <!--Preload Audio-->
  <div class="hidden">
   <audio controls preload="auto">
     <source src="assets/audio/1.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/2.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/3.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/4.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/5.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/6.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/7.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/8.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/1kres.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/2kres.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/4kres.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/5kres.ogg" type="audio/ogg">
   </audio>
   <audio controls preload="auto">
     <source src="assets/audio/6kres.ogg" type="audio/ogg">
   </audio>
  </div>
  
  <!-- untuk mempercepat dan mempersingkat kode program maka digunakan jquery -->
  <script src="assets/js/jquery.min.js"></script>
  <script src="assets/js/script.js"></script>

 </body>
</html>



style.css 


body{
 background: #55B8D6;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
.piano li.tuts-putih{
 height:150px;
 width:50px;
 background: #fff;
 border:1px solid #ccc;
 margin-left: -4px;
}
.piano li.tuts-hitam{
 height:110px;
 width:25px;
 background: #000;
 color:#fff;
 border:1px solid #ccc;
 margin-left:-20px;
 position:absolute;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
}
.kuning{
 background: yellow !important;
}
.home{
 display:none;
}
.loader{
 position:fixed;
 top:50%;
 left:40%;
 width:15%;
}
.glyphicon-refresh-animate {
    -animation: spin .7s infinite linear;
    -webkit-animation: spin2 .7s infinite linear;
}

@-webkit-keyframes spin2 {
    from { -webkit-transform: rotate(0deg);}
    to { -webkit-transform: rotate(360deg);}
}

@keyframes spin {
    from { transform: scale(1) rotate(0deg);}
    to { transform: scale(1) rotate(360deg);}
}


script.js 


//loading page
$(window).load(function(){
    $( ".loader" ).delay(800).fadeOut(400);  
    $( ".home" ).fadeIn(400);
});
//fungsi onkeydown yaitu untuk menghandle keyboard komputer pada saat ditekan
document.onkeydown = function(e) {
    switch (e.keyCode) {

 //Untuk Tuts Putih
 case 90: //code ascii tombol z di keyboard komputer
  tekan('1');
 break;
 case 88: //code ascii tombol x di keyboard komputer
  tekan('2');
 break;
 case 67: //code ascii tombol c di keyboard komputer
  tekan('3');
 break;
 case 86: //code ascii tombol v di keyboard komputer
  tekan('4');
 break;
 case 66: //code ascii tombol b di keyboard komputer
  tekan('5');
 break;
 case 78: //code ascii tombol n di keyboard komputer
  tekan('6');
 break;
 case 77: //code ascii tombol m di keyboard komputer
  tekan('7');
 break;
 case 188: //code ascii tombol , di keyboard komputer
  tekan('8');
 break;

 //Untuk Tuts Hitam
 case 83: //code ascii tombol s di keyboard komputer
  tekan('1kres');
 break;
 case 68: //code ascii tombol d di keyboard komputer
  tekan('2kres');
 break;
 case 71: //code ascii tombol g di keyboard komputer
  tekan('4kres');
 break;
 case 72: //code ascii tombol h di keyboard komputer
  tekan('5kres');
 break;
 case 74: //code ascii tombol j di keyboard komputer
  tekan('6kres');
 break;
 }
};

//fungsi ini akan dijalankan pada saat cursor (jari) menekan tuts piano
//tuts putih
$('.1').click(function(){
 tekan('1');
});
$('.2').click(function(){
 tekan('2');
});
$('.3').click(function(){
 tekan('3');
});
$('.4').click(function(){
 tekan('4');
});
$('.5').click(function(){
 tekan('5');
});
$('.6').click(function(){
 tekan('6');
});
$('.7').click(function(){
 tekan('7');
});
$('.8').click(function(){
 tekan('8');
});

//tuts hitam
$('.1kres').click(function(){
 tekan('1kres');
});
$('.2kres').click(function(){
 tekan('2kres');
});
$('.4kres').click(function(){
 tekan('4kres');
});
$('.5kres').click(function(){
 tekan('5kres');
});
$('.6kres').click(function(){
 tekan('6kres');
});

//pada saat ditekan maka akan menjalankan fungsi ini
function tekan(tuts){
 $('#'+tuts).html('<audio controls autoplay  src="assets/audio/'+tuts+'.ogg" class=""></audio>');
 warna(tuts);
}

//fungsi ini untuk mengubah warna tuts menjadi kuning pada saat ditekan
function warna(tuts){
 $('.'+tuts).addClass('kuning');
 setTimeout(function(){
  $('.'+tuts).removeClass('kuning');
 },100);
}

Untuk full code silahkan download di bitbucket
Bitbucket : <<piano-berbasis-web-2>>

Ini dia video tutorial yang ditunggu-tunggu. selamat menikmati :p




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

Demo Piano Berbasis Web #1

12.55 Add Comment

Demo Piano Berbasis Web #1 oleh Programmerwati

 

Silahkan tekan huruf z,x,c,v,b,n,m dan koma untuk tuts putih
s,d,g,h,j untuk tuts hitam
yang belum tau cara membuatnya bisa ikuti di tutorial berikut ini
Tutorial membuat piano berbasis web #1

Belajar Membuat Piano Berbasis Web #1

10.11 Add Comment
  1. Buatlah tag html seperti biasa kalian membuat sebuah website, seperti ini 
    <html>  
</html>
  2. Oh iya setiap tag yang kalian buat jangan lupa untuk menutupnya
  3. Di dalam tag html buatlah tag head dan tag body 
    <html>  
      <head>  
      </head>  
      <body>  
      </body>  
 </html>
  4. 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>
  5. 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>
  6. 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> 
  7. Lanjutkan dengan membuat kode untuk tuts hitam
  8. Kode html sudah kita buat, sekarang kita akan membuat kode javascript.
  9. 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>
  10. Tag script merupakan awal atau pembuka dari kode javascript
  11. 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>
  12. 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>
  13. 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.
  14. 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>
  15. E.keycode adalah value dari code ascii yang akan di pisah pisah ke setiap case. 
  16. 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>
  17. 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>
  18. 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>
  19. 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.
  20. Buka file piano.html dengan browser, alangkah baiknya menggunakan browser Google Chrome, karena akan lebih ringan jika dibuka dengan browser ini.
  21. 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.
  22. 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 :)


 
Langganan: Postingan (Atom)

Kategori

Kategori