Website’de Arkaplan’a Müzik Ekleme

Website’de arkaplan’a müzik nasıl eklenir?

Daha öce sadece Internet Explorer’da çalışan <bgsound> ile arka plana müzik ekleme özelliğinden bahsetmiştik. Şimdi sizelere html’de en son kullanılan ve tüm tarayıcılarda çalışan <audio> elemanından bahsetmek istiyorum.

Kısaca <audio> Nedir ve Nerelerde Kullanılır?

HTML <audio> elemanı ses içeriğini websitelere gömmek için yani arka plana müzik eklemek için kullanılır. Eğer tek sayfalık bir website’ye sahipseniz, ziyaretçilerinize sayfanızda müzik dinletmek isteyebilirsiniz. Tek sayfadan kastım ürün tanıtım sayfası olabilir ya da bir sohbet sitesi.. Bu kategoriye kişisel blog sitelerini de ekleyebiliriz çünkü kişisel blog sahipleri bazı sayfalarında müzik dinletmek isteyebilir.

Website’de Arkaplan’a Müzik Nasıl Eklenir?

Önce örnek kodu eklemek istiyorum..

<audio
   controls src="Müzik URL Adresi">
</audio>

Yukarıdaki örnek, <audio> elemanın basit kullanımını göstermektedir. Daha ileriye gitmemiz mümkün. Mesela bir tarayıcı bu kodu ilk algıladığında eklemiş olduğun ses dosyasının formatına bakar ve destekliyorsa çalıştırır. Eğer desteklemiyorsa çalışmaz ama siz birden fazla ses dosyası eklerseniz, ilk desteklediği formattaki ses dosyasını çalıştırır.

Örnek verecek olursak;

<audio controls>
  <source src="myAudio.mp3" type="audio/mp3">
  <source src="myAudio.ogg" type="audio/ogg">
</audio>

Diğer Kullanım Notları

controls özelliğini belirtmezseniz, müzik çalar tarayıcının varsayılan denetimlerini içermez. JavaScript ve HTML Media Element API kullanarak kendi özel kontrollerinizi oluşturabilirsiniz.

Nitelikler

autoplay – Bir Boolean niteliği: belirtilirse, ses dosyası tüm ses dosyasının indirmeyi bitirmesini beklemeden en kısa sürede otomatik olarak oynatmaya başlar.

controls – Bu özellik mevcutsa, kullanıcıya, ses düzeyi ve durdur/oynat gibi özellikler dahil olmak üzere ses oynatımını kontrol etmesine izin veren kontroller sunulur.

loop – Bir Boolean niteliği: bu özellik belirtilirse, ses çalar ve sesin sonuna gelindiğinde otomatik olarak tekrar çalar.

muted – Sesin susturulmasına yarayan bir özelliktir.

preload – Bu numaralandırılmış öznitelik, tarayıcıya yazarın en iyi kullanıcı deneyimine neyin yol açacağını düşündüğü hakkında bir ipucu sağlamak için tasarlanmıştır. Aşağıdaki değerlerden birine sahip olabilir:

  • none – Sesin önceden yüklenmemesi gerektiğini belirtir.
  • metadata – Yalnızca ses meta verilerinin (örn. Uzunluk) alındığını belirtir.
  • auto – Kullanıcının kullanması beklenmese bile, tüm ses dosyasının indirilebileceğini belirtir.

src – Gömülecek sesin URL’sini gösterir. Bu, HTTP erişim kontrollerine tabidir. Bu isteğe bağlıdır; Bunun yerine, gömülecek sesi belirtmek için ses bloğundaki öğeyi kullanabilirsiniz.

ÖRNEKLER

<audio
  src="AudioTest.ogg"
  autoplay>
  Your browser does not support the <code>audio</code> element.
</audio>
<audio controls="controls">
  <source src="foo.wav" type="audio/wav">
  Your browser does not support the <code>audio</code> element. 
</audio>
<audio controls="">
 <source src="foo.opus" type="audio/ogg; codecs=opus"/>
 <source src="foo.ogg" type="audio/ogg; codecs=vorbis"/>
 <source src="foo.mp3" type="audio/mpeg"/>
</audio>