Javascript – Piyano Yapımı – Ses Kullanım Örneği

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 ReMiFa 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>

İlk yorum yapan olun

Bir yanıt bırakın

E-posta hesabınız yayımlanmayacak.


*