Bu yazımda basit olarak 1 mp3 dosyası üzerinde, jquery ile play, pause ve stop kontrollerinin nasıl çalıştırıldığından bahsedeceğim.
Uygulamada, html5 etiketlerinden audio etiketini kullanacağız. Bu etiket ile, mp3 dosyamızın yolunu belirleyip, jquery kodları ile bu dosya üzerinde mp3 oynatma, duraklatma ve durdurma kontrollerinin nasıl çalıştığını göreceğiz..Websitenizin arka planında müzik çalmak için kullanabileceğiniz bir uygulama. Uygulamanın kaynak kodları aşağıdadır:
<head></head> etiketleri arasında jquery kütüphanemizi çağıracağız :
1
|
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
|
<body></body> etiketleri arasına yazmamız gereken kodlar :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script>
$(document).ready(function(){
$("#oynat").click(function(){ //oynat butonu tıklanma olayı
$("#muzik-oynatici")[0].play(); // oynatma kontrolü
})
$("#duraklat").click(function(){ //duraklat butonu tıklanma olayı
$("#muzik-oynatici")[0].pause(); // duraklatma kontrolü
})
$("#durdur").click(function(){ //durdur butonu tıklanma olayı
$("#muzik-oynatici")[0].pause(); // durdurma kontrolü
$("#muzik-oynatici")[0].currentTime = 0; // bu alanda mp3 ün varsayılan süresini 0'a ayarlayarak, durmasını sağlıyoruz
})
})
</script>
<audio id="muzik-oynatici" src="http://www.limonata.org/down/yusuf%20guney%20-%20unut%20onu%20kalbim%20(remix).mp3" ></audio><!-- html5 etiketi-->
<a id="oynat" href="#"><img src="oynat.jpg" width="40" height="39" /></a> <a id="duraklat" href="#"><img src="duraklat.jpg" width="40" height="39" /></a> <a id="durdur" href="#"><img src="durdur.jpg" width="40" height="39" /></a>
|
Faydalı olması dileğiyle
