Yayınladığım tüm makaleler

Atölye çalışması-13 (Mini piano)

      Merhaba gençler bu makalede sizlerle birlikte atölyede birlikte kodladığımız mini piyano uygulamasını ele alacağız. Uygulamamızda piyanomuzun tuşlarını oluşturmak için sıralı liste etiketi olan < OL> ile köprü etiketi olan < A > yı kullanıyoruz. Elbette bu tuşlara bastığımızda ilgili notanın sesini vermesi için de < AUDIO > etiketini kullanıyoruz.  Bu uygulamayı kodladıktan sonra çalıştırdığımızda sesleri duyabilmemiz için tarayıcımızda varsayılan olarak engellenmiş olan ses ve görüntüyü oynatma seçeneğini etkinleştirmemiz gerekmetedir. Uygylamada yerine göre < TABLE >, < DIV >, < SPAN >  vb. birçok etiket de kullandığımızı unutmayalım ama biz şimdilik onlara odaklanmıyoruz. Bu uygulamada ayrıca genellikle yurt dışı menşeili notalar  A, B, C, D vb. şeklinde ifade edildiği için harflerden oluşan bu gösterimleri Do, Re, Mi, Fa şeklindeki gösterime dönüştüren bir javascript kod bölümü de yazdık ki normalde bu bölüm açıklama satırına dönüştürülmüş durumda ama istenildiğinde etkinleştirilerek A,C,D şeklindeki nota dizilimleri Do,Re,Mi şeklindeki dizilimlere dönüştürülebilir. Uygulamamızda oynatılan notaların seslerini Audacity programı yardımı ile kestik ve düzenledik fakat elbette kaba bir işçilik oldu bu nedenle sizler bu notaların seslerini daha özenli bir biçimde işleyerek ekleyebilirsiniz. Son olarak bu örnekten yola çıkarak kodlamaya meraklı arkadaşlarım herbir nota için tam, yarım, çeyrek, 8' lik ve 16' lık sesleri elde edip sonrasında es verme süresini de ekleyerek daha verimli bir oynatıcı yapabilirler, işin algoritması size kalmış. Uygulama tamamlandığında aşağıdaki gibi ekran görüntüsü elde edeceksiniz yine bu sayfanın sonunda verdiğim css kodlarını değiştirerek farklı bir görsellik elde edebilirsiniz.

Gelelim sayfamızın HTML kodlarına ki bunlar tam olarak aşağıda verdiğim gibidir.

<html lang="en">
<head>
<meta charset="utf-8" />
<title>..:: Program akış kontrolü ve tekrarlanan işlemler ::..</title>
<meta name="generator" content="Geany 1.32" />
<style type="text/css">
 
</style>
<script language="javascript" type="text/javascript">
 
