HTML 5 Dersleri 8 – Audio (Ses Kullanımı)

HTML5 Audio Nedir?

HTML5 audio etiketi, web sayfalarına harici eklentiye ihtiyaç duymadan ses dosyası eklemeyi sağlar. Önceki dönemlerde Flash gibi eklentiler kullanılırken, HTML5 ile bu ihtiyaç ortadan kalkmıştır.

Audio etiketi; müzik, podcast, efekt ve bildirim sesleri gibi birçok amaçla kullanılabilir.

Audio Etiketi (audio)

Ses dosyası eklemek için audio etiketi kullanılır.

Temel Audio Kullanımı

<audio src="ses.mp3" controls></audio>

Bu örnek, ses oynatma kontrolleri bulunan basit bir audio gösterir.

Controls Özelliği

controls özelliği, kullanıcıya oynatma ve ses kontrolü sağlar.

Controls Örneği

<audio src="ses.mp3" controls></audio>

Autoplay Özelliği

Sayfa yüklendiğinde sesin otomatik olarak başlamasını sağlar.

Autoplay Örneği

<audio src="ses.mp3" autoplay muted></audio>

Not: Tarayıcılar autoplay için genellikle muted özelliğini zorunlu tutar.

Loop Özelliği

Ses dosyası bittiğinde tekrar baştan oynatılır.

Loop Örneği

<audio src="ses.mp3" loop controls></audio>

Muted Özelliği

Sesin kapalı (sessiz) başlamasını sağlar.

Muted Örneği

<audio src="ses.mp3" muted controls></audio>

Preload Özelliği

Ses dosyasının ne zaman yükleneceğini belirler.

Preload Değerleri

<audio src="ses.mp3" preload="auto" controls></audio>
<audio src="ses.mp3" preload="metadata" controls></audio>
<audio src="ses.mp3" preload="none" controls></audio>

• auto: Sayfa yüklenirken ses yüklenir

• metadata: Sadece ses bilgileri yüklenir

• none: Ses yüklenmez

Source Etiketi ile Çoklu Format Kullanımı

Farklı tarayıcılar için birden fazla ses formatı eklenebilir.

Çoklu Source Örneği

<audio controls>
    <source src="ses.mp3" type="audio/mpeg">
    <source src="ses.ogg" type="audio/ogg">
    Tarayıcınız audio etiketini desteklemiyor.
</audio>

HTML5 Audio Formatları

En yaygın kullanılan formatlar:

• MP3

• OGG

• WAV

MP3 formatı, tarayıcı uyumluluğu açısından en çok tercih edilen formattır.

HTML5 Audio Nerelerde Kullanılır?

• Müzik oynatıcılar

• Podcast sayfaları

• Eğitim siteleri

• Bildirim ve efekt sesleri

HTML5 Audio Kullanırken Dikkat Edilmesi Gerekenler

• Otomatik ses kullanımı kullanıcıyı rahatsız edebilir

• Dosya boyutları optimize edilmeli

• Mobil uyumluluk test edilmeli

• Gereksiz preload kullanımından kaçınılmalı

HTML5 audio kullanımını öğrendikten sonra, sayfa üzerinde sürükle ve bırak (drag & drop) işlemlerinin nasıl yapıldığını inceleyebiliriz.

? Bir sonraki ders:
HTML 5 Dersleri 9 – Sürükle / Bırak
https://cilginyazilim.com/html-5-dersleri-9-suruklebirak