HTML Etiketleri - AUDIO Etiketi
10.10.2018 21:27:31

HTML5 ile programcıların hayatına giren en güzel etiketlerden birisidir. Ses dosyalarının oynatılması için tasarlanmış olan etikettir. Programcıyı Adobe Flash bağımlılığından kurtarır.

<audio> biçiminde açılır ve </audio> biçiminde kapanır.


<!DOCTYPE html>
<html>
    <head>
        <title>WebSanat.net - Audio Etiketi</title>
        <link rel="stylesheet" type="text/css" href="stil_dosyasi.css">
    </head>
    <body>
        <audio src="http://www.websanat.net/websanat/ornek_ses.mp3" controls>
            Tarayıcınız AUDIO etiketini desteklemiyor
        </audio>
    </body>
</html>


Direkt olarak <audio> etiketinin içerisinde veya (birden çok ses dosyası olması durumunda) çocuk etiketlerin içerisinde SRC özelliği tanımlanmadan bir şey ifade etmeyecektir. SRC özelliği, çalınacak ses dosyasının veya dosyalarının konumunu tarayıcıya bildirir.

Birden fazla ses dosyası olması durumunda AUDIO etiketinin çocuğu olarak SOURCE etiketileri kullanılır ve AUDIO etiketinin içerisine SRC özelliği tanımlanmaz.


<!DOCTYPE html>
<html>
    <head>
        <title>WebSanat.net - Audio Etiketi</title>
        <link rel="stylesheet" type="text/css" href="stil_dosyasi.css">
    </head>
    <body>
        <audio controls>
            <source src="http://www.websanat.net/websanat/Zigan_Aldi-Fidale.mp3" type="audio/mpeg">
            <source src="http://www.websanat.net/websanat/ornek_ses.mp3" type="audio/mpeg">
            Tarayıcınız AUDIO etiketini desteklemiyor
        </audio>
    </body>
</html>


:-) Yukarıdaki kod çıktısından Zigan Aldi - Fidale'i dinlemeyi unutmayın :-)


AUDIO etiketi içerisinde SRC dışında kalan özelliklere değer vermeye gerek yoktur. Fakat değer vermek istenilirse boş değer verilmesi yeterlidir.

10.10.2018 tarihi itibariyle AUDIO etiketi MP3, WAV ve OGG ses formatlarını tanımaktadır.

AUDIO etiketi içerisine yazılacak yazılar veya eklenecek çocuk etiketler sadece kullanılan tarayıcının bu etiketi desteklememesi durumunda görünecektir. Tarayıcı AUDIO etiketini destekliyorsa bu yazılar veya etiketler görünmeyecektir. Destekleyen tarayıcı listesi aşağıda verilmiştir.

    Özellikleri:

    1) AUTOPLAY: <audio src="http://www.websanat.net/websanat/ornek_ses.mp3" autoplay> biçiminde tanımlanır ve tarayıcı sayfayı yükler yüklemez sesin oynatılmasını sağlar.

    2) CONTROLS: <audio src="http://www.websanat.net/websanat/ornek_ses.mp3" controls> biçiminde tanımlanır ve oynatıcının kullanıcı tarafından kontrol edilebilmesini sağlayacak başlatma,durdurma,ses ayarı ve benzeri ek tuşlar gösterilir.

    3) LOOP: <audio src="http://www.websanat.net/websanat/ornek_ses.mp3" loop> biçiminde tanımlanır ve sesin çalması bittiğinde başa alarak tekrar çalınmasını sağlar.

    4) SRC: <audio src="http://www.websanat.net/websanat/ornek_ses.mp3"> biçiminde veya AUDIO etiketinin çocuk etiketleri olan SRC etiketleri içerisinde tanımlanır. Yukarıda örnekleri verilmiştir.

    10.10.2018 İtibariyle Tarayıcı Ses Formatı Desteği:

    * HTML 5 Desteği olmayan hiç bir tarayıcıda çalışmayacaktır.

    * Microsoft Internet Explorer / Edge tarayıcısı MP3 desteği sunsa da WAV ve OGG desteği sunmaz.

    * Google Chrome, Opera ve Mozilla Firefox tüm formatları desteklemektedir.

    * Apple Safari tarayıcısı MP3 ve WAV desteği verse de OGG desteği vermemektedir.

    WAV formatı Microsoft firmasının oluşturmuş olduğu bir ses formatı olsa da tarayıcılarında destek vermemesi çok garip bir durumdur. Kısa sürede güncellemelerle çözülmesi beklenmektedir.


    10.10.2018 İtibariyle AUDIO Etiketinin Tarayıcı Desteği:

    * Google Chrome, 4.0 ve üst versiyonları

    * Microsoft Edge, 9.0 ve üst versiyonları

    * Mozilla Firefox, 3.5 ve üst versiyonları

    * Apple Safari, 4.0 ve üst versiyonları

    * Opera, 10.5 ve üst versiyonları


    Çocuk SOURCE Etiketlerinde Yazılacak TYPE Özelliği:

    Kaynakta belirtilen dosyanın tarayıcı tarafından hangi CODEC ile çözüleceğini belirtir.

    * MP3 formatı için "audio/mpeg" değeri kullanılmalıdır.

    * OGG formatı için "audio/ogg" değeri kullanılmalıdır.

    * WAV formatı için "audio/wav" değeri kullanılmalıdır.



İçerikle İlgili Görüş & Sorularınız

Bu içerikte hiç yorum yok, neden ilk yorumu siz yapmıyorsunuz?
Yorum yapabilmek için giriş yapmalısınız, üyemiz değilseniz kayıt olmak için tıklayın
+90 555 141 00 25
info@websanat.net
Cemalpaşa Mah. Toros Cad. 63007 sok. Doktorlar Sitesi No:202 Seyhan/ADANA