Javascript içinde ses kullanımı teorik bilgisi edinmek için tıklayınız.
Örnek Uygulamayı açmak için tıklayınız.
Uygulamada Kullanılan sesleri indirmek için tıklayınız. Do – Re – Mi– Fa – Sol – La – Si
Ücretsiz ses indirebileceğiniz bir kaç site MixKit
Uygulamada kullanılan piyano resmi.
Ders Anlatım videosuna ulaşmak için tıklayınız.
Uygulamanın Kaynak Kodları
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#piyano {
margin: auto;
width: 800px;
height: 500px;
background-image: url("piyano_resmi.jpg");
}
.nota_konum {
position: relative;
top: 90%;
font-size: 30px;
float: left;
width: 20px;}
#do {left: 10%;}
#re {left: 20%;}
#mi {left: 28%;}
#fa {left: 38%;}
#sol {left: 46%;}
#la {left: 55%;}
#si {left: 65%;}
</style>
</head>
<body>
<audio id="do_ses">
<src="do.wav">
</audio>
<audio id="re_ses">
<source src="re.wav">
</audio>
<audio id="mi_ses">
<source src="mi.wav">
</audio>
<audio id="fa_ses">
<source src="fa.wav">
</audio>
<audio id="sol_ses">
<source src="sol.wav">
</audio>
<audio id="la_ses">
<source src="la.wav">
</audio>
<audio id="si_ses">
<source src="si.wav">
</audio>
<script>
function nota_cal(yer) {
if (yer.style.color=="black") {yer.style.color="red";}
else {yer.style.color="black";}
ses_adi= yer.id;
var calinacak_ses = ses_adi + '_ses';
document.getElementById(calinacak_ses).play();
}
</script>
<div id="piyano">
<div id="do" onclick="nota_cal(this)" class="nota_konum">DO</div>
<div id="re" onclick="nota_cal(this)" class="nota_konum">RE</div>
<div id="mi" onclick="nota_cal(this)" class="nota_konum">Mİ</div>
<div id="fa" onclick="nota_cal(this)" class="nota_konum">FA</div>
<div id="sol" onclick="nota_cal(this)" class="nota_konum">SOL</div>
<div id="la" onclick="nota_cal(this)" class="nota_konum">LA</div>
<div id="si" onclick="nota_cal(this)" class="nota_konum">SI</div>
</div>
</body>
</html>
Bir yanıt bırakın Cevabı iptal et