HTML5'te Her Tarayıcı ile Uyumluluk Yolunda Audio Tag Kullanımı

07.01.2012

Kategori: HTML5

6372

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 slhostadındaki parametre Silverlight objesinin yerleştirileceği sayfadaki host elementi. Yani aşağıdaki gibi bir DIV.

[HTML]

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 ScriptableMemberolarak 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! ;)

Yazar Hakkında

Daron Yöndem

daron.yondem.com

DEVELOAD Yazılım şirketi kurucusu Daron Yöndem ASP.NET alanında aldığı MVP ünvanını son üç yıldır Silverlight alanında devam ettirmektedir. Microsoft Regional Director ünvanına da sahip olan Daron Yöndem’e 2009, 2010 ve 2011 yıllarında Microsoft tarafından “Gold Global Impact Award” ödülü verilmiştir. Microsoft TechEd, PDC, DevReach, Microsoft DevDays gibi uluslararası konferanslarda konuşmacı olan Daron Yöndem INETA (International .NET Association) Orta-Doğu Afrika Bölge Başkanlığı görevini sürdürürerek 262.000’i aşkın üyesi olan 58 sosyal topluluğa destek vermektedir. Üç Türkçe, üç İngilizce kitabı olan Daron Yöndem’in Wrox Publishing gibi uluslararası yayınevlerinden kitapları bulunmaktadır.

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar