HTML5 Audio Player Yapımı
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

HTML5 Audio Player Yapımı

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3521)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/unuhk.png
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



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol