HTML5 Müzik Oynatıcı

HTML5 ile birlikte <audio> elemanına merhaba dedik. Bu yeni kod birimi tüm modern web görüntüleyicisinde sorunsuz olarak çalışmakta. Fakat yine de web üzerinden müzik oynatmak sanıldığı kadar kolay değildir.

Yazacağınız kod Internet Explorer, Chrome, Firefox ve Safari gibi görüntüleyicilerle yetinmeyerek PC, MAC, IOS ve Android gibi işletim sistemlerinde de sorunsuzca çalışmalı.

HTML5 ile Müzik

Başlığı biraz detaylandıralım. Web geliştiricileri yıllardır <embed> ve <object> kod birimleriyle müzik eklemeleri yaptılar. HTML5 ile gelen <audio> elemanı, bizi bütün hantal müzik oynatıcılardan kurtarmakta. Peki bu yeni müzik oynatıcı ne gibi yenilikler sunuyor?

İşte en basit haliyle HTML müzik oynatıcı :

Bu basit oynatıcıyı <audio> ile hazırladık. Oynatılacak medyayı ise <source> ile gösterdik.

<audio controls>
<source src="muzik.mp3" type="audio/mpeg">
<source src="muzik.ogg" type="video/ogg">
Web görüntüleyiciniz HTML5 Müzik Oynatıcıyı desteklemiyor.
</audio>

Üstte gördüğünüz gibi video/ogg tanımlaması da yaptık. Bu iki müzik formatını belirtiyoruz çünkü bazı görüntüleyiciler ve mobil cihazlar HTML5 için tam desteği vermiyor. Ayrıca alt kısma da “Web görüntüleyiciniz HTML5 Müzik Oynatıcıyı desteklemiyor.” metnini ekleme sebebimiz de bu. Ama merak etmeyin, makalenin devamında bu sorunu da çözeceğiz.

Müziklere lirik, alt yazı ekleme imkanı

Daha önce HTML5 video player hazırlamıştık ve bu konuyu orada da ele almıştık. Fakat müzik oynatıcı için işler biraz daha farklı.

Artık <track> koduyle alt yazılarımızı direkt olarak müzik oynatıcımızın içine yedirebiliyoruz.

<track src=”altyazi_tr.vtt” kind=”subtitles” srclang=”tr”>

En iyi seçim

An itibariyle kullanabileceğiniz en iyi müzik oynatıcısı HTML5 desteğiyle hazırlanmış olan. Fakat ne yazık ki günceli yakalayaman web görüntüleyicilerini de düşünerek küçük bir hile yapmamız gerekiyor. Yukarıdaki örnekte “Web görüntüleyiciniz HTML5 Müzik Oynatıcıyı desteklemiyor.” yazdırdığımız alana <embed> ile aynı medyayı ekleyeceğiz. Böylece güncel oynatıcıyı açmayan web görüntüleyicisi direkt olarak <embed>’a yönelecek.

<audio controls height="100" width="100">
<source src="muzik.mp3" type="audio/mpeg">
<source src="muzik.ogg" type="audio/ogg">
<embed height="50" width="100" src="muzik.mp3">
</audio>

Ek olarak

HTML5 Lirik gösterimi dışında birçok yeniliğiyle beraberinde getiriyor.

Audio elemanının sonuna

• autoplay ekleyerek müziğin sayfanın açılışında otomatik olarak çalmasını sağlayabilirsiniz.
• controls ekleyerek oynatıcınızın görünür olmasını sağlayabilirsiniz.
• loop ekleyerek müziğin bittiğinde otomatik olarak tekrar başlamasını sağlayabilirsiniz.
• muted ekleyerek oynatıcının varsayılan ses değerini 0 olarak gösterebilirsiniz.
• preload ekleyerek sayfanıza dahil ettiğiniz müziğin sayfa açılışında direkt yüklenmesini açıp/kapatabilirsiniz. Burası çok önemli. Kullanım tipi : <audio preload=”auto|metadata|none”>. Auto seçimi müzik dosyanızı açılışta yüklenmesini sağlar. Site açılış hızını olumsuz etkileyebilir. Metadata sayfa açıldığında sadece metayı yükler, müziği yüklemez. None ise hiçbir yüklemeyi yapmaz. Oynatıcı aktifleştirildiğinde yükleme işlemi başlar.

Bu küçük ayarlar sayesinde gayet özgün bir oynatıcıya sahip olabilirsiniz.