</script>
</head>
<body onload="ayarla()">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td height="5%" id="baslikTD" colspan="3"><span style="color:crimson"><ol></span> kullanarak mini piano</td>
</tr>
<tr>
    <td colspan="3" height="90%" align="center" valign="middle">
    
    <div id="tutucu">
        <ol>
            <li><a id="Ndo" href="#" onMouseOver="oynat('do')">Do</a></li>
            <li><a id="Nre" href="#" onMouseOver="oynat('re')">Re</a></li>
            <li><a id="Nmi" href="#" onMouseOver="oynat('mi')">Mi</a></li>
            <li><a id="Nfa" href="#" onMouseOver="oynat('fa')">Fa</a></li>
            <li><a id="Nsol" href="#" onMouseOver="oynat('sol')">Sol</a></li>
            <li><a id="Nla" href="#" onMouseOver="oynat('la')">La</a></li>
            <li><a id="Nsi" href="#" onMouseOver="oynat('si')">Si</a></li>
            <li><a id="Ndo2"href="#" onMouseOver="oynat('do2')">Do</a></li>                         
        </ol>
        <br /><br />
        <div style="margin-left:40px; margin-top: 10px;">
        Oynatılan nota: <label id="gosterge"></label>
        </div>
        <div style="margin-left:40px; margin-top: 10px;">
            
            Oynatmak istediğiniz notları giriniz: 
            <input id="txtMuzik" type="text" style="font-size:14px" value="sol,fa,sol,la,sol,fa,mi, ,re,fa,mi,re,mi, , ,sol,fa,sol,la,sol,fa,mi, ,re,fa,mi,re,do, " />
            <input type="button" id="btnOynat" value="Oynat" onclick="baslat();" />
            <select id="parcalar" onchange="ayarla();">
                <option value="0" selected>Postacı</option>
                <option value="1">Jingle Bell</option>
                <option value="2">Neşeye şarkı</option>
            </select>
        </div>
        <div style="margin-left:40px; margin-top: 10px;">
        <span style="color:crimson">Dikkat!</span><br />
        Tüm notalar tam notadır, yarım, çeyrek vb. nota yoktur, notalar arasında bekleme yapmak (es vermek) isterseniz <span style="color:#0080ff">nota1, ,nota2</span> şeklinde
        boşluk kullanabilirsiniz.
        </div>   
        ="ses">
            src="" type="audio/mpeg">
            Tarayıcınız ses dosyası biçimini desteklemiyor
        </audio> 
    </div>    
    
    </td>
</tr>
<tr>
    <td height="5%" width="10%" id="konumTD"></td>
    <td height="5%" width="80%" align="center">
    </td>
    <td height="5%" width="10%" id="tasarimciTD"><a href="https://bilalsert.com.tr">www.bilalsert.com.tr</a></td>
</tr>
</table>
</body>
</html>

Piyanomuzun çalışabilmesi yani tuşların üzerine fare ikonu geldiğinde ilgili notanın sesini vermesi ya da açılan kutudan bir parça seçildiğinde onu oynatabilmesi için yazılması gereken JavaScript kodları aşağıda verdiğim kodlardır. Piyanomuz otomatik oynatma işleminde her 400 milisaniyede bir nota basmakta ve bastığı notayı ekranda görüntülemektedir. Sizlere kolay gelsin lütfen dikkatli kodlayalım unutmayalım ki büyük küçük harf duyarlı kodlar yazmak dikkat gerektirir.

<script language="javascript" type="text/javascript">
//global degisken tanimlamalarini yapiyoruz
var notalar= new Array();
var notaSayici=0;
var islemID=0;
var islem=true;
var oynatilacak="";
var muzik=new Array();
muzik[0]="sol,fa,sol,la,sol,fa,mi, ,re,fa,mi,re,mi, , ,sol,fa,sol,la,sol,fa,mi, ,re,fa,mi,re,do, ";
muzik[1]="mi,mi,mi, ,mi,mi,mi, ,mi,sol,do,re,mi, ,fa,fa,fa, ,mi,mi,mi, ,re,mi,re,sol, ,mi,mi,mi, ,mi,mi,mi, ,mi,sol,do,re,mi, ,fa,fa,fa,,mi,mi,mi, ,sol,sol,fa,re,do, ,";
muzik[2]="do,do,re,mi,mi,re,re,mi,mi,fa,sol,sol,fa,mi,re, ,do,do,re,mi,re,do,do, ,re,re,mi,do, ,re,mi,fa,mi,re, ,re,mi,fa,mi,re,do,do,sol, ,mi,mi,fa,sol,sol,fa,mi,re, ,do,do,re,mi,re,do,do";
document.getElementById("txtMuzik").value=muzik[1];
function otomatikOynat(){
var nota=notalar[notaSayici];
if(nota!=" "){
document.getElementById("gosterge").innerHTML="" + "piano/" + nota +".mp3" +"";  
document.getElementById("ses").src="piano/" +nota  +".mp3";
document.getElementById("ses").play();  
}
notaSayici++;
if(notaSayici==notalar.length){
    clearInterval(islemID);
    document.getElementById("btnOynat").value="Oynat";
    islem=true;
}
}//otomatikOynat bitti
 
