Html ile Web İşlemleri 23 - Ses (Audio) Kullanımı
MEDYA ELEMANLARI
Ses (Audio) Kullanımı
<audio> etiketi, HTML belgesine ses oynatıcı (audio player) eklemek için kullanılır (Görsel 3.37). Audio, İngilizcede ses anlamına gelir. Eski sürümlerde ses eklemek için eklenti yüklemek gerekir. HTML5 ile ses eklemek, resim eklemek kadar basittir. <audio> etiketi, </audio> kapama etiketi ile birlikte kullanılır. Kullanıcının müzik dosyasını oynatabilmesi, duraklatabilmesi gibi temel denetimler <audio> HTML bloku ile yapılır.
 |
| Görsel 3.37: Ses oynatıcısı |
1. <audio> Etiketi
<audio> etiketi, ses oynatıcının nasıl oynatılacağını belirten özelliklere sahiptir.
<source src="ukulele.mp3" type="video/mpeg">
<source src="ukulele.ogg" type="video/ogg">
Tarayıcınız ses (audio) ögesini desteklemiyor.
</audio>
2. Src Özelliği
Src özelliği, açılan HTML belgesinde ses dosyasının sunucudaki (localhost veya web) kaynağını ifade eder. Src özelliği belirtilmediğinde sadece ses oynatıcı oluşturulur.
<source src="audio.mp3" type="audio/mp3">
</audio>
3. Autoplay Özelliği
Autoplay özelliği, HTML belgesi aktif olduğunda ses dosyası, ses oynatıcısı tarafından otomatik olarak oynatılmaya başlanır. Mobil tarayıcılarda bu özellik pasif olarak gelir. Web sayfaları açılır açılmaz ses dosyalarının kullanıcı isteği dışında oynatılması rahatsız edici bir özelliktir.
<source src="audio.mp3" type="audio/mp3">
</audio>
4. Controls Özelliği
Controls özelliği, ses dosyasının oynatılabilmesi için gereken “oynat, durdur ve ses ayarı” ögelerini içeren ses oynatıcı aracını oluşturur. Kaynak dosya belirtilmez ise sadece ses oynatıcı oluşturulur ve sesiz modda görünür (Görsel 3.38).
<source src="audio.mp3" type="audio/mpeg">
Tarayıcınız ses ögesini desteklemiyor.
</audio>
 |
| Görsel 3.38: HTML5 ses oynatıcısı temel ögeler |
5. Loop Özelliği
Loop özelliği ile ses dosyası medya aracından oynat butonuna basarak oynatılmaya başlar. Kullanıcı tarafından durdurulmadığı sürece ses dosyası oynatılmaya devam eder.
<source src="audio.mp3" type="audio/mp3">
</audio>
6. Muted Özelliği
Muted özelliği ile açılan HTML belgesinde ses dosyasının medya oynatıcıdaki varsayılan durumu sessiz (muted) olarak ayarlanır.
<source src="audio.mp3" type="audio/mp3">
</audio>
7. Preload Özelliği
preload özelliği ile açılan HTML belgesinde ses dosyasının önyüklemesinin yapılıp yapılmayacağı kararı verilir. Önyükleme yapılacak ise preload=auto, yapılamayacak ise preload=none olarak bildirilir.
<source src="audio.mp3" type="audio/mp3">
</audio>
HTML5; JavaSript tarafından ses dosyası oynatmayı kontrol etmek için kullanılabilecek yöntemler, özellikler ve olaylar sağlar.
Uygulama
<audio> etiketini kullanarak web sayfasına ses ekleme işlemini yönergeler doğrultusunda gerçekleştiriniz.
2. Adım: <body> etiketi içine <audio> blokunu ekleyiniz.
3. Adım: “http://meb.ai/fN7MRY” URL adresini kullanarak HTML belgenize ses ekleyiniz.
<source src=" http://meb.ai/fN7MRY" type="audio/mp3">
5. Adım: Videoyu oynatınız, ses görüntülenmiyorsa kodlarınızı gözden geçiriniz.
6. Adım: <audio> blokunun altına yeni bir <audio> bloku oluşturunuz.
7. Adım: “http://meb.ai/U4S81U” URL adresini kullanarak HTML belgenize ses ekleyiniz.
<source src=" http://meb.ai/U4S81U" type="audio/mp3">
Adım 8: 3 ve 4. adımları farklı sesler için tekrarlayınız.
Sıra Sizde
İçeriğinde video bulunan web sitelerinin kaynak kodlarını inceleyerek video ekleme yöntemlerini ve kullanılan HTML etiketi özelliklerini arkadaşlarınız ile paylaşınız.
Hiç yorum yok