HTML5 audio Etiketi

6 Aralık 2011
Bu yazıyı beğendiysen paylaşmayı unutma :)
Pin It

HTML5 AudioŞu sıralar HTML5 ve CSS3 ile birlikte gelecek yeni özelliklerle sık sık haşır neşir olmaya başladım. Bundan sonra da bu durum artarak devam edecek. Bu arada yaptığım çalışmaları da yine DeliPenguen üzerinden paylaşıyor olacağım. Gelin şimdi HTML5 ile birlikte gelen ‘audio‘ etiketine bir göz atalım.

Audio etiketi, adından da anlaşılacağı üzere web siteniz üzerinden müzik ve ses akışlarını çalmanızı sağlayacak bir komut. HTML5 audio etiketleri temel olarak iki etiketten oluşuyor. Bunlardan biri ses içeriğinin tanımlandığı “audio“, diğeri ise ses dosyalarınız tanımladığı “source” etiketleri. Source’un video etiketi ile de kullanıldığını sonraki yazılarımızda göreceğiz.

Gelin şimdi en temel haliyle kodlarımıza bakıp, inceleyelim.

<audio controls=”controls”>
  <source src=”sample.ogg” type=”audio/ogg” />
  <source src=”sample.wav” type=”audio/wav” />
  <source src=”sample.mp3″ type=”audio/mp3″ />
  HTML5 Audio etiketi şu anda kullanmakta olduğunuz tarayıcı tarafından desteklenmemektedir.
</audio>

audio” etiketinin aldığı temel parametre “controls“. Bu parametre ses çalarımızın kontrol komutları da denebilecek oynatma, durdurma, ses denetimi gibi araçlarını çalıcı üzerine ekler. İçerisinde bulunan source etiketi ise çalmak istediğimiz ses dosyalarını belirttiğimiz bölümü oluşturur. İki parametre ile tanımlamaları yapılabilir. Bunlar; dosya adını ve yolunu belirttiğimiz “src” ve dosya tipimi belirtebileceğimiz “type” parametreleridir. “HTML5 Audio etiketi şu anda kullanmakta olduğunuz tarayıcı tarafından desteklenmemektedir.” mesajını fark etmişsinizdir. Bu yazıyı da HTML5 desteklemeyen tarayıcılar için ekliyoruz.

Dikkat ettiyseniz kodumuzda HTML5 audio etiketinin desteklediği 3 farklı formatta aynı ses dosyamız var. Bunun sebebi ise tamamen tarayıcı destekleri ile ilgili. Peki bu işlem nasıl çalışıyor?

Kullanmış olduğunuz tarayıcı çalacağı ses dosyasını sıralı halde arıyor. Örneğin; Opera kullandığınızı varsayalım. Wav ve Ogg formatları desteklediği için ilk sıradaki ses dosyasını hemen çalmaya başlayacak. Bu sefer Safari kullandığınızı varsayalım. Safari Ogg formatını desteklemediği için ilk ses dosyasını geçip ikinciyi kontrol edecek. Wav formatını desteklediği için de çalmaya başlayacak.

Tarayıcıların destekledikleri ses formatlarına aşağıdaki tablodan göz atabilirsiniz.

HTML 5 Audio Tarayıcı Destekleri
Maalesef tarayıcı farklılıkları konusu bu kadarla da kalmıyor. Ses oynatıcımızın görünümü de her tarayıcı da farklılık gösteriyor. Aşağıda testini yaptığım tarayıcılardaki ses oynatıcılarının ekran görüntülerini görebilirsiniz.

Firefox Player

Firefox 4.01

Opera Player

Opera 11.52

Chrome Player

Google Chrome 15.0.874.121 m

Internet Explorer Player

Internet Explorer 9

Bence Opera’nın ki güzel görünüyor. Sizce hangisi?

Benzer Yazılar


DeliPenguen'i Google+'da bulun



Henüz yorum yok.