HTML5 Audio Etiketi, HTML5 ile beraber gelen multimedia uygulamalarından biri olara audio etiketi ile ses dosyarını oynatmak için artık flash etiketlerine falan ihtiyacınız kalmamaktadır. Çok kolay bir şekilde mp3, ogg, m4a gibi ses dosyalarını oynatabilirsiniz.
HTML5 Audio Etiketi(Tag) ve Kullanımı
Standart olarak alttaki gibi bir mp3 oynatıcısı ekleyebilirsiniz sayfanıza
HTML
1 | <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls="controls"></audio> |
audio etiketinin src özelliğine ses dosyasının yolunu belirtiyorsunuz controls özelliğini belirtmezseniz sayfada görünmeyecektir mp3 oynatıcınıza ait kontroller.
Tarayıcıların desteklediği ses formatları
| Format | Tarayıcılar |
|---|---|
| m4a (AAC) | Chrome, Safari |
| ogg | Chrome, Safari, Opera |
| mp3 ve aac | Tüm popüler tarayıcılar |
Sonuç
Eğer tarayıcınız audio etiketini destekliyorsa üstteki sonuç kısmında bir müzik oynayıcı göreceksiniz oynat tuşuna bastığınızda url’de belirttiğiniz ses dosyası oynatılacaktır.
Desteklenmeyen Ses Formatı Sonucu
Gördüğünüz gibi tarayıcının desteklemediği bir format olduğunda oynatıcı tüm kontrollerini devredışı bırakıyor.
Audio etiketini desteklemeyen tarayıcı
Audio etiketini desteklemeyen tarayıcılar için metin göstermek isterseniz veya alternatif bir oynatıcı çıkarmak isterseniz yapmanız gereken audio etiketleri arasına html kodunuzu yazmalısınız.
1 2 3 | <audio src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" controls="controls"> <!--Tarayıcı desteklemezse alttaki yazı bastırılacak--> Tarayıcınız audio etiketini desteklemiyor</audio> |
Audio etiketi için bazı özellikler
| Özellik | Açıklama |
|---|---|
| controls | Oynatıcınızın görünür olmasını ve oynak ses aç kapa gibi kontrollerin açılması sağlanır. |
| autoplay | Oynatıcının otomatik olarak yürütmeyi başlatması sağlanır. |
| loop | Ses dosyası bittiğinde tekrar otomatik olarak baştan başlaması sağlanır. |
| muted | Oynatıcının sessiz modda açılması sağlanır. |
Not: Oynatıcının görünümü her tarayıcıda farklılık gösterebilir ama tüm tarayıcılarda ortak bir görünüme kavuşması için internette audio etiketi için oluşturulmuş çok başarılı css çalışmaları mevcut. Özellikle göz atmanızı tavsiye ederim.
📚 HTML5 Audio Etiketi Benzeri Makaleler
✍ Lütfen olumlu-olumsuz tüm görüşlerinizi bana yorum yada mail yolu ile iletmeyi ihmal etmeyin.
🔗 Sosyal medya kanallarından makaleyi paylaşarak destek olursanız çok sevinirim.
👋 Bir sonraki makalede görüşmek dileğiyle.
