[Raşit Tunca]

HTML5 de Sayfana Audio&Ses Doyası Nasıl Eklenir?

HTML5  "audio" etiketi, bir HTML belgesinde audio player elementi belirtmek için kullanılır. Örneğin, ziyaretçilerinizin müzik dinlemesi için web sayfanıza bir audio player yerleştirebilirsiniz.

HTML5'ten önce, ses dosyalarının web'de audio player ile oynatılabilmek için bir standart yoktu. Modern tarayıcılarda, sayfanıza audio player eklenmesi, resim ekleme kadar kolay. Artık özel eklentilerle (flash) uğraşmaya veya karmaşık kodlara ihtiyaç duymuyorsunuz, tek bir öğeyle bunu yapabilirsiniz.

Gerçekten audio player ekleme ne kadar basit olduğunu bir örnekle başlayalım:

ÖRNEK:

Kod:

<audio controls>

  <source src="muzik.mp3" type="audio/mpeg">

Tarayıcınız audio(ses) öğesini desteklemiyor.

</audio>

Yukarıda ki kodlar Sayfanıza basit bir audio player yerleştirmeniz ve bir kullanıcının medya aracını oynatabilmesi, duraklatması veya başka şekilde kontrol edebilmesi için temel denetimleri göstermeniz için tek ihtiyacınız olan kodlar budur.

HTML5  "audio"  etiketi, ses playerin nasıl başlatacağını belirten nitelikleri kabul eder. Öznitelikleri olarak, controls , autoplay , loop ve daha fazlasını içerir. Desteklenen niteliklerin tam listesi için aşağıya bakınız.

HTML <audio> Öğesi

HTML5'te audio player görüntülemek için yapmanız gereken şu kodları eklemek :

ÖRNEK:

Kod:

<audio controls>

  <source src="ney.ogg" type="audio/ogg">
 
  <source src="ney.mp3" type="audio/mpeg">
 
  Tarayıcınız audio(ses) öğesini desteklemiyor.

</audio>

Website hızını artırmak için, source özniteliğine her zaman type özniteliğini eklemeniz gerekir. Aksi halde, tarayıcının oynatabileceği ses dosyası bulana kadar tarayıcı her ses dosyasını yükler.

NOT : Yukarıda gördüğünüz üzere birden çok src (kaynak dosya) tanımlayabilirsiniz. <audio> Etiketi en modern tarayıcılar tarafından desteklenmektedir ancak sorun, farklı tarayıcıların aynı dosya biçimini desteklemiyor olmasıdır. İnternet Explorer .Wav uzantılı ses dosyalarını oynatamaz, ancak İnternet Explorer bunun yerine .mp3 dosyalarını oynatabilir. Bu sorunun çözümü her iki biçimi de kullanmaktır, bu nedenle ziyaretçilerin sesleri, tarayıcıları ne olursa olsun duyabiliyor.

AUDİO ÖZELLİKLER

<audio> öğesinin varsayılan davranışını değiştirebilecek veya geliştirebilen birkaç özel nitelik vardır.

src : Öğesini kullanarak birden fazla kaynak dosyası belirtebilirsiniz. Kaynak elemanı, kullanıcının tarayıcısından birinin desteklemediği durumlarda birden çok biçimi bir geri bildirim olarak belirtmenizi sağlar.

autoplay : Autoplay bu, tarayıcıya audio player oynatımını otomatik olarak başlatmasını söyler Mobil tarayıcıların genelde bu özelliği desteklemediğini, kullanıcının audio player oynatmaya başlamak için ekrana dokunması gerektiğini unutmayın. Websiteye gelen ziyaretçi yüksek sesli bir müzik ile karşılaşması, çok rahatsız edici olabileceğinden, bu özelliği dikkatli kullanın. (örnek kullanım: autoplay veya autoplay="autoplay" )

controls : Varsayılan audio denetimlerini gösterir oynat, duraklat, vb... (örnek kullanım: controls veya controls="controls" )

loop : Audio player oynatma Bitirdikten sonra müziğin tekrar oynatmaya devam edip etmeyeceğini belirtir. (örnek kullanım: loop veya loop="loop" )

muted : Audio playerin ses çıkışının varsayılan durumunu denetler. Varsa, bu öznitelik, yükleme üzerine ses çıkışının sessiz kalmasına (yani sesin olmamasına) neden olur. Bu özellik kullanıcıların tercihlerini geçersiz kılacaktır. Kullanıcı daha sonra istediği takdirde sesi açmayı seçebilir.

preload : Ses dosyasının açılan sayfada ön yüklemesinin yapılıp yapılmayacağı belirtir. webmaster, en iyi kullanıcı isteklerine neden olacağını düşündüğü şeyleri tarayıcıya bir ipucu vermesine olanak tanır. Bu özelliği kullanmak gerekli değildir, bazı tarayıcılar bu özelliği görmezden gelir.

Bu üç değerden birini alır :

    preload="none" : Taracıya ses dosyasının önceden yüklenmemesi gerektiğini söyler.
    preload="metadata" : Tarayıcıya, metnin uzunluğu veya formatını gibi meta verileri indirmesini söyler.
    preload="auto" : Kullanıcının kullanması beklenmese bile, tüm ses dosyasının indirilebileceğini gösterir.
    preload=" " : Boş dize, varsayılan değer preload="auto"

Her durumda, tarayıcı bu özelliği bir komut değil bir ipucu olarak alır.

HTML Ses - Tarayıcı Desteği

HTML5' te, üç adet desteklenen ses biçimi vardır: MP3, Wav ve Ogg.

Farklı biçimler için tarayıcı desteği şu şekildedir:

Tarayıcıların Desteklediği Audio Dokumenteleri MP3, Wav, Ogg

Internet Explorer : MP3
Chrome : MP3, Wav, Ogg
Firefox : MP3, Wav, Ogg
Safari : MP3, Wav
Opera : MP3, Wav, Ogg

HTML5 TARAYICILARIN DESTEKLEDİĞİ SES FORMATLARI

Dosya Formatı Audio Type

MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav