Audio – Tarayıcıda ses dosyası çalma etiketi

0
1194
Görüntülenme

ses formatlarBir zamanlar web üzerinde  Flash, QuickTime ve Silverlight gibi üçüncü parti tarayıcı eklentileri sayesinde ses dosyaları oynatmak mümkündü. Kötü bir yol değildi  ama  bazı sorunları vardı bunların da. Html5 sayesinde artık Dünyanın en çok kullanılan tarayıcılarında müzik dosyaları çalmak çok kolay bir hale geldi. Sadece bir kaç satır kod yazarak bunu yapabilmeniz mümkün. Bir resim kodu eklemek kadar kolay bir yoldur.

Her zaman tarayıcılar arasındaki uyumsuzluk ve anlaşmazlıktan dert edindiğimi tekrar ederim. Bir çok özelliği kullanmak için tarayıcı ismini özelliğine başına ekleme sorunu bir yana tarayıcıların bu özellikleri desteklememeleri de başka bir dert olmuştur web tasarımcı arkadaşlar için. Aşağıdaki resimde Gördüğünüz  gibi her tarayıcı kendine özgü ses dosyalarını desteklerken gözünü sevdiğim Chrome hepsini destekliyor.

Html5 Audio Player - Html5 Ortam oynatici

Yukarıdaki resimden tam olarak ne anladığınızı bilmiyorum. Onun için biraz daha açıklama yapayım. Web üzerinde kullanılabilen .aac,  .mp3,  .ogg,  .webm diye 4 çeşit ses dosyası bulunuyor. Hepsi aynı şekilde çalsa da format olarak değişik türden kaydedilmiş dosyalardır. Chrome hariç kimi tarayıcılar .mp3 destekler kimisi .ogg kimisi .webm   kimiside .aac türünden ses dosyalarını destekler ve kendi içerisinde çalıştırırlar. Yani anlayacağınız elinizde bir .mp3 ses dosyası var ve sitenizde Html5 audio elementi ile yayınlamak ayrıca bütün tarHer tarayıcıda düzgün bir şekilde çalışabilmesini sağlayabilmeniz için her tarayıcının desteklediği formatta yükleme yapmanız gerekiyor. İlerleyen zamanlarda bu sorunun ortadan kalkacağını umut ediyorum herkes gibi.

Html5 audio etiketinin kullanımı

Audio etiketi, Html5 ile beraber gelen bir kaç tane yeni modern tarayıcı özelliklerinden biridir. Resim eklemek için <img> taglarını kullanırız veses dosyaları için de <audio> taglarını kullanırız.

Web tarayıcılarınıda  temel  audio player kullanımı

Her tarayıcı farklı formatlar desteklediği gibi her tarayıcı da aynı şekilde görüntülemez. Verdiğimiz kod tarayıcılar üzerinde aşağıdaki gibi görünür. Her tarayıcı kendine özgü bir görünüm verir.

audio

  • Diğer Nitelikler:

autoplay

autoplay  kontrolü  tarayıcı yüklemeye başlar  başlamaz ortam  dosyasını otomatik olarak  çalıştırır anlamına  geliyor.

crossorigin

loop

mediagroup

  muted
preload

Preload değerleri :
  • preload=”auto”
  • preload=”metadata”
  • preload=”none”

Desteklemeyen Tarayıcılar :

Html5 audio etiketi  sadece  modern tarayıcılar  üzerinde çalışabildiği için çalışmayan tarayıcılara da  çözüm bulmak gerekiyor.  Ziayertçi  tarayıcısının desteklemediğini anlayabilmesi için

<audio></audio>  arasına “Malesef tarayıcınız  ortam oynatıcı  özelliğini desteklemiyor” gibi bir  uyarı  yazarsak html5 player yerine  bu  uyarı yazısını görebilirler.

Bunun  içinde aşağıdaki  gibi bir  kod kullanıyoruz.

Çoklu Ortam oynatma :
Çoklu ortam derken  demek istediğimiz  her  tarayıcının desteklediği  biçimde  ortam dosyası çalma. 


MIME Türleri

Html5  Audio elemanı  hakkında anlataklarımız bu kadar.

Örnek  bir demo :

Tarayıcınız desteklemiyorsa eğer bu sayfada kullandığım audio elementi ile normalde gözükmesi gereken ortam oynatıcı sizin tarayıcınızda gözükmüyor olabilir.

Aranan Kelimeler:

  • ses etikeri çlma com
1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
Loading...
Önceki İçerikAxis
Sonraki İçerikGLGE
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

CEVAP VER

Lütfen yorumunuzu yazın.
Lütfen İsminizi bu alana yazın.