Sayfaya HTML5 ile Müzik eklemek

Bir web sayfasına HTML5 ile müzik eklemek son derece kolay bir işlem. Çünkü html 5 çoğu müzik dosyalarının çoğunu destekliyor. Html5’ten önce tarayıcıların herbiri her müzik dosyası türü için plugin yani eklenti ihtiyacı duyuyordu. Fakat html 5 (*)  ile bu durum bir standarta kavuştu.

Şu anda audio etiketi ile desteklenen müzik dosyası formatları: MP3, Wav, Ogg

HTML 5, <audio> elementi ile sayfalara eklenecek mp3, mp4 ve sair müzik dosyaları, Internet Explorer 9 ve üstü, Firefox, Opera, Chrome ve Safari tarayıcılarda sorunsuz şekilde dinlenebiliyor. (IE 8 ve altındaki sürümler audio elementini desteklemez).

Sayfaya html 5 ile müzik dosyası eklemek için gereken şey aşağıdaki kodu <body> </body> etiketleri arasına eklemeniz… (müzik dosyalarının fiziki adresini siz yazacaksınız).

<audio controls>
<source src=”muzikekle.ogg” type=”audio/ogg”>
<source src=”muzikdosyasi.mp3″ type=”audio/mpeg”>
Browseriniz audio kodunu desteklemiyor (Your browser does not support the audio element.)
</audio>

Veya daha kısa kod:
<audio width=”200″ height=”100″ src=”/muzikdosyasiadresi.mp3″ controls=”controls”>
</audio>

Böylelikle yeni html5 ile sayfaya kullanıcıların durdurup çalabilecekleri, kısacası kontrol edebilecekleri bir müzik eklemiş olacaksınız.

HTML5 kod nasıl olur?

Tarayıcıların html5 kodlarını tanıması için sayfa kodunuzun başında

<!DOCTYPE HTML>

yazması yeterlidir…

(Önemli NOT : Kodu kopyala yapıştır yaptıktan sonra tırnakları düzeltiniz. Aksi takdirde hata verecektir).

HTML 5 Audio Formatları ve Desteklenen Tarayıcılar (Browser uygunluğu)

<audio> elemanı şu anda şu 3 formatı destekler: MP3, Wav, Ogg:

Browser MP3 Wav Ogg
Internet Explorer Evet Hayır Hayır
Chrome Evet Evet Evet
Firefox Evet: Windows 7, Windows 8,  Windows Vista, Android Evet Evet
Safari Evet Evet Hayır
Opera Hayır Evet Evet

Audio Formatı için MIME tipleri

Format MIME-type
MP3 audio/mpeg
Ogg audio/ogg
Wav audio/wav

HTML5 Audio Etiketleri

Tag Açıklama
<audio> Sesi tanımlar
<source> Çoklu medya kaynaklarını tanımlar. Örnek: <video> ve <audio>

 

Bu yazı Kod kategorisine gönderilmiş ve , , , , , , , ile etiketlenmiş. Kalıcı bağlantıyı yer imlerinize ekleyin.