HTML Web

HTML5 Audio Kullanımı

Merhaba,
Bu yazıda HTML5 ile gelen ögelerden olan, <audio> nesnesini anlatmaya çalışacağım.

Daha önceki HTML sürümlerinde herhangi bir audio(ses) dosyasını oynatabilmek için harici kodlara(scriptlere) ve eklentilere ihtiyaç duyulmaktaydı. Fakat bu son sürümle beraber desteklenen tarayıcılarda, gerekli etiketlerle çağrıldığında rahatlıkla audio dosyaları HTML5’in kendi medya aracı ile oynatılabilmektedir. Şimdi <audio> özelliğini işlemeye başlayalım.

1- <audio> desteklenen dosya türleri ve tarayıcılar

<audio></audio>  tagları(etiketleri) arasında tanımlanarak oluşturulur.

html5-audio-format

 

Kullanım Şekli:

 

<source> etiketinden biraz bahsetmek istiyorum. <audio> ve <video> elementleri içerisinde kullanılır. Kaynak manasına gelmektedir. Kullanılacak medya ögesinin kaynak dosyası (src) ve dosya tipi (type) bu kısımda belirlenir.

Aşağıdaki görselde <audio>’nun hangi tarayıcılar tarafından desteklendiğini gösteren bir görsel bulunmaktadır.

html5-audio-tarayıcı

2-<audio> özellikleri ve kullanımı

html5-audio-özellikler

 

2.1. controls özelliği :

<audio controls>şekilde bir kullanımı vardır. Sesin oynatılabilmesi için gerekli olan, play, pause ve ses ayarı ögelerini yükleyen medya aracı oluşturulur. Kullanılması gereken temel audio formatı budur.

İçerisinde kaynak dosya belirtilmediğinde sadece medya oynatıcısı oluşturulur ve sessiz modda görünür.

Kullanım Şekli:

Kod Çıktısı:

html5-audio-controls2

2.2. autoplay özelliği :

Bu özellik ile sayfa açıldığında, ses dosyası medya aracı tarafından otomatik olarak oynatılmaya başlar ve dosya bitene kadar çalmaya devam eder.

Kullanım Şekli:

 

2.3. loop özelliği :

Bu özellik ile açılan sayfada, ses dosyası medya aracından play tuşu ile çalmaya başlar. Kullanıcı tarafından müdahale edilmediği sürece, ses dosyası bitse bile yeniden başlayacak şekilde sürekli çalmaya devam eder.

Kullanım Şekli:

 

2.4. muted özelliği :

Bu özellik ile açılan sayfada, ses dosyasının medya aracındaki varsayılan durumu sessiz (muted) olarak ayarlanır.

Kullanım Şekli:

 

2.5. preload özelliği :

Bu özellik ile, ses dosyasının açılan sayfada ön yüklemesinin yapılıp yapılmayacağı kararı verilir. preload=”none” olduğunda ön yükleme yapılmayacağını bildiririz. preload=”auto” olduğunda ise ön yükleme yapılacağını bildiririz.

Kullanım Şekli:

 

2.6. src özelliği :

Bu özellik ile, oynatılmasını istediğimiz ses dosyasının sunucumuzdaki (localhost veya web) kaynağını belirtiriz. <source> etiketi içerisinde kullanılır. Yukarıda örneklediğim tüm kodlarda, kullanım örneği vardır.

audio elementinin anlatımı da bu şekilde sona ermiş bulunmaktadır. Yukarıda temel olarak <audio>‘nun nasıl kullanılması gerektiği hususunda bilgiler verilmiştir. Bunları çeşitlendirmek ve kullanımı zenginleştirmek ilgili tasarımcı ve programcılara kalmıştır.

Kolaylıklar dilerim.

 


HTML 5 Müfredatı

  1. HTML5 Nedir ?
  2. HTM5 – Temel Etiketler ve Özel Karakterler
  3. Metin Biçimlendirme(Text Formatting)
  4. Bağlantı (Link) Yapısı
  5. Tablo (Table) Kullanımı
  6. Liste(Lists) Kullanımı
  7. Form Nesneleri ve Kullanımı ~ 1
  8. Form Nesneleri ve Kullanımı ~ 2
  9. Audio Kullanımı
  10. Video Kullanımı
Rize/Ardeşen doğumlu.
Karadeniz Teknik Üniversitesi, İstatistik ve Bilgisayar Bilimleri mezunu.

.NET teknolojileri alanında ihtisas yapma amacında.
İstatistik ve nevi ilimleri sevmekte, fırsat bulduğunda üzerine çalışmayı amaçlamakta.

Özel bir şirkette web ve yazılım geliştirici olarak çalışmaktadır.