HTML5 hikayelerinde her zaman en ön planda olanlar özelliklerden, konulardan
biri audio ve video olur :) Eh HTML5 yeni birşey ve problemleri çözüyor vs diye
düşünürken bilmem hiç denediniz mi ama tün HTML5 hikayesinde bir video veya
audio tagını her tarayıcıda çalışır hale getirmek için yine her zamanki
HTML/JavaScript taklalarını atmak gerekiyor :)
Son günlerde bu tarz bir proje üzerinde çalışırken keşfettiğim birkaç taklayı
sizle paylaşmak istiyorum. Amacımız HTML5 ile tarayıcı içerisinde (tüm
tarayıcılarda) ses dosyaları oynatmak. İlk olarak HTML5'deki audio tagının her
tarayıcıda çalışmasını sağlamalı, sonrasında da HTML5 desteklemeyen tarayıcılar
için Silverlight ile bir "kurtarma operasyonu" şansı tanımalıyız :)
W3C her şeye karışmıyor aslında...
W3C'ye
baktığımızda HTML5 tagının tüm güncel tarayıcılarda desteklendiğini
görüyoruz. Fakat W3C'nin ilgilenmediği bir nokta var :) O da bu taglerle
oynatılabilecek ses dosyalarının formatı! Biraz daha konuyu
karıştırdığımızda görüyoruz ki şu an piyasadaki tüm tarayıcılarda sadece MP3, Wav,
ve Ogg desteği var. MP3'ü görünce kendinizi mutlu hissetmeye başlayabilirsiniz
ama durun :) Firefox ve Opera MP3 desteklemiyor. Bu arada zaten WAV'ı listeden
direk siliyorum :) PCM stream edecek değiliz. Firefox ve Opera ne destekliyor
başka diye baktığımızda karşımıza OGG çıkıyor. Ama OGG'yi de Safari ve Internet
Explorer desteklemiyor :) Yani özetle, herkesin desteklediği bir format yok. Ama
eğer biz hem OGG hem MP3 sağlayabilirsek işte o zaman her yerde destek
bulabiliriz.
Hem MP3 hem OGG lazım....
Çözümü bulduk. Eğer HTML5 ile her tarayıcıda bir ses dosyası oynatmak
istiyorsak mecburen hem MP3 hem de OGG sağlamamız şart. Peki bunu nasıl yaparız?
[HTML]
<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
Yukarıdaki kod çok basit gözüküyor :) Sırası ile farklı codec'lerdeki
dosyalarımızı ayrı ayrı source olarak audio
kontrolüne veriyoruz ve işlem bitiyor. Her tarayıcı otomatik olarak kendi
oynatabildiğini seçiyor. Şimdi gelelim başka bir soruna...
JavaScript ile source değişimi....
Benim uygulamam gereken senaryoda sayfada bir tane Audio tagı, yani bir
player olacaktı. Sayfadaki bir başka playlistten hangi şarkıyı seçerseniz o
oynatılacak audio tagında.. Hmmm demek ki source'u JavaScript
ile değiştirmemiz lazım. İşte tam da bu noktada çoklu source verdiğinizde
tarayıcıların bug'ları işin içine giriyor ve adam gibi bir çözüm bulmak
neredeyse imkansız oluyor. Bir enumaration olarak Source listesini alıp
değiştirebileceğinizi düşünürken hikayenin o şekilde çalışamadığını
görüyorsunuz.
[JavaScript]
var source = document.createElement('source');
if (document.getElementById('videotag').canPlayType('audio/mpeg;')) {
source.type = 'audio/mpeg';
source.src = URL;
} else {
source.type = 'audio/ogg';
source.src = OGG;
}
İşte yukarıdaki kod hayatınızı kurtarabilir :) Kod içerisinde yeni bir
source tagi yaratıp, sonrasında sayfadaki adı videotag
olan audio elementini bulup oynatabildiği codec'i de canPlayType
metodu ile kontrol edip... yeni source'u video tagine aşağıdaki şekilde
ekleyebiliyoruz.
[JavaScript]
document.getElementById('videotag').appendChild(source);
document.getElementById('videotag').play();
Sorun çözüldü :) Bu kod tüm tarayıcılarda çalışacaktır. Peki ya HTML5 yoksa?
yani tarayıcı audio tagını hiç desteklemiyorsa? İşte o zaman sayfaya bir
Silverlight player koyacağız. İster hazır bir Silverlight player bulun ister
kendiniz yazın önemli olan o Silverlight Player'ı sayfaya JavaScript ile
koyabilmeniz ve benim senaryomda yine JavaScript ile SL Player'a hem oynatacağı
dosyanın yolunu hem de gerekli play/stop komutlarını gönderebilmek.
Not: Silverlight içerisinde nesne ve Play/Stop
gibi metodları, işlemleri JavaScript'e açabilmek için "Silverlight
2.0 ve JavaScript Kardeşliği" makalesine göz atabilirsiniz.
İlk olarak sayfamız açıldığında tarayıcının HTML5'in audio tagini destekleyip
desteklemediğini bulmamız gerek. Bunun için basit bir şekilde, daha önceki
adımlarda kullandığımız canPlayType metodunun var olup
olmadığını kontrol edebiliriz.
[JavaScript]
if (!document.createElement('audio').canPlayType)
Eğer canPlayType yoksa belli ki HTML5 desteği yok ve artık
Silverlight kontrolünü sahneye koymanın zamanı geldi. Yeni bir SL nesnesi
yaratıp, onu bir XAP ile ilişkilendirip sahneye koymak için
Silverlight.js
dosyası içerisindeki createObject metodunu kullanacağız.
Bahsettiğimiz Silverlight.js zaten her Silverlight projesi ile beraber gelir ve
Silverlight SDK içerisinde de bulunur. Bu dosyayı sayfaya include ettikten sonra
aşağıdaki şekilde SL objemizi yaratabiliriz.
[JavaScript]
var getSilverlightMethodCall =
"javascript:Silverlight.getSilverlight(\"4.0.60310.0\");"
var installImageUrl =
"http://go.microsoft.com/fwlink/?LinkId=161376";
var imageAltText = "Get Microsoft Silverlight";
var altHtml =
"<a href='{1}' style='text-decoration: none;'>" +
"<img src='{2}' alt='{3}' " +
"style='border-style: none'/></a>";
altHtml = altHtml.replace('{1}', getSilverlightMethodCall);
altHtml = altHtml.replace('{2}', installImageUrl);
altHtml = altHtml.replace('{3}', imageAltText);
Silverlight.createObject(
"ClientBin/sl_player.xap",
slhost, "slPlugin",
{
width: "100%", height: "100%",
background: "white", alt: altHtml,
version: "4.0.60310.0"
},
{ onError: onSLError, onLoad: onSLLoad },
"param1=value1,param2=value2,param3=varsa
init
paramlar buradan gönderilebilir", "row3");
Yukarıdaki kodu ben de Silverlight SDK'in içinden çaldım :) Burada dikkat
edilmesi gereken birkaç nokta var. Birincisi slhost adındaki
parametre Silverlight objesinin yerleştirileceği sayfadaki host elementi. Yani
aşağıdaki gibi bir DIV.
[HTML]
<div id="slhost">
</div>
Böyle bir DIV'i sayfada istediğiniz yere koyarsanız. Bir üstteki JavaScript
kodu çalıştığında SL projeniz bu DIV içerisine yerleştirilecektir. JavaScript
kodundaki parametrelerden biri tabi ki XAP dosyasının yolu. Onu zaten
ayarlarsınız uygun şekilde. Bir diğer parametre ise bende "slPlugin"
olarak atanmış olan sayfa içerisinde SL objenizin adı. Bu isim, SL objesinin
document.getElementById('slPlugin') şeklinde ulaşmak
istediğinizde kullanacağınız nesne adını belirliyor. Daha önce de dediğim gibi
JavaScript ile bu SL player'a dosya yolu göndermemiz ve o dosyayı oynatması için
komut vermemiz gerekecek. O nedenle JavaScript'ten bu SL objesine ulaşabilmemiz
çok kritik.
JavaScript kodundaki diğer parametreler sanırım anlaşılır durumdalar.
Yükseklik, genişlik vs açıklamaya gerek yok. Son bir nokta ise alt
parametresi ile ilgili. Bu parametreye vereceğiniz HTML eğer ki sistemde SL
Runtime yüklü değil ise yine bizim slhost DIV'i içerisine
konacak olan HTML. Örnekteki kodu ben SDK'den aldığımız için standard "Get
Microsoft Silverlight" yazısı gelecektir. İsterseniz JavaScript'teki HTML'yi
değiştirebilirsiniz.
Silverlight ve JavaScript
Bu konuda özellikle "Silverlight
2.0 ve JavaScript Kardeşliği" makalemi okumanızı tavsiye ederim. Detaylara
girmeden ben özellikle bu projede ne yaptığımdan bahsedeceğim.
Silverlight projesinde ekrana bir MediaElement atıp aşağıdaki şekilde de ufak
bir Play metodu yazıp bunu ScriptableMember olarak
tanımlıyoruz.
[C#]
[System.Windows.Browser.ScriptableMember()]
public void Play(string URL)
{
myMedia.Source = new Uri(URL, UriKind.Absolute);
myMedia.Play();
}
Metod malum URL'i parametre olarak alıp myMedia adındaki
MediaElemente atıp oynatıyor. Ayrıca App Start'ta tüm SL
projesini aşağıdaki şekilde ScritableObject olarak tanımlayıp adını da "Page"
veriyoruz.
[C#]
var Root = new MainPage();
System.Windows.Browser.HtmlPage.RegisterScriptableObject("Page", Root);
this.RootVisual = Root;
Son olarak artık JavaScript'ten dosya yolunu verip C#'daki Play metodunu
çağırabiliyoruz.
[JavaScript]
document.getElementById('slPlugin').Content.Page.Play('URLBURADA');
Gördüğünüz üzere basit bir audio player işi tahmin ettiğinizden daha karışık
hale gelebiliyor. Özetle dikkat etilmesi gereken birkaç nokta var;
- MP3 ve OGG tüm tarayıcılar için şart.
- canPlayType ile codec kontrolü yapılabilir.
- HTML5 desteği yoksa SL veya Flash player şart.
- SL dosyasını JavaScript'ten sayfaya alıp kontrol edebiliriz.
Hepinize kolay gelsin! ;)