Bu dersimizde html5 kullanarak audio-playeri nasıl yönetiriz onu göstreceğim.Hemen kodlarımıza geçelim.
İlk olarak sayfamıza bir audio tagı koymamız gerek.
<audio id="audio-player">
<source src="a.mp3" />
<source src="a.ogg" />
Tarayıcız audio tagını desteklemiyo...
</audio>
Html5 ile müzikleri bu şekilde ekliyoruz.Sayfada hiç bir şey gözükmeyecektir çünkü control panelini aötırmadık.Şimdi javascript kodlaramıza geçelim.
<script type="text/javascript">
var player=document.getElementById("audio-player");
</script>
Öncelikle audio playera erişmemiz gerekiyoz.Bunuda audios playıra id atayarak yapıyoruz.Şimdi işlem kodlarımıza bakalım.
player.play() = Müziği oynatır.
player.pause() = Müziği durdurur.
player.currentTime =Müziğin o anki saniyesini almamıza yada değiştirmemizde yarar.
player.volume = Müziğin sesini almamıza yada değiştirmemize yarar.
player.duration = Müziği toplam süresini veriyor.
Yukarıdaki player bir üsten erişim için oluşturduğumuz değişken.
Yukarıda direk süreyi almak için
var s=player.currentTime;
Değiştirmek için
player.currentTime=5;
yaparız.Aynı şeyler volume ve duration içinde geçerlidir.
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<audio id="audio-player" style="display:none;">
<source src="muzik.mp3" />
Tarayıcız audio tagını desteklemiyo...
</audio>
<button onClick="oyna()">Oyna/Dur</button><br />
<div id="sure"></div>
<script type="text/javascript">
var player=document.getElementById("audio-player");//playera eriştik
var sure_alan=document.getElementById("sure");//süreyi koyacağımız yere eriştik
function oyna(){//oyna fonksiyonu çağırılırsa
if (player.paused) {//eğer çalmıyosa
player.play();//çal
sure();//sure fonksiyonunu çağır.
}else{
player.pause();//çalıyosa durdur
}
}
function sure(){//sure fonksiyonu çalırılırsa
var sure=player.currentTime;//o anki süreyi al
sure_alan.innerHTML=sure;//sayfaya bas
setTimeout("sure()",10);//fonksiyonu yine çağır.
}
</script>
</body>
</html>
Görüntüsü :
Bu şekilde butona basılırsa o anki süreyi alıyor ve çalıyor.Tekrar basılırsa müzik duruyor.Bu temel alt yapısıdır.Biraz daha javascript ve jquery kullanılarak çok daha iyilerini yapabilirsiniz ve css ile güzel bir tasarım yapabilirsiniz.
Örnek olarak şuna bakabilirsiniz :
http://ustaderslik.com/konu/HTML5_Cix_Audio_Player_%C3%B6rne%C4%9Fim
UstaDerslik
