HTML5 Audio Etiketi – HTML5 Ses Özelliği

HTML5 hayatımıza girdi ve sesler üzerinde daha fazla hakimiyet sağladığımız söylenebilir. Ses dosyaları üzerinde birçok olay gerçekleştirebilmemize olanak sağlayan kontrolleri de beraberinde dersin içeriğinde görüntüleyelim. Yazı içeriği HTML5 Audio Etiketi – Ses Özelliği tamamını barındırıyor seslerle nasıl çalışılacağına değinilmiştir. İlk olarak bir ses dosyasını <audio> etiketi ile kullanıyoruz.

<audio controls>
<source src="seskaydi.mp3" type="audio/mpeg">
Tarayıcınız bu özelliği desteklemiyor.
</audio>

HTML5 Audio ile Hangi Ses Formatları Oynatılabilir?

Sadece Mp3, Wav ve Ogg formatlarını oynatabiliyoruz. Bunların her birinin mime tipi birbirinden farklıdır. Kısaca göstermek gerekirse,

<!-- mp3 -->
<source src="ses.mp3" type="audio/mpeg">

<!-- wav -->
<source src="ses.wav" type="audio/wav">

<!-- ogg -->
<source src="ses.ogg" type="audio/ogg">

Otomatik Başlatma Özelliği (Autoplay)

Sesin otomatik başlaması için audio etiketine autoplay niteliğini eklememiz gerekiyor.

<audio controls autoplay>

Sesi Döngüye Alıp Sürekli Çalma (loop)

Sesin bittikten sonra tekrar başlaması ve buna devam etmesi için audio etiketine loop niteliği eklenmelidir.

<audio controls autoplay loop>

Sessizde çalma özelliği (muted)

Sesin sessizde çalması için audio etiketine muted niteliği eklenmelidir.

<audio controls autoplay muted>

Ön yüklemesini iptal etme (preload)

Sesin başlamadan önce ön yüklemesini iptal etmek için audio etiketine preload=”none” niteliği eklenmelidir.

<audio controls autoplay preload="none">

Oynatma (play) ve Durdurma (pause) Özellikleri

Bu ses kayıtlarını normal oynatmak veya döngüye sokup tekrar tekrar çalması pek bir şey ifade etmiyor. Mesela işin içine js girse (burada jquery devrede tabi) daha renkli şeyler çıkabilir ortaya. Oynatma ve durdurma işlemlerine başlayabiliriz. Öncelikle bir html çıktısı üretelim.

<audio controls>
  <source src="seskaydi.mp3" type="audio/mpeg">
  Tarayıcınız bu özelliği desteklemiyor.
</audio>

<button id="play">Oynat</button> <button id="pause">Durdur</button>

Şimdi jquery’de click olaylarına ses dosyamızı durdurması ya da oynatması için komutlar ekleyelim. Bunun için play() ve pause() metodlarını kullanacağız.

// html audio elementi
var audio = $('audio');

// oynatma işlevi
$('#play').on('click', function(e){
    audio[0].play();
    e.preventDefault();
});

// durdurma işlevi
$('#pause').on('click', function(e){
    audio[0].stop();
    e.preventDefault();
});

$(‘audio’) sonuna [0] eklememiz html ses elemanına çevirmemize olanak sağlıyor. Diğer türlü bir jquery nesnesi olacaktı. Tahmin edebileceğiniz gibi ses metodları sadece ses elemanlarında çalışacağı için bunu yapmak zorundaydık.

Sesi Oynatma

Ses dosyası çalmaya devam ederken bunu yakalamak istiyorsak timeupdate event’ini kullanmalıyız.Örneğin,

var audio = $('audio');
audio.bind('timeupdate', function(){
   console.log('ses çalıyor..');
});

HTML5 Audio Etiketi – Ses Özelliği makalemin sonuna geldik, buradan sonrasını http://www.erbilen.net/html5-audio-ses-ozelligi/ sayfasından devam ettirebilir daha renkli olaylara tanık olabilirsiniz. Ben fazlasının ihtiyaç duyulacağını düşünmediğim için yazımda yer vermiyorum. Bu tarz bir ses oynatma özelliği ile ingilizce renkler uygulamamda basit anlamda her bir renk butonuna basıldığında o ses dosyası oynatılıyor ve duruyordu. Herkese iyi çalışmalar. 🙂