Html 5 Audio Kullanımı

Html 5 ile artık hiçbir ses çalara ihtyaç duymadan web sitelerimizde <audio></audio> etiketleri arasında seslerimizi oynatabiliyoruz.Her hangi bir player olmadan taglarımızı yazdığımızda kendi playerimizi oluşturabiliyoruz.Oluşturduğumuz bu player üç adet ses formatını destekliyor bunlar mp3 , ogg ve wav arkadaşlar eğer html 5 playerını kullanmak istiyorsanız kullanacağınız ses dosyasının formatı bu üçünden birisi olmalı.

Oluşturduğumuz playerımıza yine video etiketinde olduğu gibi control etiketini vererek kontrol düğmelerimizin çıkmasını sağlıyoruz.Bunun yanı sıra loop , preload ,autoplay ve muted gibi parametreler ile de playerimizi özelleştirebiliyoruz.

Gelin bi örnekle görelim nasıl yapıldığını.

Örnek (Standart) :

Evet yukarıdaki görülen playerin kodları aşağıdaki şekilde.

<audio controls="controls">
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

Yukarıda gördüğünüz üzere bu standart hali eğer loop kullanmak isteseyedim nasıl yapardım görelim.

Loop Kullanılmış Hali

Kodları : 

<audio controls loop>
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

Gördüğünüz gibi loop verdm ve kendini tekrar etmesini sağladım arkadaşlar.

Otomatik olarak başlamasını isteseydim autoplay parametresini vericektim arkadaşlar örnek player koymuyorum otomatik başlıyor çünkü kodlarını görelim aşağıda.

Autoplay 

<audio controls autoplay>
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

Preload ise sesin yüklenmesi ile ilgili bir kavram üç şekilde uygulanıyor bunlar auto , metadata ve none bunlarıda örnekle görelim hemen.

İlk olarak auto

Kodları :

<audio controls preload="auto">
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

Metadata

Kodları : 

<audio controls preload="metadata">
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

None 

Kodları :

<audio controls preload="none">
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

Son olarak'da muted kullanımını görelim arkadaşlar adındanda anlaşıldığı üzere ses kapatıp açma ile ilgili hemen örnekle görelim.

Muted

Kodları : 

<audio controls muted>
<source src="http://daniskaner.com/ders/ders.mp3" type="audio/mpeg" />
Tarayıcınız audio tag'ını desteklemiyor.
</audio>

Gördüğünüz gibi ses kapalı şekilde ve ses işaretine tıkladığımda açılıp kapatabiliyorum.

Arkadaşlar en anlaşılır şekilde anlatmaya çalıştım biraz uzun oldu ama mecburen haydi kolay gelsin :)