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 :)
Apabila ada pertanyaan atau masukan silahkan tulis di kolom komentar. Terima kasih.
EmoticonEmoticon