6 sene önce 17 Temmuz 2013 Vatanay Özbeyli HTML5, Tasarım Unsurları
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.
<source src="muzik.ogg" type="video/ogg">
Ü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”>
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.
<embed height="50" width="100" src="muzik.mp3">
HTML5 Lirik gösterimi dışında birçok yeniliğiyle beraberinde getiriyor.
Bu da ilginizi çekebilir WordPress İçin Ücretsiz Müzik Temaları
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.
audio css html html5 html5 müzik media player music müzik oynatıcı nasıl player web yapılır
Ambilight ile Bootstrap Slider Kullanımı 16102
Sitenize Haber ve Duyuru Akışı Ekleyin 11860
Sitenize Kolayca Slider Ekleyin 10274
CSS ve jQuery ile Dönen Menü 9005
Sadece CSS ile Slider Yapımı 8791
Fareyle Birlikte Hareket Eden Arkaplan Resmi 8581