HTML5 öncesi web sitesinden müzik çalabilmek için Windows Media Player, Flash Player ya da Silverlight kullanmak, hatta Flash ya da Silverlight’ta hazır kodlar istekleri karşılamıyorsa oturup sıfırdan yazmak gerekirdi. HTML4 içerisinde yer alan object bir miktar iş görse de yeterli değildi. HTML5 ile gelen audio ile müzikleri tarayıcı üzerinden kolaylıkla çalıştırabilir, çalma listesi oluşturabilir, kolaylıkla yönetebilirsiniz.
HTML5 Audio ile Web Sitesine Müzik Ekleme
Audio etiketinin kullanımını bir örnek ile inecleyelim. Sayfamızda, aynı klasörde bulunan Muzik1.mp3 isimli dosyayı audio etiketiyle çalıştıralım.
<audio id="adMuzikcalar" controls="controls" runat="server">
<source src="Muzik1.mp3" />
</audio>
Sayfayı açıp play tuşuna bastığımızda şarkı çalmaya başlayacaktır.
Asp.Net ve Html5 Audio ile Arka Arkaya Müzik Çalma İşlemi
İlk örneğimizi başarıyla tamamladığımıza göre artık konumuza dönebiliriz. Yapmak istediğimiz, şarkı listesini veritabanından alıp sayfamızda bu şarkıları arka arkaya çalma işlemidir.
Sayfamıza bir adet audio kontrolü ile bir adet HiddenField ekleyelim. Audio kontrolünde müzik çalarken HiddenField kontrolünde de çalacak şarkıların isimleri (urlleri) yer alacak. Böylelikle sitede çalacak olan her şarkı için sunucuya tekrar gitmeye gerek kalmadan sayfa içinden (client) şarkı listesini yönetebileceğiz.
<body>
<form id="form1" runat="server">
<div>
<audio id="adMuzikcalar" controls="controls" runat="server"></audio>
<asp:HiddenField ID="hdfSarkiListesi" runat="server" />
</div>
</form>
</body>
Kodlamamızı jQuery ile gerçekleştireceğimiz için jQuery dosyasını sayfanın head bloguna ekleyelim.
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
Şimdi kodlamamıza geçebiliriz.
$(function () {
var player = document.getElementById('adMuzikcalar');
var sarkilar = document.getElementById('hdfSarkiListesi').value;
var sarkiListesi = sarkilar.split(',');
var calanSarki = 0;
function SonrakiSarki() {
var audioSource = player.getElementsByTagName('source');
if (calanSarki == sarkiListesi.length - 1) {
audioSource[0].src = audioSource[0].src.replace(sarkiListesi[calanSarki], sarkiListesi[0]);
calanSarki = 0;
player.load();
player.play();
}
else {
var calacakSarki = calanSarki + 1;
audioSource[0].src = audioSource[0].src.replace(sarkiListesi[calanSarki], sarkiListesi[calacakSarki]);
calanSarki = calacakSarki;
player.load();
player.play();
}
}
player.addEventListener('ended', function () {
SonrakiSarki();
});
});
Yazdığımız kodların satır satır açıklaması:
$(function () {
//player: Sayfa içerisindeki audio kontrolüdür. Player içerisinde hangi şarkının çalacağını belirlemek için bu nesneyi kullanacağız.
var player = document.getElementById('adMuzikcalar');
//sarkilar: Page_Load eventında şarkı listesini virgülle ayırıp hdfSarkiListesi değişkenine atayacağız. Bu değişkenle hdfSarkiListesi’ndeki virgülle ayrılmış şarkı isimlerini alıyoruz.
var sarkilar = document.getElementById('hdfSarkiListesi').value;
//sarkiListesi: Virgülle ayrılan şarkı listesini (sarkilar) parçalayıp sarkiListesi isimli diziye alıyoruz. Böylelikle şarkı yönetimini daha kolay yapabileceğiz.
var sarkiListesi = sarkilar.split(',');
//calanSarki: Şu an çalan şarkının, sarkiListesi’nin kaçıncı elemanı olduğu bilgisini tutuyoruz.
var calanSarki = 0;
//SonrakiSarki: Sonraki şarkıya geçiş fonksiyonudur. Eğer son şarkıda ise ilk şarkıya dönecek ve çalmaya devam edecektir.
function SonrakiSarki() {
//audioSource: Audio kontrolünün source’unda tanımlanan şarkı isimini belirtir. Kontrolümüz içinde yer alan source tagını (hangi müziğin çalacağını belirttiğimiz yeri) alır.
var audioSource = player.getElementsByTagName('source');
//Eğer çalan şarkı, listedeki son şarkı ise ilk şarkıyı çal.
if (calanSarki == sarkiListesi.length - 1) {
//Source kodu içindeki src değeri yani şu an hangi şarkının çaldığı bilgisi sarkiListesi[calanSarki]’da yer almaktadır. Bunu sarkiListesi[0] (ilk şarkı) ile değiştirir. Böylelikle player yeniden çalıştığında ilk şarkıyı çalacaktır.
audioSource[0].src = audioSource[0].src.replace(sarkiListesi[calanSarki], sarkiListesi[0]);
//Şu an çalan şarkının, sarkiListesi’nin 0. elemanı olduğunu tanımlar.
calanSarki = 0;
//Playerı son haliyle (yeni şarkısı atanmış şekilde) yeniden yükler.
player.load();
//Playerı çalıştırır ve yeni şarkı çalmaya başlar.
player.play();
}
//Eğer çalan şarkı, listedeki son şarkı değilse sonraki şarkıyı çal.
else {
//Çalacak olan şarkının, şu an çalan şarkıdan bir sonraki şarkı olduğunu tanımlar.
var calacakSarki = calanSarki + 1;
//Source kodu içindeki src değeri yani şu an hangi şarkının çaldığı bilgisi sarkiListesi[calanSarki]’da yer almaktadır. Bunu sarkiListesi[calacakSarki] (sonraki şarkı) ile değiştirir. Böylelikle player yeniden çalıştığında bir sonraki şarkıyı çalacaktır.
audioSource[0].src = audioSource[0].src.replace(sarkiListesi[calanSarki], sarkiListesi[calacakSarki]);
//Artık çalan şarkı değerinin bir sonraki şarkı (calacakSarki) olduğunu tanımlar.
calanSarki = calacakSarki;
//Playerı son haliyle (yeni şarkısı atanmış şekilde) yeniden yükler.
player.load();
//Playerı çalıştırır ve yeni şarkı çalmaya başlar.
player.play();
}
}
//player kontrolündeki şarkı bittiğinde (ended) SonrakiSarki fonksiyonunun çalışmasını tanımlıyoruz. Böylelikle şarkı bittiğinde hemen yeni şarkı listeden belirlenip çalışacaktır.
player.addEventListener('ended', function () {
SonrakiSarki();
});
});
Son olarak sayfanın Page_Load eventında şarkı listesini veritabanından alıp (örnekte listede tanımlıyoruz, bunun yerine veritabanından alabilirsiniz) audio ve hiddenField kontrollerine atama işlemlerini gerçekleştirelim.
protected void Page_Load(object sender, EventArgs e)
{
List<string> sarkilar = new List<string>()
{
"Muzik1.mp3",
"Muzik2.mp3"
};
adMuzikcalar.InnerHtml = "<source src='" + sarkilar[0] + "'></source>";
hdfSarkiListesi.Value = string.Join(",", sarkilar.ToArray());
}
Sayfayı çalıştırdığınızda ilk şarkı (Muzik1.mp3) çalmaya başlayacaktır. Şarkı bittiğinde sonraki şarkı (Muzik2.mp3) çalacaktır. Muzik2.mp3 çalması bittiğinde listede başka eleman olmadığı için tekrar Muzik1.mp3 çalacak ve bu şekilde döngü devam edecektir.
Yepyeni makalelerde görüşmek dileğiyle :)
Veysel Uğur KIZMAZ
Bilgisayar Mühendisi
veysel@ugurkizmaz.com
www.ugurkizmaz.com