HTML5'te her tarayıcı ile uyumluluk yolunda audio tag kullanımı deneyimlerim

0 dakikada yazıldı

37743 defa okundu

Düzenle

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
konuyukarış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
birsource 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=varsainit
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
objesinindocument.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ındakiMediaElemente 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;

Hepinize kolay gelsin! ;)