function oynat(nota){
 
document.getElementById("gosterge").innerHTML="" + "piano/" + nota  +".mp3" +"";  
document.getElementById("ses").src="piano/" + nota  +".mp3";
document.getElementById("ses").play();              
 
}//oynat bitti
 
function baslat(){
if(islem==true){
    notalar=oynatilacak.split(",");
    notaSayici=0;
    islemID=setInterval("otomatikOynat()",400);
    islem=false;
    document.getElementById("btnOynat").value="Durdur";
}else{
    clearInterval(islemID);
    document.getElementById("btnOynat").value="Oynat";
    islem=true;
}
}//baslat bitti
function ayarla(){
oynatilacak=muzik[document.getElementById("parcalar").value];
document.getElementById("txtMuzik").value=muzik[document.getElementById("parcalar").value];
}
< /script>

Evet gençler aşağıda veridiğim javascript kodları ise yurtdışı menşeili A,B,C şeklindeki nota dizilimlerini bizim kullandığımız notasyon olan Do,Re,Mi şeklindeki dizilime çevirmektedir. Bu kodları HTML kodlarında < / table > etiketinden sonra yapıştırıp sonrasında < !-- -- > ile pasif hale getirebilirsiniz.

<div style="position: absolute; left:20xp; top:80px">
<div id="icerik">div>
<script>
//do,re,mi,fa,sol,la,si,do
//C, D, E, F, G, A, B, C
var notes= ["do","re","mi","fa","sol","la","si","do2"];
var harfler=["C","D","E","F","G","A","B","C"];
var akis="B,B,B,B,B,B,B,D,G,A,B,C,C,C,C,C,B,B,B,A,A,B,A,D";
var kar=akis.split(",");
var indeks=0, sonuc="";
 
for(let i=0;i<kar.length;i++){			
    for(let k=0;k<harfler.length;k++){			
        if(harfler[k]==kar[i]){
            sonuc+=notes[k] + ",";
            break;
        }
    }
}   
document.getElementById("icerik").innerHTML=akis + "
" + sonuc;  
< / script>

Son olarak sayfamızdaki görsel düzenleme için yazılması gereken CSS kodlarına ki bunlarda aşağıdaki gibidir. Burada istediğiniz düzenlemeyi yaparak farklı görünüm elde edebilirisiniz. En nihayetinde tüm bunları kodladıktan sonra elinizde bunun gibi bir uygulama olacaktır.

<style type="text/css">
#baslikTD{
	background-color:#eee;
	color:gray;
	text-align:center;
	font-size:24px;
	border:1px solid gray;
}
#tasarimciTD{
	background-color:#ddd;
	color:black;
	text-align:right;
	font-size:12px;
	border:1px solid gray;
    padding-right: 10px;
}
#konumTD{
	color:black;
	background-color:#ddd;
	text-align:left;
	font-size:12px;
	border:1px solid gray;
}
a{
    color: #333;
    width: 80px;
    height: 25px;  
    text-decoration: none;                  
}  
a:hover{
    color:crimson;
}  
ol{
    list-style-type: none;
}
li{
    float: left;
    margin-right: 5px;
    text-align: center;
    font-weight: bold;
}
#tutucu{
    width:800px; 
    height: 250px; 
    padding-top:30px; 
    background-color:#eee;
    text-align: left;
    box-shadow: 3px 3px 5px #333;

}
#tutucu li a{
    background-color: yellowgreen;
    color: white;
    width: 80px;
    height: 25px;  
    display: inline-block;
    text-decoration: none; 
    padding-top: 5px;                  
}
#tutucu li a:hover{
    background-color:crimson;
    box-shadow: 3px 3px 3px #333;
}
< /style>